Creating a ControlTemplate for a DataGridRow in WPF
Solution 1
The actual template for the row is a bit more complicated than this. See the style below - it's pretty much the basic style but I've added some of your design and left triggers for IsMouseOver
and IsSelected
(feel free to remove them).
<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>
Oh, and btw, you have a key for the style but you don't reference it at any point - so the row uses it's default style. To use your style or the one provided above, don't give a key to the resource.
Solution 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>
and in xaml you can put the below code
<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>
Michael
Updated on July 21, 2022Comments
-
Michael almost 2 years
What I am trying to accomplish is customize the
DataGrid
control so that each row has rounded corners, no gridlines (just the design I'm working with).What I have been trying to do is create a
ControlTemplate
that modifies theDataGridRow
controls so that they have the expected appearance. So far, this is what I am working with:<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>
This version would obviously be rudimentary (simply a border around the stock template), but I cannot see any difference when I run the application.
The question, then, is how do I customize the control template for a DataGridRow? Or, if this is unworkable, is there a better way to go about accomplishing my aims:?
-
Michael over 11 yearsThanks for the template. Also, the
x:Key
attribute was the biggest problem. I'm so used to putting them in, it's a reflex reaction.