WPFでDataGridRowのControlTemplateを作成する

Question

私が達成しようとしているのは、各行が角を丸くし、グリッド線がないように（つまり、私が設計しているものだけ）DataGridコントロールをカスタマイズすることです。

私がしようとしているのは、DataGridRowのコントロールを変更して予期した外観になるようにControlTemplateを作成することです。これまでのところ、これは私が働いているものです：

<DataGrid Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" AutoGenerateColumns="False" ItemsSource="{Binding Path=MyData}"> 
     <DataGrid.Resources> 
      <Style x:Key="rowStyle" TargetType="{x:Type DataGridRow}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type DataGridRow}"> 
          <Border CornerRadius="8,8,8,8" BorderBrush="Red" BorderThickness="2"> 
           <ContentPresenter /> 
          </Border> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </DataGrid.Resources> 
     <DataGrid.Columns> 
      <DataGridTextColumn Header="Foo" /> 
      <DataGridTextColumn Header="Baz" /> 
      <DataGridTextColumn Header="Bar" /> 
     </DataGrid.Columns> 
    </DataGrid> 

このバージョンでは、明らかに（ストック・テンプレートの周りに単にボーダー）初歩的なことだろうが、私は、アプリケーションを実行すると、私は何の違いを見ることができません。

質問は、DataGridRowのコントロールテンプレートをカスタマイズする方法です。または、これがうまくいかない場合は、私の目的を達成するためのより良い方法がありますか？

Answer 1

行の実際のテンプレートはこれより少し複雑です。下のスタイルをご覧ください - それは基本的なスタイルですが、IsMouseOverとIsSelectedのデザインと左トリガーのいくつかを追加しました（自由に削除してください）。

<Style TargetType="{x:Type DataGridRow}"> 
    <Setter Property="Background" 
      Value="Transparent" /> 
    <Setter Property="BorderBrush" 
      Value="Red" /> 
    <Setter Property="BorderThickness" 
      Value="2" /> 
    <Setter Property="SnapsToDevicePixels" 
      Value="true" /> 
    <Setter Property="Validation.ErrorTemplate" 
      Value="{x:Null}" /> 
    <Setter Property="ValidationErrorTemplate"> 
     <Setter.Value> 
      <ControlTemplate> 
       <TextBlock Foreground="Red" 
          Margin="2,0,0,0" 
          Text="!" 
          VerticalAlignment="Center" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type DataGridRow}"> 
       <Border x:Name="DGR_Border" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Background="{TemplateBinding Background}" 
         SnapsToDevicePixels="True" 
         CornerRadius="8,8,8,8"> 
        <SelectiveScrollingGrid> 
         <SelectiveScrollingGrid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
         </SelectiveScrollingGrid.ColumnDefinitions> 
         <SelectiveScrollingGrid.RowDefinitions> 
          <RowDefinition Height="*" /> 
          <RowDefinition Height="Auto" /> 
         </SelectiveScrollingGrid.RowDefinitions> 
         <DataGridCellsPresenter Grid.Column="1" 
               ItemsPanel="{TemplateBinding ItemsPanel}" 
               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
         <DataGridDetailsPresenter Grid.Column="1" 
                Grid.Row="1" 
                SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" 
                Visibility="{TemplateBinding DetailsVisibility}" /> 
         <DataGridRowHeader Grid.RowSpan="2" 
              SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" 
              Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" /> 
        </SelectiveScrollingGrid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" 
          Value="True"> 
         <Setter TargetName="DGR_Border" 
           Property="Background" 
           Value="LightGray" /> 
        </Trigger> 
        <Trigger Property="IsSelected" 
          Value="True"> 
         <Setter TargetName="DGR_Border" 
           Property="Background" 
           Value="Gray" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

ああ、ところで、あなたはスタイルのための鍵を持っていますが、任意の時点でそれを参照しない - ので、行が、それはデフォルトのスタイルです使用しています。あなたのスタイルや上記のスタイルを使用するには、リソースにキーを与えないでください。

Answer 2

<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DatagridColumnHeaderStyle"> 
     <Setter Property="VerticalContentAlignment" Value="Center" /> 
     <Setter Property="Height" Value="35" /> 
     <Setter Property="SeparatorBrush" Value="DarkRed" /> 
     <Setter Property="FontWeight" Value="Black" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type DataGridColumnHeader}"> 
        <Grid> 
         <Border x:Name="columnHeaderBorder" 
           BorderThickness="1" 
           Padding="3,0,3,0"> 

          <ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
         </Border> 
        </Grid> 
       </ControlTemplate>  
      </Setter.Value> 
     </Setter> 
    </Style> 

とXAMLで、あなたは以下のコードにテンプレートの

<DataGrid x:Name="myGridView" 
      Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
      Height="200" Margin="5,15,5,0" 
      AutoGenerateColumns="False" 
      ItemsSource="{Binding Person}" 
      SelectedItem="{Binding Path=PersonDetails, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" > 

    <DataGrid.Columns> 

     <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}" Width="200" Header="Customer Name" Binding="{Binding Path=Name}"/> 
     <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}" Width="250" Header="Customer Address" Binding="{Binding Path=Address}"/> 
     <DataGridTextColumn HeaderStyle="{StaticResource DatagridColumnHeaderStyle}" Width="100" Header="Order Id" Binding="{Binding Path=OrderId}"/> 

    </DataGrid.Columns>