WPF DataGrid selected row style

Question

I\'m stuck with one very stupid problem - need to style selected row in WPF DataGrid.

I want to show a rectangle with blue border instead of just filling entire row

Answer 1

try this

<DataGrid.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>

                    <Style TargetType="{x:Type DataGridRow}">
                        <Setter Property="HeaderStyle">
                            <Setter.Value>
                                <Style TargetType="{x:Type DataGridRowHeader}">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                    <Setter Property="Width" Value="0"/>
                                </Style>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
                        <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" BorderThickness="1" CornerRadius="5" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                        <SelectiveScrollingGrid>
                                            <SelectiveScrollingGrid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </SelectiveScrollingGrid.ColumnDefinitions>
                                            <Grid Grid.Column="1">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="*"/>
                                                    <RowDefinition Height="Auto"/>
                                                </Grid.RowDefinitions>
                                                <DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                                <DataGridDetailsPresenter Margin="4" 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}"/>

                                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.RowSpan="2"/>
                                            </Grid>
                                            <DataGridRowHeader 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="IsSelected" Value="True">
                                            <Setter TargetName="DGR_Border" Property="BorderBrush" Value="Blue"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="DetailsVisibility" Value="Visible">
                                <Setter Property="BorderThickness" Value="4,1,4,4"/>
                                <Setter Property="BorderBrush" Value="#FF3886B9"/>
                            </Trigger>
                            <!--<Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" Value="Blue"/>
                            </Trigger>-->
                        </Style.Triggers>
                    </Style>

                </DataGrid.Resources>

Answer 2

Use CellStyle and RowStyle on DataGrid. DataGridCell and DataGridRow both have IsSelected property that can be used in a Trigger to find out if they are selected.

Something like following should do the trick:

<DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected"
                        Value="True">
                <Setter Property="Background"
                        Value="White" />
                <Setter Property="Foreground"
                        Value="Black" />
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.CellStyle>
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Style.Triggers>
            <Trigger Property="IsSelected"
                        Value="True">
                <Setter Property="BorderBrush"
                        Value="Blue" />
                <Setter Property="BorderThickness"
                        Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>

Just play around until you get it right.

Answer 3

I like this one:

<Style TargetType="{x:Type DataGridRow}">
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="Blue" />
        </Trigger>
    </Style.Triggers>
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
    </Style.Resources>
</Style>