如何使用WPF獲得此設計？

Question

我想達到以下設計：

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

（中間的列表框在這裏失蹤）

我的問題是，該列表視圖，不伸展，他們採取儘可能小的空間（所以他們只是一條細線）。我怎麼能告訴列表框，他們應該分享和填充可用空間？

Answer 1

你應該使用網格這一點。 看看下面的代碼：

所有的

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

Answer 2

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

Answer 3

首先，沒有什麼會在一個StackPanel垂直拉伸與角度=垂直（缺省值）。它如何堆疊東西，仍然讓它們伸展？

現在，你應該可以用Grid來做到這一點。使用*使列或行佔據所有可用空間，並且Auto只佔用必要的空間。

提示：如果你有3列，2爲Width="*"和一個Width="Auto"，和網格得到1250的寬度在運行（永遠不要指定任何直接的高度或寬度，除非你是絕對肯定的元素贏得了」調整大小）。
如果自動列內的控件佔用了250個共享剩餘1000個星號的列，並因此每個獲得500個。

HTH，

bab。