Selected row with border

The data grid shows the current selected row with a gray background. This does not work well visually when the grid uses different background colors for different rows (like the image). How can I change the way the current row is indicated from the current gray background, to a white border around the row?

(see image)

Hello Nestor

To change the selection state, you can take the Alloy data-grid-row style and modify it however you like. As there is no property on the DataGrid to set the style, you can add the style to the Resources of the DataGrid (or window etc) and don't set the Key, just set the TargetType. Below is an example of how to do this which includes a modification to get you the white border selection. In the ControlTemplate is an element called "Border" which is used for the mouse-over and selected visuals. The very last control template trigger sets the borderthickness and borderbrush of that border. You can modify this code further if there are any other changes you want to make.

<ms:DataGrid ItemsSource="{Binding Data}">
  <ms:DataGrid.Resources>
    <Style TargetType="ms:DataGridRow">
      <Setter Property="FocusVisualStyle" Value="{x:Null}" />
      <Setter Property="Background" Value="White" />
      <Setter Property="BorderThickness" Value="0,0,0,1" />
      <Setter Property="BorderBrush" Value="{StaticResource Border}" />
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
      <Setter Property="SnapsToDevicePixels" Value="True" />
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <ms:DataGridRowPanel />
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ms:DataGridRow">
            <Grid SnapsToDevicePixels="True" Background="{TemplateBinding Background}">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Grid.ColumnSpan="3" />
              <!-- Row header: -->
              <Border BorderThickness="0,0,1,0" BorderBrush="{StaticResource Border}" Margin="0,0,0,1" Background="{StaticResource DataGridRowHeaderBackground}"
                Width="{Binding RowHeaderWidth, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}" Name="RowHeader"
                Visibility="{Binding ShowRowHeaders, Converter={StaticResource bvc}, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}">
                <ContentPresenter ContentTemplate="{Binding RowHeaderTemplate, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}" />
              </Border>
              <!-- Grouping indent: -->
              <Border Background="{StaticResource GroupIndentBackground}" Grid.Column="1"
                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,0">
                <Border.Width>
                  <MultiBinding Converter="{StaticResource DataGridIndentConverter}">
                    <Binding Path="Level" RelativeSource="{RelativeSource TemplatedParent}" />
                    <Binding Path="GroupingIndent" RelativeSource="{RelativeSource AncestorType={x:Type ms:DataGrid}}" />
                  </MultiBinding>
                </Border.Width>
              </Border>
              <!-- Cells: -->
              <Border Name="Border" Background="Transparent" Grid.Column="2" />
              <ItemsPresenter Grid.Column="2" />
              <StackPanel Orientation="Horizontal" Grid.Column="2"
                    Visibility="{Binding IsFrozenLineVisible, Converter={StaticResource bvc}, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}">
                <Border Width="{Binding FrozenEdge, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}" />
                <Border Width="4" Background="{StaticResource FrozenShadow}" />
              </StackPanel>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
              </Trigger>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource MouseOverDataGridBackground}" />
              </Trigger>
              <DataTrigger Binding="{Binding SelectionType, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}" Value="RowAndCell">
                <Setter TargetName="Border" Property="Background" Value="Transparent" />
              </DataTrigger>
              <Trigger SourceName="RowHeader" Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource MouseOverDataGridBackground}" />
              </Trigger>
              <DataTrigger Binding="{Binding SelectionType, RelativeSource={RelativeSource AncestorType={x:Type ms:DataGrid}}}" Value="Cell">
                <Setter TargetName="Border" Property="Background" Value="Transparent" />
              </DataTrigger>
              <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Border" Property="BorderBrush" Value="White" />
                <Setter TargetName="Border" Property="BorderThickness" Value="2" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:DataGrid.Resources>
</ms:DataGrid>

Jason Fauchelle

Perfect! One more question: how can I disable the black border around the current cell inside the selected row? I suspect it might be in DataGridRowPanel, but I could not find that in the Theme files...

Hello Nestor

This is actually controlled in the DataGridCellContainer styles. You'll find the code you need for this from line 510 to 644 in Alloy.DataGrid.xaml. There is a bit more code you need to copy here because it is split into 3 parts: The ExpandableCellTemplate which includes the hierarchical toggle button, the DetailedDataGridCellTemplate which is the normal cell template, and the Style which starts off with a very light-weight cell template. The style includes triggers for mouse over and selected etc which switches to one of the more complex template.

You will need to modify both ExpandableCellTemplate and DetailedDataGridCellTemplate. These both contain an element called "Border" which is used for the black highlight. This is activated using the Triggers that listen to the IsHighlighted property. You could either remove these triggers in the 2 templates, or adjust it to create a different highlighted effect.

Jason Fauchelle

I'll try it out. Thanks

It works like a charm. Nothing like a well architected control!

One final question: see attached images.

Never mind... I solved it. Thanks.