CellStyleSelector and SelectedBackground color

[Amige]

I have a GridView and I am using a CellStyleSelector to set the background color of different cells depending on some conditions and it is working fine.

Now I would like to be able to select a row and change the background color of the whole row, right now it is only working on the cells that are not using the CellStyleSelector.

I have seen that I can change the color of the selected row, like this:

<Style TargetType="telerik:GridViewRow">
            <Setter Property="SelectedBackground" Value="LightGray"/>
            <Setter Property="MouseOverBackground" Value="DarkGray" />
</Style>

 

But how can also be changed on cells with CellStyleSelector?

[Dilyan Traykov]

Hello Amige,

When a CellStyleSelector is applied, the background of the cells set through the CellStyle property overrides the selection background color of the GridViewRow.

What I can suggest in that case is to add a DataTrigger in the CellStyle and bind it to the IsSelected property of the GridViewRow that the cell is in. In that trigger, you can set the background of the cell to the background of its parent row. That approach would look something like this:

<my:StadiumCapacityStyle x:Key="StadiumCapacityStyle">
            <my:StadiumCapacityStyle.BigStadiumStyle>
                <Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
                    <Setter Property="Background" Value="Red"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:GridViewRow}}" Value="True">
                            <Setter Property="Background" Value="{Binding Background}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </my:StadiumCapacityStyle.BigStadiumStyle>
            <my:StadiumCapacityStyle.SmallStadiumStyle>
                <Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
                    <Setter Property="Background" Value="Yellow" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:GridViewRow}}" Value="True">
                            <Setter Property="Background" Value="{Binding Background}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </my:StadiumCapacityStyle.SmallStadiumStyle>
        </my:StadiumCapacityStyle>

Please give this a try and let me know if this is what you had in mind.

Regards,
Dilyan Traykov
Progress Telerik

[Amige]

Hi Dilyan,

Thanks for your answer, due to my application, I need to add the DataTrigger programatically, but I think I have the idea, I will try something like this:

DataTrigger tg = new DataTrigger()
            {
                Binding = new Binding("IsSelected"),
                Value = true
            };

            tg.Setters.Add(new Setter()
            {
                Property = Control.BackgroundProperty,
                Value = ColorConverter.ConvertFromString("Gray")
            });

 

And add this to my Style.

[Dilyan Traykov]

Hi Amige,

The only thing missing from the style from what I see is the RelativeSource:

            DataTrigger tg = new DataTrigger()
            {
                Binding = new Binding("IsSelected") { RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(GridViewRow), 1) },
                Value = true,
            };

            tg.Setters.Add(new Setter()
            {
                Property = Control.BackgroundProperty,
                Value = ColorConverter.ConvertFromString("Gray")
            });

Please let me know whether you've managed to achieve the desired result.

Regards,
Dilyan Traykov
Progress Telerik