wpf - 非正方形レイアウト

Question

私は wpf で特定のレイアウトを作成しようとしています。説明する最善の方法は、次のことを示すことです。

これは今のように見えます：

次のようになります。

wpfでこれを達成する方法を知っている人はいますか? 境界線は画像とまったく同じである必要があります。

ありがとう。

Answer 1

これらがグリッドの場合Border、幅を に設定し、高さを右上のパネルの にCornerRadiusバインドする2 つの を使用して、99.9% 偽装できます。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

これを行う1つの方法は次のとおりです。

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

必要に応じて列/行の比率をいじることができます (または固定値を使用します)。

（そしてもちろん、sの代わりにあなたが望むものを使用してください<Control />）