[WPF] Highlight ListView items

I’m playing with WPF for some days now. Trying to develop a little program, I ask myself how I can highlight some items in the listview I use, for example, showing to the project manager all the tasks that are finished or are late.

So, I imagine a simple tasklist. A task has a name and a percentage. Here is ma Task class :

public class Task
    {
        public string Name;
        public int Percentage;

        public static List<Tache> Get()
        {
            var tasklist = new List<Task>
                            {
                                new Task {Name = "Task 1", Percentage = 75},
                                new Task {Name = "Task 2", Percentage = 25},
                                new Task {Name = "Task 3", Percentage = 45},
                                new Task {Name = "Task 4", Percentage = 55}
                            };
            return tasklist;
        }
    }

Because this is just an example, my Get method is in my model.

First, we bind our ListView. In the MainWindow.cs, we will add this :

listView.DataContext = Task.Get();

Pretty simple.

Next, we modify the XAML file to manage our data display :

<ListView Name="listView" ItemsSource="{Binding}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Task" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Percentage" DisplayMemberBinding="{Binding Percentage}" />
                </GridView>
            </ListView.View>
        </ListView>

We have define two columns, one displaying the name of the task and the other one, the percentage realized.

And now, we are going to highlight our date. If a task has a percentage less than 50, it would be shown in red.
We use a Converter to make a link between the percentage and the color to use. Let’s create a class PercentToColorConverter inheriting from IValueConverter.

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var percent = (int)System.Convert.ChangeType(value, typeof(int));

            if (percent < 50)
                return 0;

            return 1;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

To resume, if percentage less than 50, the converter return 0, else it returns 1.

We also create a style that will apply the converter to the task. At the same time, we modify the itemstyle to highlight it when the mouse is over and we modify the style of the selected element.

<pre class="brush:csharp"><Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
        <Style.Resources>
            <local:PercentToColorConverter x:Key="PercentToColor" />
        </Style.Resources>

        <Style.Triggers>
            <!-- Color of the item depending on percentage value. -->
            <DataTrigger Binding="{Binding Percentage, Converter={StaticResource PercentToColor}}" Value="1" >
                <Setter Property="Foreground" Value="Black" />
            </DataTrigger>

            <DataTrigger Binding="{Binding Percentage, Converter={StaticResource PercentToColor}}" Value="0" >
                <Setter Property="Foreground" Value="Red" />
            </DataTrigger>

            <!-- Style for the selecting item -->
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="Orange"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
            <!-- Style for the item when the mouse is over -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Orange" />
                <Setter Property="BorderBrush" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>

And the end, we bind this style to our ListView :

<ListView Name="listView" ItemContainerStyle="{StaticResource ListViewItemStyle}" ItemsSource="{Binding}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Tache" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Avancement" DisplayMemberBinding="{Binding Percentage}" />
                </GridView>
            </ListView.View>
        </ListView>

We just have to launch our application and watch the result :