如何使用WPF获得此设计？

我想达到以下设计：如何使用WPF获得此设计？

[Image][<-- Listbox -->][<-- Listbox -->][Image] 
[<-- Listbox----->][Listbox][<----- Listbox -->]

与元素< - - >应伸展，采取的形式上的所有可用空间。

当前XAML看起来是这样的：

<StackPanel> 
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <Image Height="100" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/> 
      <ListView Height="100" HorizontalAlignment="Stretch" Name="FileinfoList" Width="auto" Background="{x:Null}" BorderBrush="{x:Null}"></ListView> 
      <ListView Height="100" HorizontalAlignment="Stretch" Name="DatabaseInfoList" Width="auto" Background="{x:Null}" BorderBrush="{x:Null}"></ListView> 
      <Image Height="100" HorizontalAlignment="Right" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/> 
     </DockPanel> 
     <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <ListView Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="FileFields" DockPanel.Dock="Left" /> 
      <ListView Height="232" HorizontalAlignment="Stretch" Name="DatabaseFields" VerticalAlignment="Stretch" DockPanel.Dock="Right"/> 
     </DockPanel> 
    </StackPanel>

（中间的列表框在这里失踪）

我的问题是，该列表视图，不伸展，他们采取尽可能小的空间（所以他们只是一条细线）。我怎么能告诉列表框，他们应该分享和填充可用空间？

来源

2012-03-21 Feroc

你应该使用网格这一点。看看下面的代码：

所有的

<StackPanel> 
     <Grid>   
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <Image Grid.Column="0" Height="100" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" 
        /> 
      <ListView Grid.Column="1" Height="100" HorizontalAlignment="Stretch" Name="FileinfoList" Width="auto" Background="Yellow" BorderBrush="{x:Null}"></ListView> 
      <ListView Grid.Column="2" Height="100" HorizontalAlignment="Stretch" Name="DatabaseInfoList" Width="auto" Background="Green" BorderBrush="{x:Null}"></ListView> 
      <Image Grid.Column="3" Height="100" HorizontalAlignment="Right" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/>  
     </Grid> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <ListView Grid.Column="0" Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="FileFields" DockPanel.Dock="Left" 
         Background="Green"/> 
      <ListView Grid.Column="1" Height="232" HorizontalAlignment="Stretch" Name="DatabaseFields" VerticalAlignment="Stretch" 
         Width="100" Background="Yellow"/> 
      <ListView Grid.Column="2" Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Right" 
         Background="Green"/> 
     </Grid> 
    </StackPanel>

来源

2012-03-21 10:50:49

谢谢，那个例子工作正常。 :) – Feroc 2012-03-21 11:54:22

如果你想使用DockPanel，你应该知道最后声明的元素将填充内部面板部分。所以我会做这样的事情：

<StackPanel> 
    <DockPanel> 
    <Image Height="100" Width="100" DockPanel.Dock="Left"/> 
    <Image Height="100" Width="100" DockPanel.Dock="Right"/> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <ListView Grid.Column="0" Height="100" /> 
     <ListView Grid.Column="1" Height="100" /> 
    </Grid> 
    </DockPanel> 
    <DockPanel> 
    <ListView Height="50" DockPanel.Dock="Left" /> 
    <ListView Height="50" DockPanel.Dock="Right"/> 
    <ListView Width="100" /> 
    </DockPanel>

来源

2012-03-21 10:50:06 Julien

首先，没有什么会在一个StackPanel垂直拉伸与角度=垂直（缺省值）。它如何堆叠东西，仍然让它们伸展？

现在，你应该可以用Grid来做到这一点。使用*使列或行占据所有可用空间，并且Auto只占用必要的空间。

提示：如果你有3列，2为Width="*"和一个Width="Auto"，和网格得到1250的宽度在运行（永远不要指定任何直接的高度或宽度，除非你是绝对肯定的元素赢得了”调整大小）。
如果自动列内的控件占用了250个共享剩余1000个星号的列，并因此每个获得500个。

HTH，

bab。

来源

2012-03-21 11:02:44

我想要拉伸的元素在DockPanel中，我希望它们伸展。但网格工作正常。谢谢。 – Feroc 2012-03-21 11:54:00

如何使用WPF获得此设计？

回答

相关问题