如何使用WPF获得此设计？

我希望实现以下设计：

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

[Image][[]图像]
[]列表框][]

具有的元素应拉伸并占据窗体上的所有可用空间

当前的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>

（中间的ListBox在这里丢失）

---

我的问题是，ListView没有拉伸，它们占用的空间尽可能少（因此它们只是一条细线）。如何告诉列表框他们应该共享并填充可用空间？

如果您想使用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>

---

您应该为此使用网格。 请看下面的代码：

<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>

---

首先，在方向=垂直（默认值）的StackPanel中，任何东西都不会垂直拉伸。它怎么能把东西叠起来，还能让它们伸展呢

现在，您应该可以使用网格来实现这一点。使用

*

使列或行占用所有可用空间，使用

Auto

仅占用必要的空间

提示：如果有三列，其中两列为

Width=“*”

，一列为

Width=“Auto”

，并且网格在运行时的宽度为1250（请不要指定任何直接高度或宽度，除非您绝对确定元素不会调整大小）
如果自动列中的控件使用250，则带星号的列将共享剩余的1000，从而每个列获得500

嗯,

---

bab.

我想拉伸的元素在DockPanel中，我想在那里拉伸它们。但电网运行良好。谢谢