WPF：如何根據百分比為矩形部分着色？

Question

我需要分割矩形並根據濃度對各個部分進行着色，我環顧四周並找到了一些解決方案，但我不明白哪一種是我需要的最佳選擇。 我在這里發布了一張顯示我需要的圖像。

請誰能指出我正確的方向？ 謝謝

Answer 1

如何使用網格布局？ 您可以使用百分比定義行，然后為每行定義邊框和背景色。 您可以在鏈接中閱讀有關網格的更多信息。 網格教程

您可以在此處找到更多詳細信息。 我認為在每個單元格內放置邊框的選項應該很合適。

Answer 2

例如，您可以使用Border元素填充Grid ：

<Grid>
    <Grid.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderThickness" Value="2 2 2 0" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="20*" />
        <RowDefinition Height="10*" />
        <RowDefinition Height="25*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
    <Border Background="Red" />
    <Border Background="Yellow" Grid.Row="1" />
    <Border Background="Green" Grid.Row="2" />
    <Border Background="Blue" Grid.Row="3" BorderThickness="2" />
</Grid>