How to change row selection stlye in RadDataGrid for UWP?

[Mike]

Hi there,

I have a control in one of my UWP pages that is like a tree view for document viewing (some documents are tagged and are in folders and others are not).

This uses RadDataGrid with DataTemplates for when either a folder is selected or an actual document is selected.

It all works fine but when a row is selected I get an ugly grey background and blue border but I actually want no selection style whatsoever - no highlight, no border, no background so can you please let me know how to do this?  I have not included the code behind because it's not a selection or code issue  - it's just a styling issue.

Thanks,

Mike

    <Page.Resources>

....other code...

        <!-- Header item (folder) - this will show an appropriate open/closed folder icon and the folder name (the Tag property) -->

        <DataTemplate x:Key="HeaderItemTemplate"  x:DataType="models:BoardMiscItem">

            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Image Grid.Column="0" Source="{Binding FolderImage}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                <TextBlock Grid.Column="1" Text="{Binding Tag}" Margin="10" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            </Grid>

        </DataTemplate>

<!-- Document item - this will show an status circle, the document name and last updated date -->
        <DataTemplate x:Key="HeaderItemTemplate"  x:DataType="models:BoardMiscItem">
        <DataTemplate x:Key="DocumentItemTemplate"
                      x:DataType="models:BoardMiscItem">

            <Grid HorizontalAlignment="Stretch">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="120"/>
                </Grid.ColumnDefinitions>

                <Border Grid.Column="0" CornerRadius="45" Height="15" Width="15" Margin="{Binding IndentAmount}"
                    HorizontalAlignment="Left" VerticalAlignment="Center">
                    <Border.Background>
                        <SolidColorBrush Color="{Binding StateColour}"/>
                    </Border.Background>
                </Border>
                
                <TextBlock Grid.Column="1" Text="{Binding DisplayName}" Margin="10" TextWrapping="WrapWholeWords"
                           HorizontalAlignment="Left" VerticalAlignment="Center"/>
                
                <TextBlock Grid.Column="2" Text="{Binding LastUpdatedDisplay}" Margin="0,10,0,10"
                           HorizontalAlignment="Left" VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>

        <components:BoardMiscItemTemplateSelector x:Key="ItemTemplateSelector"
                                                  HeaderItemTemplate="{StaticResource HeaderItemTemplate}"
                                                  DocumentItemTemplate="{StaticResource DocumentItemTemplate}" />

        <Style x:Key="RadGridHiddenColumnHeader" TargetType="primitives:DataGridColumnHeader">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Style>

    </Page.Resources>

<Grid>

<!--    other XAML content,  not included -->

                        <!-- Hand rolled Folder and document tree view control -->
                        <Grid Grid.Column="1">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <!-- other XAML content here for Rows 0 and 1 -->
   
                            <grid:RadDataGrid x:Name="grdFilesList"
                                              Grid.Row="2"
                                              Grid.ColumnSpan="2"                                                                                       
                                              ItemsSource="{Binding DisplayData}"
                                              SelectionMode="Single"
                                              AutoGenerateColumns="False"
                                              UserGroupMode="Disabled"
                                              UserFilterMode="Disabled"
                                              UserColumnReorderMode="None"                          
                                              GridLinesVisibility="None"
                                              BorderThickness="1"
                                              Visibility="Visible"                          
                                              SelectionChanged="grdFilesList_OnSelectionChanged">

                                <grid:RadDataGrid.Columns>

                                    <grid:DataGridTemplateColumn HeaderStyle="{StaticResource RadGridHiddenColumnHeader}"
                                                                 CellContentTemplateSelector="{StaticResource ItemTemplateSelector}"/>

                                </grid:RadDataGrid.Columns>
                </grid:RadDataGrid>

  </Grid>

 

[Yana]

Hi Mike,

You'd just need to create an implicit style with TargetType set to "gridPrimitives:SelectionRegionBorderControl" and apply the same background and border color as the other rows. Here is a quick example:

<grid:RadDataGrid.Resources>
    <Style TargetType="gridPrimitives:SelectionRegionBorderControl">
        <Setter Property="BorderBrush" Value="#CCCCCC"/>
        <Setter Property="Background" Value="White" />
    </Style>
</grid:RadDataGrid.Resources>

where gridPrimitives namespace is:

xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"

For more details on the available implicit styles go to DataGrid: Implicit Styling topic from our documentation.

Regards,
Yana
Progress Telerik

[Mike]

Thanks Yana, that did the trick . I'm pretty new to the Telerik controls so didn't know all that sort of stuff was in the Primitives namespace.