如何在WPF（3個控件）中創建此佈局？

enter image description here 如何在WPF（3個控件）中創建此佈局？

我使這個圖像顯示了控件。最上面的一個是ListView，其他的是ListView控件以及其他控件。

但我無法弄清楚如何佈局它們看起來像那樣。

目前我使用3 DockPanels對於其中最上面的一個採用自頂VerticalAlignment每個ListView，其他人使用底部VerticalAlignment，左右（爲HorizontalAlignment）。

但是當我看着它時，其他2個控件出現在頂部ListView右側。當我將頂部DockPanel縮放到一半尺寸時，我可以看到這一點，然後將其他兩個DockPanel顯示出來，連接到頂部DockPanel的右側。

有關如何解決此問題的任何想法？

來源

2011-03-22 Joan Venge

這就是你到了那裏一些奇怪的佈局？ – 2011-03-22 23:33:24

是的，這是一個不同的應用程序，但佈局真的很合適。想想它像一個選項編輯器般的窗口：O – 2011-03-22 23:35:02

這個怎麼樣？

網格沒有固定的寬度或高度，應該適應您添加的任何控件。

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"></ColumnDefinition> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
     <ColumnDefinition Width="Auto"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
     <RowDefinition Height="Auto"></RowDefinition> 
    </Grid.RowDefinitions> 
    <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Aqua" Height="100"/> 
    <StackPanel Grid.Row="2" Grid.Column="0" Background="Orange" Height="100" Width="150" VerticalAlignment="Bottom"/> 
    <StackPanel Grid.Row="2" Grid.Column="2" Background="Green" Height="60" Width="200" VerticalAlignment="Bottom"/> 
</Grid>

初始窗口

enter image description here

大小的窗口

enter image description here

編輯迴應評論

如果你想在頂部面板中的進度條，只需使用：

<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
     Background="Aqua" Orientation="Vertical"> 
     <ListView Height="50" Background="Purple"></ListView> 
     <ProgressBar Height="20" IsIndeterminate="True" ></ProgressBar> 
    </StackPanel>

enter image description here

來源

2011-03-23 01:21:04 grantnz

謝謝，這很好。有一件事我不能這樣做：基本上在第一個使用Aqua顏色的stackpanel中，我有2個控件，進度條和listview。我將listview的寬度設置爲auto，並填充窗口的寬度，但對於寬度小於10像素的進度條，這不起作用。我必須手動設置寬度，但我不想要這個，窗口縮放應該將其縮放到窗口大小。有任何想法嗎？不知道他們是否有關係。 – 2011-03-23 18:50:03

請參閱編輯我的答案.... – grantnz 2011-03-23 19:50:14

我正在使用HorizontalAlignment =「中心」，使其變小，看到您的編輯後，意識到它。謝啦。 – 2011-03-23 20:23:39

好像這是那種情景Alignment, Margins, and Padding都是由處理...

來源

2011-03-22 23:48:20

謝謝，但我可以做這種不規則的佈局與網格？ – 2011-03-22 23:52:52

我連接的例子實際上是使用面板。一個網格的孩子將被調整大小來填補他們的細胞 - 赦免監督！ :) – 2011-03-22 23:54:49

謝謝，但示例似乎使用StackPanel，你確定它會讓我控制不完全在彼此之上？基本上控制＃2和＃3。 – 2011-03-23 00:00:14

你需要他們DockPanels，或者這是一個固定的佈局？

如果它是固定的，你可以做這樣的事情：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="80"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
     <RowDefinition Height="50"></RowDefinition> 
     <RowDefinition Height="50"></RowDefinition> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="100"></ColumnDefinition> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
     <ColumnDefinition Width="200"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
<ListView Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="3" Name="dockPanel1" Background="CadetBlue"> 
    </ListView> 
    <ListView Grid.Row="2" Grid.RowSpan="2" Name="dockPanel2" Background="Cyan"> 
    </ListView> 
    <ListView Grid.Row="3" Grid.RowSpan="1" Grid.Column="2" Name="dockPanel3" Background="DarkRed"> 
    </ListView> 
    </Grid>

我做你的三塊板重新相當大的作爲調整窗口大小之間的區域。

而不是我使用的列表視圖，你可以把任何東西，用戶控件，另一個網格，任何東西。

顏色會告訴你listview部分容易在哪裏。

您可能會想要調整大小或更改調整行爲。

您可以瞭解更多關於格here

來源

2011-03-23 00:13:30 Liz

謝謝，我使用了碼頭板，因爲我試圖將控件固定在邊上，即頂部中央，左下和右下。我不想硬編碼控制。你的固定？因爲我沒有看到硬編碼的座標。 – 2011-03-23 00:16:32

是的，它是固定的。你不需要座標，因爲網格行爲應該爲你照顧。例如，左下角的控件的大小和位置由該特定網格矩形的行爲控制。所以在我的情況下，它是採取2底部行和1列。我對行和列的大小進行了硬編碼，因此控件始終爲50 + 50 x 100.但是，如果將行或列的大小設置爲「自動」，則網格將調整爲包含控件所需的大小。我想如果你玩這個，你會明白的。 – Liz 2011-03-23 16:06:15

如何在WPF（3個控件）中創建此佈局？

回答

相關問題