как установить форму в качестве фона для ячейки сетки - PullRequest
Новая
       14

как установить форму в качестве фона для ячейки сетки

1 голос
/ 14 февраля 2012

у меня есть сетка с 2 рядами и 12 столбцами.мне нужно включить стиль, который будет рисовать треугольник для каждой ячейки в общей сложности 24 ячейки

геометрия для треугольника для примера: 

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

как я могу разработать и использоватьстиль для этой фигуры на заднем плане для каждой ячейки таблицы?

высота строк равна приблизительно 250, а ширина столбца составляет приблизительно 50

enter image description here

или каждаяячейка содержит панель стека
, поэтому другое решение было бы нарисовать ее в качестве фона панели стека. Как можно нарисовать фигуру в качестве фона панели стека?

1 Ответ

1 голос
/ 14 февраля 2012

Все, что вам нужно сделать, это создать шаблон стиля для ваших требований и применить его к DataGrid. В общем, все, что вы делаете, это добавляете свою форму в шаблон для DefaultDataGridCellStyle. Я знаю несколько способов сделать это, но с Expression Blend это намного проще. Просто щелкните правой кнопкой мыши по вашей сетке данных в Blend, выберите «Редактировать дополнительные шаблоны» -> Найти шаблон GridCell и «Редактировать копию», вы можете сделать это за минуты. Надеюсь, это поможет!

Пример использования данных вашего пути для треугольника и высоты / ширины, установленных в ваших спецификациях.

Шаблон стиля (на основе шаблона 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 по умолчанию; 

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