非方形布局

Question

我试图在wpf中制作一个特定的布局，最好的解释方法是告诉你：

这就是现在的样子：

看起来应该是这样的：

有没有人知道如何在wpf中实现这一目标？边框需要与图像完全相同。

感谢。

Answer 1

如果这些是网格，你可以将其宽度设置为Border并将其高度绑定到顶部CornerRadius的两个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）