在WPF中爲DataGridRow創建一個ControlTemplate

Question

我想要完成的是自定義DataGrid控件，以便每行都有圓角，沒有網格線（只是我正在使用的設計）。

我一直在試圖做的是創建一個ControlTemplate，它修改DataGridRow控件，以使它們具有預期的外觀。到目前爲止，這是我與合作：

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