グリッドセルの背景として形状を設定する方法

Question

iv'eに2行12列のグリッドがあります。

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

どのように私はスタイルを設計して使用することができます：私は24個のセル

例えば、三角形のジオメトリの各セル 合計のための三角形を描画しますスタイルを組み込むために必要 グリッドの各セルの背景にこの図形がありますか？

行の高さは約250と 列幅は約50

あるいは、各セルはのStackPanel
が含まれているされているので、異なる解決策は、のStackPanelの背景として描画することであろうスタックパネルの背景としてどのようにシェイプを描くことができますか？

Answer 1

要件のスタイルテンプレートを作成し、それをDataGridに適用するだけです。基本的には、DefaultDataGridCellStyleのテンプレートに図形を追加するだけです。これを行うには、いくつかの方法がありますが、Expression Blendでは非常に簡単です。 Blendであなたのデータグリッドを右クリックし、 "Edit Additional Templates" - >「GridCell」テンプレートを探し、「Edit A Copy」を選択するだけで、分を完了できます。お役に立てれば！

例では、三角形のパスデータと高さ/幅が仕様に設定されています。

スタイルテンプレート（デフォルトのグリッドセルテンプレートに基づく）。

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

ref;

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