wpf - 非方形布局

Question

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

这就是它现在的样子：

它应该是这样的：

有没有人知道如何在 wpf 中实现这一点？边框必须与图像中的完全相同。

谢谢。

Answer 1

如果这些是网格，您可以使用两个BorderWidth 设置为 theCornerRadius并将其高度绑定到ActualHeight右上角面板的 99.9% 的方式来伪造它：

<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 />s）