非正方形佈局

Question

我試圖在WPF一定的佈局，解釋最好的辦法就是向您展示：

這是它看起來像現在：

它應該是這樣的：

有沒有人對如何在WPF做到這一點的想法？邊界需要與圖像完全相同。

謝謝。

Answer 1

如果這些網格就可以捏造事實的方式99.9％有兩個Border S的有他們的寬度設置爲CornerRadius，把他們的高度頂端右面板的ActualHeight：

<Grid> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="3*" /> 
    <ColumnDefinition Width="2*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="*" /> 
    <RowDefinition Height="9*" /> 
    </Grid.RowDefinitions> 
    <Border Background="Red" Grid.RowSpan="2" CornerRadius="5" Margin="2"/> 
    <Border x:Name="TopRight" Background="Red" Grid.Column="1" 
      CornerRadius="5" Margin="2"/> 
    <Border Background="Yellow" Width="5" 
      Height="{Binding ActualHeight, ElementName=TopRight}" 
      HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,2,0,2"/> 
    <Border Background="Yellow" Width="5" HorizontalAlignment="Left" 
      Height="{Binding ActualHeight, ElementName=TopRight}" 
      VerticalAlignment="Top" Grid.Column="1" Margin="0,2,2,0"/> 
    <Border Background="Green" Grid.Column="1" Grid.Row="1" 
      CornerRadius="5" Margin="2"/> 
</Grid> 

在此的顏色是例如僅覆蓋的。

Answer 2

下面是做這件事：

<Grid> 

    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="3*" /> 
    <ColumnDefinition Width="2*" /> 
    </Grid.ColumnDefinitions> 

    <Grid.RowDefinitions> 
    <RowDefinition Height="*" /> 
    <RowDefinition Height="9*" /> 
    </Grid.RowDefinitions> 

    <Control x:Name="Panel1" Grid.ColumnSpan="2" Grid.RowSpan="2" /> 

    <Control x:Name="Panel2" Grid.Column="1" Grid.Row="1" /> 

</Grid> 

你可以玩弄的要求（或使用固定的值）的行/列比率。

（當然，用你想要的<Control />叫什麼來代替）