uwp: how to change background color of listview item based on its value?

Question

Edit: UWP App is not 100% the same like the WPF App.

I have a uwp App with a ListView. In the ListView i use a DataTemplate with the class of Tests. It displays the name of the Test and Points.

What i want to accomplish is that a Trigger !? checks if the Points are greater than i.e.: 50 and then change the background color of the ListViewItem to red.

            <ListView.ItemTemplate>
                <DataTemplate x:DataType="data:Tests">
                    <Grid>
                        <TextBlock Text="{x:Bind Name}"  />
                        <TextBlock Text="{x:Bind Points}"  />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

Possible duplicate of [Alternating Colors of rows in ListView in Windows Phone 8.1](http://stackoverflow.com/questions/27607886/alternating-colors-of-rows-in-listview-in-windows-phone-8-1) — TheLethalCoder, Feb 12 '16 at 09:35

score 9 · Answer 1 · answered Feb 19 '16 at 23:29

I was finding it hard to get my listview items to show alternative colours. Finally I managed to do this by assigning a method to the ListView event handler ContainerContentChanging.

The method assigned to this event gets called when each item gets populated in the listview. This provides a capability to change foreground, background, text, etc for the listview item

        private void listViewContentChange(ListViewBase sender, ContainerContentChangingEventArgs args) {
            //this method is called for each item while it gets loaded in the listview. Here we are changing background color and text color
            if (args.ItemIndex == 0) {
              //colour for header
              args.ItemContainer.Background = (SolidColorBrush) Application.Current.Resources["grey"];
            } else {
              if (args.ItemIndex % 2 == 0) {
                //lighter colour 
                args.ItemContainer.Background = (SolidColorBrush) Application.Current.Resources["lightblue"];
              } else {
                //Dark colour 
                args.ItemContainer.Background = (SolidColorBrush) Application.Current.Resources["blue"];
              }
            }

This was very helpful for me. Thanks a lot! – Niewidzialny Mar 18 '17 at 10:38 — Niewidzialny, Mar 18 '17 at 10:38

score 4 · Accepted Answer · answered Feb 12 '16 at 09:32

4

You can do this in several ways:

Use ItemContrainerStyleSelector: the sample which I found
Use DataTemplateSelector: the sample which I found
Use Converter: the sample which I found describes bool to visibility, but you can change it like you want.

answered Feb 12 '16 at 09:32

Andrii Krupka

4,276
3
20
41

2

I used the ItemContainerStyleSelector from the sample and updated the code for uwp apps. Info: in "MyStyleSelector" you have to override the "SelectStyleCore" and not as public but as protected! – Richi S. Feb 12 '16 at 20:01
Could you share your solution please? – Jose Afonso Feb 20 '22 at 20:18

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

You can use something similar to this: https://stackoverflow.com/a/27621234/3869250

In that example, the poster just checked if it was even or odd, to create alternating colors.

if (index % 2 == 0)
{
    ...
}

In your case, you could do something like:

if(item.Points > 50)
{
    return this.RedBackgroundStyle;
}

edited May 23 '17 at 12:17

Community

1
1

answered Feb 11 '16 at 23:05

Diogo Rolo

58
1
8

Zen Of Kursat · Answer 4 · 2017-12-07T14:40:25.003

0

have a look at that full code snippet answer about alternate colors.

edited Dec 07 '17 at 14:40

answered Dec 07 '17 at 12:31

Zen Of Kursat

2,672
1
31
47

uwp: how to change background color of listview item based on its value?

4 Answers4

Linked