Home/ Questions/Q 7522577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T02:33:45+00:00

iv’e got a grid with 2 rows and 12 columns . i need to

  • 0

iv’e got a grid with 2 rows and 12 columns .
i need to incorporate a style which will draw a triangle for in each cell
total of 24 cells

the geometry for the triangle for the example :

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

how could i design and use a style for with this shape in the background each cell in the Grid?

the rows height is approximately 250 and
column width is approximately 50

enter image description here

alternatively , each cell contains a stackpanel
so a different solution would be to draw it as the background of a stackpanel how could i draw the shape as the background of the stackpanel ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All you need to do is create a style template for your requirements and apply it to the DataGrid. So basically all you do is add your shape to the template for the DefaultDataGridCellStyle. There’s a couple ways of doing this I know of but it’s much easier with Expression Blend. Just right-click your datagrid in Blend, choose “Edit Additional Templates” -> Find the GridCell template and “Edit A Copy”, you can have it done minutes. Hope this helps!

    Example using your path data for the triangle and the height/width set to your specs.

    The style template (based off default gridcell template);

        <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>

    The ref;

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

    Or if you literally meant just a cell to a default regular Grid;

        <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>
    • 0