如何在WPF中獲得此窗口布局？

Question

我嘗試創建一個窗口布局如下：

Layout http://www.x-toolz.com/downloads/layout.jpg

正如你可以看到窗口有3個行（15 *，70 *，15 *）和3列（相同的）。

我該如何重新設計一個矩形來適應角的幾何形狀？ 如果不能用矩形完成，我需要另一個可以放置內容（Grid，StackPanel）的控件。

任何想法？

在此先感謝！

MemphiZ

Answer 1

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="15*" /> 
     <RowDefinition Height="15*" /> 
     <RowDefinition Height="40*" /> 
     <RowDefinition Height="15*" /> 
     <RowDefinition Height="15*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="15*" /> 
     <ColumnDefinition Width="15*" /> 
     <ColumnDefinition Width="40*" /> 
     <ColumnDefinition Width="15*" /> 
     <ColumnDefinition Width="15*" /> 
    </Grid.ColumnDefinitions> 
    <Grid Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Blue"> 
     <!-- Top Left Content Goes Here --> 
    </Grid> 
    <Grid Grid.Column="2" Grid.Row="0" Background="Aqua"> 
     <!-- Top Middle Content Goes Here--> 
    </Grid> 
    <Grid Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Gold"> 
     <!-- Top Right Content Goes Here --> 
    </Grid> 
    <Grid Grid.Column="0" Grid.Row="2" Background="Magenta"> 
     <!-- Middle LEft Content goes here --> 
    </Grid> 
    <Grid Grid.Column="4" Grid.Row="2" Background="Lime"> 
     <!-- Middle Right Content goes here --> 
    </Grid> 
    <Grid Grid.Column="0" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Red"> 
     <!-- Bottom Left Content Goes Here --> 
    </Grid> 
    <Grid Grid.Column="2" Grid.Row="4" Background="DarkGoldenrod"> 
     <!-- Bottom Middle Content Goes Here--> 
    </Grid> 
    <Grid Grid.Column="3" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Silver"> 
     <!-- Bottom Right Content Goes Here --> 
    </Grid> 
    <!-- This is used to shape the center" --> 
    <Polygon x:Name="main" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="White" Points="0,15 15,0 55,0 70,15 70,55 55,70 15,70 0,55" Stretch="Fill" StrokeThickness="0"/> 

    <Grid Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Background="Pink" > 
     <Grid.OpacityMask> 
      <VisualBrush Visual="{Binding ElementName=main}" /> 
     </Grid.OpacityMask> 
     <!-- Centre Content Goes Here--> 
    </Grid> 

    </Grid> 


</Grid> 
</Window> 

這產生了這種佈局。限制是WPF將邊界限制爲矩形，因此任何溢出區域的內容都將不可見（即Clipped）。

您可以通過對每個網格元素應用填充來部分解決此問題，以創建適合每個區域內部的矩形區域。

Answer 2

你可以用9格的網格做到這一點。創建8個用戶控件來保存你的外部內容。如果你想要它的大小可調，你將不得不工作一點魔力。

每個角落的用戶控件都會有一個2x2的網格，對於左上方的面板我會舉一個小例子。

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" 
    mc:Ignorable="d" 
    x:Class="TopLeft" 
    x:Name="UserControl" 
    d:DesignWidth="480" d:DesignHeight="480"> 

    <Grid x:Name="LayoutRoot"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="0.5*"/> 
      <RowDefinition Height="0.5*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.5*"/> 
      <ColumnDefinition Width="0.5*"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle Stroke="Black" Grid.RowSpan="2" Fill="Black"/> 
     <Rectangle Fill="Black" Stroke="Black" Grid.ColumnSpan="2"/> 
     <Path Grid.Column="1" Data="M0.5,0.5 L239.5,0.5 120,120 0.5,239.5 z" Fill="Black" Grid.Row="1" Stretch="Fill" Stroke="Black" /> 
    </Grid> 
</UserControl> 

在上面的示例中，一個2 x 2網格，右下角有一條對角線路徑。如果你的主窗口要調整大小，你將不得不決定你的邊界區域是否會相應地調整大小，或者是圍繞窗口主體的靜態框架。

這裏是窗口：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:MegaPanel" 
    x:Class="MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="0.3*"/> 
      <RowDefinition Height="0.3*"/> 
      <RowDefinition Height="0.3*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.3*"/> 
      <ColumnDefinition Width="0.3*"/> 
      <ColumnDefinition Width="0.3*"/> 
     </Grid.ColumnDefinitions> 
     <local:TopLeft Margin="0"/> 
    </Grid> 
</Window> 

我沒有把內容呈現在用戶控件，但你把在那裏的內容添加到它。

窗戶的身體區域必須小心處理。您可以將邊距設置爲負值以允許身體的內容溢出到邊框區域。

編輯

實施例：

<local:TopLeft Margin="0"> 
    <local:TopLeft.Tag> 
     <ListBox/> 
    </local:TopLeft.Tag> 
</local:TopLeft> 

上述變化到左上分配列表框的左上的usercontrol的Tag屬性。在用戶控件中，我將ContentPresenter綁定到UserControl的標籤屬性。 ListBox被分配給標籤，ContentPresenter從標籤獲取ListBox。您可以在UserControl代碼隱藏中重新定義自定義屬性，如果您想在幾個區域中使用它們。

<ContentPresenter Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,125,125" Content="{Binding Tag, ElementName=UserControl}"/> 

用於註冊自定義DependencyProperties檢查this post out。