Highlight entire rows only in Silverlight DataGrid

Question

When the user clicks on a row in the datagrid (or uses the keyboard), that row is selected, but the specific cell they clicked on is also given its own special focus. This is fine for a data editing grid, but I am trying to create something more like an open dialog that shows properties for each item in the list, so...

Is it possible to configure a (readonly) DataGrid so that the user can only select or focus on entire rows, not individual fields.

If that is not possible, is there a elegant way of making only the first element selectable - for example in the standard Windows Open dialog, if you change to Details view there are several columns for each row (Filename, Created Date, Size, etc), but you can only highlight items in the filename column.

Answer 1

you can change the style of the DataGridCell Here is a post that will help http://leeontech.wordpress.com/2009/06/29/hilighting-entire-rows-in-datagrid/

Answer 2

Here is my (lame) version that adds a black background on the selected row and grey background on the current row. I had to overwrite the styles because I was painting the cells individually and the row selected was hidden.

Just add the pasted code to you DataGrid instance:

        <local:DataGrid.RowStyle>
            <Style TargetType="local:DataGridRow">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:DataGridRow">
                            <localprimitives:DataGridFrozenGrid Name="Root">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualStateGroup.Transitions>
                                            <vsm:VisualTransition GeneratedDuration="0" />
                                        </vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="Normal AlternatingRow">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Normal Selected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="MouseOver Selected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unfocused Selected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                    <SplineColorKeyFrame KeyTime="0" Value="Black"/>
                                                </ColorAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Grid.Resources>
                                    <Storyboard x:Key="DetailsVisibleTransition">
                                        <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
                                    </Storyboard>
                                </Grid.Resources>

                                <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9"/>
                                <Rectangle x:Name="BackgroundRectangleSelected" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="Black"/>

                                <localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                                <localprimitives:DataGridCellsPresenter Margin="2" Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                                <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
                                <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
                            </localprimitives:DataGridFrozenGrid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:DataGrid.RowStyle>

Answer 3

You could create an style in like these samples to highlight and align I have:

    <!-- Right Aligned Cell -->
    <Style x:Key="RightAlignedCell" TargetType="{x:Type dg:DataGridCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type dg:DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="dg:DataGridCell.IsSelected" Value="True">
                <Setter Property="Background" Value="#356815" />
                <Setter Property="Foreground" Value="#e2fce2" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- Center Aligned Cell -->
    <Style x:Key="CenterAlignedCell" TargetType="{x:Type dg:DataGridCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type dg:DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="dg:DataGridCell.IsSelected" Value="True">
                <Setter Property="Background" Value="#356815" />
                <Setter Property="Foreground" Value="#e2fce2" />
            </Trigger>
        </Style.Triggers>
    </Style>

later you put:

<dg:DataGrid x:Name="dg" AutoGenerateColumns="False" 
            xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" ItemsSource="{Binding}" 
            SelectionMode="Single" ...>
    <dg:DataGridTextColumn Header="Total Amount" Width="110" CellStyle="{StaticResource RightAlignedCell}"
                                   Binding="{Binding Total,StringFormat={}\{0:N0\}}" IsReadOnly="True"/>
    <dg:DataGridTextColumn Header="Enter Date" Width="110" CellStyle="{StaticResource CenterAlignedCell}"
                                   Binding="{Binding EnterDate,StringFormat={}\{0:dd/MM/yyyy\}}" IsReadOnly="True"/>

....

I hope this works for anyone who's wandering how to highlight a full row in WPF DataGrid.