C#•2y ago

✅ WPF Datagrid Select

Hi, i'm trying to change the style of each row depends of the datatype. Currently my code seems to work, i'm able to select the style for each row by using the selector. But here i have a problem in the style of my row :

 <Style x:Key="StepCommentRowStyle" TargetType="DataGridRow">
            <Setter Property="Background" Value="{StaticResource YellowGradientPrimaryColor}" />
            <Setter Property="Height" Value="25" />
>             <Setter Property="Template">
>                 <Setter.Value>
>                     <ControlTemplate TargetType="DataGridRow">
>                         <Grid Background="{TemplateBinding Background}">
>                             <Image
>                                 Width="20"
>                                 Height="20"
>                                 Source="{StaticResource ICON_COMMENT_20x20}" />
>                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
>                         </Grid>
>                     </ControlTemplate>
>                 </Setter.Value>
>             </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Blue" />
                </Trigger>
            </Style.Triggers>
        </Style>

 <Style x:Key="StepCommentRowStyle" TargetType="DataGridRow">
            <Setter Property="Background" Value="{StaticResource YellowGradientPrimaryColor}" />
            <Setter Property="Height" Value="25" />
>             <Setter Property="Template">
>                 <Setter.Value>
>                     <ControlTemplate TargetType="DataGridRow">
>                         <Grid Background="{TemplateBinding Background}">
>                             <Image
>                                 Width="20"
>                                 Height="20"
>                                 Source="{StaticResource ICON_COMMENT_20x20}" />
>                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
>                         </Grid>
>                     </ControlTemplate>
>                 </Setter.Value>
>             </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Blue" />
                </Trigger>
            </Style.Triggers>
        </Style>

if i remove the template part, the row can be selected when i click on it but when i add the template setter part it seems to remove the selectability of the row when i click on it. Have you any idea how to resolve this problem ? i supposed that i override the default template but i dont know how to keep the selectable part

4 Replies

HimmDawg•2y ago

Pretty sure your row is selected, but there's no visual indicator since you have overwritten the template. Have you checked the SelectedItem property? Also I am not sure, why you are using this template. From what I get here, you should use a <Grid> and put your <DataGrid> in there. Then add the image to the grid as well

ElioOP•2y ago

here is the datagrid i want to display :

ElioOP•2y ago

i'm almost sure nothing happen when i click cause if i select the row manually with SelectedIndex="3" in the datagrid i can notice the visual change on my datagrid

<DataGrid
            HorizontalContentAlignment="Center"
            d:ItemsSource="{d:SampleData ItemCount=5}"
            AutoGenerateColumns="False"
            BorderThickness="0"
            CanUserAddRows="False"
            CanUserReorderColumns="False"
            GridLinesVisibility="None"
            IsReadOnly="True"
            ItemContainerStyleSelector="{StaticResource RowStyleSelector}"
            ItemsSource="{Binding Steps, UpdateSourceTrigger=PropertyChanged}"
            SelectedIndex="3"
            SelectedItem="{Binding CurrentStep}"
            SelectionMode="Extended"
            SelectionUnit="FullRow">
            <DataGrid.Columns>
                <DataGridTemplateColumn
                    Width="*"
                    Header="Id"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="Step"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="AV"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="AR"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="ROT"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
            </DataGrid.Columns>
        </DataGrid>

<DataGrid
            HorizontalContentAlignment="Center"
            d:ItemsSource="{d:SampleData ItemCount=5}"
            AutoGenerateColumns="False"
            BorderThickness="0"
            CanUserAddRows="False"
            CanUserReorderColumns="False"
            GridLinesVisibility="None"
            IsReadOnly="True"
            ItemContainerStyleSelector="{StaticResource RowStyleSelector}"
            ItemsSource="{Binding Steps, UpdateSourceTrigger=PropertyChanged}"
            SelectedIndex="3"
            SelectedItem="{Binding CurrentStep}"
            SelectionMode="Extended"
            SelectionUnit="FullRow">
            <DataGrid.Columns>
                <DataGridTemplateColumn
                    Width="*"
                    Header="Id"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="Step"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="AV"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="AR"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
                <DataGridTemplateColumn
                    Width="*"
                    Header="ROT"
                    HeaderStyle="{StaticResource ColumnHeaderStyle}" />
            </DataGrid.Columns>
        </DataGrid>

i've put a breakpoint into my selected item and the setter is never reach execpt if i select the row manually with SelectedIndex i've found this to resolve my problem :

<Grid Background="{TemplateBinding Background}">
         <Image
               Width="20"
               Height="20"
               Source="{StaticResource ICON_COMMENT_20x20}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
>        <SelectiveScrollingGrid Background="Transparent">
>           <DataGridCellsPresenter Background="Transparent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />                         >        </SelectiveScrollingGrid>`
 </Grid>

<Grid Background="{TemplateBinding Background}">
         <Image
               Width="20"
               Height="20"
               Source="{StaticResource ICON_COMMENT_20x20}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
>        <SelectiveScrollingGrid Background="Transparent">
>           <DataGridCellsPresenter Background="Transparent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />                         >        </SelectiveScrollingGrid>`
 </Grid>

but when i click on the row this happen :

ElioOP•2y ago

Gaming

Programming

✅ WPF Datagrid Select