如何将形状设置为网格单元格的背景

Question

我有一个 2 行 12 列的网格。 我需要合并一种样式，在每个单元格中绘制一个三角形 总共 24 个单元格，

例如三角形的几何形状：

    M 0, 0 L 25, 250 L 50, 0 z 

我如何为网格中的每个单元格的背景中的形状设计和使用样式？

行高约为 250 并且 列宽约为 50

或者，每个单元格包含一个堆栈面板
所以一个不同的解决方案是将其绘制为堆栈面板的背景，我怎样才能将形状绘制为堆栈面板的背景？

Answer 1

您所需要做的就是根据您的要求创建一个样式模板并将其应用到 DataGrid。因此，基本上您要做的就是将形状添加到 DefaultDataGridCellStyle 的模板中。我知道有几种方法可以做到这一点，但使用 Expression Blend 会容易得多。只需右键单击 Blend 中的数据网格，选择“编辑其他模板”->找到GridCell模板并“编辑副本”，几分钟即可完成。希望这有帮助！

使用三角形的路径数据和根据您的规格设置的高度/宽度的示例。

样式模板（基于默认的网格单元模板）；

    <Style x:Key="NewDataGridCellStyle" TargetType="{x:Type DataGridCell}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Height="250" Width="50">
                <Path Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" HorizontalAlignment="Stretch" Height="Auto" Stretch="Fill" Stroke="#FF2B9F02" Width="Auto"/>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static DataGrid.FocusBorderBrushKey}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

参考文献；

<DataGridCell Content="DataGridCell" Style="{DynamicResource NewDataGridCellStyle}"/>

或者，如果您的字面意思只是默认常规网格的一个单元格；

    <Grid Width="150" Height="500">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="250"/>
            <RowDefinition Height="250"/>
            <RowDefinition Height="250"/>
        </Grid.RowDefinitions>
            <Path Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
            <Path Grid.Row="1" Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
            <Path Grid.Column="1" Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
            <Path Grid.Column="2" Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
            <Path Grid.Row="1" Grid.Column="1" Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
            <Path Grid.Row="1" Grid.Column="2" Data=" M 0, 0 L 25, 250 L 50, 0 z" Fill="#FF39D203" Stroke="#FF2B9F02" />
    </Grid>