Change SelectedItem Background Color

[Manuel]

What is the easiest way to do this?

I tried to get a template copy, but without success. May be overwriting the ThemeResource?

 

Thank you!

[Lance | Manager Technical Support]

Hi Manuel,

In order the alter the SelectedItem's style, you'll need to edit the style for the RadListViewItem. I've attached a demo and here's a summary of the steps to take .

1 - I retrieved the original RadListViewItem Style from the ResourceDictionary that it resides in. Unfortunately, using Visual Studio to extract it doesn't work, so you'll need to get it directly from the following location: 

C:\Program Files (x86)\Telerik\UI for Universal Windows Platform R3 2016\Binaries\Telerik.UI.Xaml.Controls.Data.UWP\Themes\Generic.xaml

2 - Copy the styles and other resources into your app

    2a  - Copy out the RadListViewItem Style from Generic.xaml (on line 586), paste it into your app's App.xaml and give it a Key.

<Style x:Name="MyListViewItemStyle" TargetType="listView:RadListViewItem">
...
<Style>

    2b  - You'll also need to copy the converters that the style uses, see lines 24-27 in the demo's App.xaml

    2c  - Lastly, define a SolidColorBrush StaticResource with the Key TelerikSelectedBrush and give it a color. See this on line 17 in the demo's App.xaml. This is used by the Style for the selected item's Border element and Checkbox brush.

3 - Now reference this style in your RadListView:

<data:RadListView ItemStyle="{StaticResource MyListViewItemStyle}">...

4 - Make custom changes

Now that you have the default style wired up in the app, you can make changes to the VisualState of the ListViewItem.

    4a - First, I added a new SolidColorBrush StaticResource and gave it a Key of  "MySelectedBackgroundBrush" and gave it value of Red.

    4b - Now, for the crucial part, we need to edit the Selected VisualStates so that we apply that background color only when the item is selected.  

Go to Line 76 in App.xaml to find the VisualStateGroup named SelectedState and it's two VisualStates; Selected and Unselected.

<VisualStateGroup x:Name="SelectedState">
    <VisualState x:Name="Selected">
 ...
    </VisualState>
    <VisualState x:Name="Unselected">
 ...
    </VisualState>
</VisualStateGroup>

You want to add an additional ObjectAnimationUsingKeyFrames so that it changes the container's background (the root container is named "grid"). I added the following...

<!-- Added to Selected, on line 89 -->

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MySelectedBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>

<!-- Added to Unselected, on line 108 -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid"  Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>

5 - Run the demo app and you'll see that when an item is Selected it will have a Red background and when Unselected will have a Transparent background (you'll even see this in the Designer after you do a build). Here's a screenshot.





Take a look at the attached demo, you'll be able to make as many changes as you see fit. For example, you don't have to use a StaticResource for the SelectedBackground brush, you can just explicitly set it in the Selected state. Or, if you want to change the colors of different parts of the template, you can use it's Name in the Storyboard for that VisualState.

Please let us know if you have any further questions.

Note: For future reference, if you are looking for other styles and templates, you can find them in the same folder where you found Generic.xaml.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Manuel]

Thanks a lot Lance!

This solved my problem with ListView. 

But I have another trouble with RadDataGrid Skin. I have been able to change the colors of almost all the controlsin DataGrid and DataGridFilteringFlyout, but there are two of them that I am unable to change:

CloseButton (InlineButton) in DataGridServicePanelGroupingFlyout and CaseButton (ToggleButton) in DataGridFilteringFlyout.

Anyway, if you thing I must open a post in DataGrid section, i'll do.

 

Thank you again!

[Lance | Manager Technical Support]

Hi Manuel,

I'm happy to hear you're all set with RadListView!

Yes, due to it being a different topic (which will require a different team to take a look at it), please open a separate thread for the DataGrid problem. Once I see your post, I'll forward it to the DataGrid team.


Side Note:
Please note that although we (Telerik Support Team) do our best to monitor the forums and answer as many as we can, we cannot guarantee an official response like we do for Support Tickets. If you'd like to submit a support ticket instead, you can do so here.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Manuel]

Thank you Lance.

First, I will try to override the flyout template.  If I can't do it, ill post this in DataGrid section.

 

Regards.

[Milenny]

It also worked for me ... it was one of the things I was looking for, and this Lance solution has worked very well for me .. Thank you!