How to outline the selected row with transparent selection color in WPF DataGrid?

Question

Something that looks like this:

I don't want to change the background or foreground color on selection, only outline the selected row.

Is this possible in WPF? I only see Winforms on SO.

Ok so I added it to my existing resources, so now my XAML code's resources is like this:

  <Window.Resources>
        <local:NullImageConverter x:Key="nullImageConverter"/>

        <Style x:Key="DataGridColumnSeparatorStyle" TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="#1e90ff"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DataGridColumnAlarmStyle" TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="#000000"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="RowStyleWithAlternation" TargetType="DataGridRow">
            <Setter Property="Background" Value="#141414"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="#1e1e1e"/>
                </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                    <Setter Property="BorderBrush" Value="#1e90ff" />
                        <Setter Property="BorderThickness" Value="1" />
                    </Trigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="DataGridCell">
            <Setter Property="TextBlock.TextAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Stretch"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Style.Triggers>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.Header, RelativeSource={RelativeSource Self}}" Value=" "/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=Balance.ProfitPercentageColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.Header, RelativeSource={RelativeSource Self}}" Value="Symbol"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=Balance.ProfitPercentageColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="11"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=Balance.ProfitPercentageColor}" />
                        <Setter Property="DataGridCell.Foreground" Value="{Binding Path=Balance.ProfitColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="12"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=Balance.ProfitPercentageColor}" />
                        <Setter Property="DataGridCell.Foreground" Value="{Binding Path=Balance.ProfitColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="13"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=PriceChangeDailyBackColor}" />
                        <Setter Property="DataGridCell.Foreground" Value="{Binding Path=PriceChangeDailyForeColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource Self}}" Value="14"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=PriceChangeHourlyBackColor}" />
                        <Setter Property="DataGridCell.Foreground" Value="{Binding Path=PriceChangeHourlyForeColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.Header, RelativeSource={RelativeSource Self}}" Value="Min %"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Foreground" Value="{Binding Path=PriceChangeMinutelyForeColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Column.Header, RelativeSource={RelativeSource Self}}" Value="Net BTC/m"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="DataGridCell.Background" Value="{Binding Path=LastMinuteVolumeColor}" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{x:Null}"/>
                    <Setter Property="BorderBrush" Value="{x:Null}"/>
                </Trigger>

            </Style.Triggers>
        </Style>

        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>

        <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Border BorderThickness="1" Background="#006400" CornerRadius="0" Padding="0">
                            <Grid x:Name="PART_Track">
                                <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#640000" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <CollectionViewSource Source="{Binding Coins}" IsLiveSortingRequested="True" x:Key="MyKey" />

    </Window.Resources>

Final result looks like this:

So it still uses the background color as set by the alternating colors, and the separator style columns still show up, not sure if there is a way to fix those.

Answer 1

You have modify DataGridRow style. Add trigger when IsSelected is true and set BorderBrush and BorderThickness .

<Style TargetType="{x:Type DataGridRow}">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="1" />
        </Trigger>
    </Style.Triggers>
</Style>

Then modify DataGridCell style. Add trigger when IsSelected is true and set Background and BorderBrush to Null . Also set Foreground color otherwise Foreground will be changed when you select a row.

    <Style TargetType="{x:Type DataGridCell}">
        <Setter Property="Foreground" Value="Black"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="BorderBrush" Value="{x:Null}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 2

You can write a style for DataGridRow. something like this. you can add this style to App.xaml or resource in the window on anywhere you want.

<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="Red" />
             <Setter Property="BorderThickness" Value="2" />
        </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>