How to update listview item color and font dinamically?

Question

Hi everyone i would like to dynamically update my listview, i'll explain the situation i have a MainPage in which i have declared in my xaml:

<controls:DockPanel Width="100" Height="100">
  <Grid>
    <ListView x:Name="myList" Width="100" Margin="10,0,0,'" ItemsSource="{Binding Path=Item}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Margin" Value="0,0,0,0" />
                <Setter Property="Padding" Value="0,0,0,-6" />
                <Setter Property="MinHeight" Value="20" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
  </Grid>
</controls:DockPanel>

To which i have associated a View Model

namespace My_app.ViewModels
{
    public class MainPageViewModel : ViewModel
    {
       
      private ObservableCollection<string> _items;
      private string _sItems;

      public MainPageViewModel()
      {
          _items = new ObservableCollection<string>();
         
      }

      public ObservableCollection<string> Items
      {
          get { return _items; }
          set
          {
              _items = value;
              OnPropertyChanged("Items");
          }
      }
}

So i have component that is displayed on the main page, that has a button to which i add a list and i would like to dynamically change the colors and font of this listview

private ViewModels.MainPageViewModel _viewModels;

private void Button_Click(object sender, RoutedEventArgs e)
{
       List<string> myList = new List<string>(somevalue);
       foreach (var x in myList)
       {
           view_.Pins.Add(x);
       }
       //after i want dinamicaly change color and font of my items
}

What i would like to do then is to list the elements of the listview and change their color dynamically, for example:

for(int i=0; i<myList.Items.Count; i++)
{
  //getItem(i)
  //change item color
  //change item font
}

Answer 1

You could use ValueConverter and Data Binding to achieve what you want.

Here are the steps:

1. Create a ValueConverter for based on your requirement. You need to set the background color and the font color based on the value string. So you need to have a parameter to indicate if when to set the background color and the font color.
2. You need to create a data template for the ListView item so that the item could use Data Binding.

The code for the value converter:

 public class ColorConverter : IValueConverter 
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {

        SolidColorBrush brush = null;
        // Retrieve the parameter string and data string.
        string formatString = parameter as string;
        string data = value as string;
        // retrun different brush based on the parameter and data string
        if (formatString.Equals("foreground"))
        {
            switch (data) 
            {
                case "1":
                    brush = new SolidColorBrush(Colors.Red);
                    break;
                case "2":
                    brush = new SolidColorBrush(Colors.Green);
                    break;
            }
               
        }
        else if (formatString.Equals("background"))
        {
            switch (data)
            {
                case "1":
                    brush = new SolidColorBrush(Colors.AliceBlue);
                    break;
                case "2":
                    brush = new SolidColorBrush(Colors.Yellow);
                    break;
            }
        }
        return brush;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return null;
    }
}

The code in the Xaml:

   <ListView x:Name="myList" Width="100" Margin="10,0,0,0" ItemsSource="{Binding Path=Items}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Margin" Value="0,0,0,0" />
                <Setter Property="Padding" Value="0,0,0,-6" />
                <Setter Property="MinHeight" Value="20" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate >
                <Grid Width="200" Height="50" Background="{Binding Mode=TwoWay, Converter={StaticResource ColorConverter},ConverterParameter=background}">
                    <TextBlock Text="{Binding Mode=TwoWay}" Foreground="{Binding Mode=TwoWay,Converter={StaticResource ColorConverter},ConverterParameter=foreground}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

How it looks like:

This is a simple implementation for this. You could change the data template and the logic of the ValeConverter based on your own scenario.