wpf - 非正方形布局

Question

我正在尝试在 wpf 中进行某种布局，最好的解释方式是向您展示:

这是现在的样子:

它应该是这样的:

有没有人知道如何在 wpf 中完成这个？边框需要与图片中的完全一样。

谢谢。

Answer 1

如果这些是网格，您可以使用两个 Border 将其 Width 设置为 CornerRadius 并将其高度绑定(bind)到 来伪造 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>

此处的颜色仅作为叠加层的示例。