Change the color of TextBlock in Listview for a particular row - uwp

Question

I have a list view which binds data from a class.

        <ListView x:Name="ItemListView" ScrollViewer.VerticalScrollBarVisibility="Auto"  Width="Auto"  HorizontalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
                            <TextBlock  Text="{Binding Name}" TextAlignment="Left" FontSize="20"  Width="50"/>
                        </StackPanel>
                        <StackPanel >
                            <TextBlock x:Name="tb_age" Text="{Binding Age}" FontSize="20" TextAlignment="Center"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

private void LoadListView()
    {
        ItemDetails messageData = new ItemDetails();
        ItemListView.ItemsSource = messageData.Collection;
     }

public class ItemDetails

    {
        public ItemDetails()
        {

            MatchList item;

            item = new MatchList();
            item.Name = "A";
            item.Age = "10";
            Collection.Add(item);

            item = new MatchList();
            item.Name = "B";
            item.Age = "20";
            Collection.Add(item);

            item = new MatchList();
            item.Name = "A";
            item.Age = "30";
            Collection.Add(item);
       }
    }

Now I want to change the forcolor of TextBlock(tb_age) when it's value is equals to 10. How can I iterate through each of cell and get it's text to compare the values?

Answer 1

simply write a converter that converts the Age to a certain color.
https://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter(v=vs.110).aspx

<ListView x:Name="ItemListView" ScrollViewer.VerticalScrollBarVisibility="Auto"  Width="Auto"  HorizontalAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
                <TextBlock  Text="{Binding Name}" TextAlignment="Left" FontSize="20"  Width="50"/>
            </StackPanel>
            <StackPanel >
                <TextBlock x:Name="tb_age"
                Text="{Binding Age}"
                      ForeGround={Binding Age, Converter={StaticResource AgeToColorConvert}}
                        FontSize="20"
                        TextAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Conversion - very simplistic implementation:

    public override object Convert(
            object value,
            Type targetType,
            object parameter)
    {
        int iValue;
        if (int.TryParse(value.ToString(), out iValue))
        { if (iValue == 10) return Colors.Blue; }
        return Colors.Black;  
    }

Answer 2

You can install the Microsoft.Xaml.Behaviors.Uwp.Managed package from NuGet and then use DataTriggerBehavior to set the foreground.

First add namespace declaration to the <Page> element:

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"

Now you can use it like the following:

<StackPanel>
    <Interactivity:Interaction.Behaviors>
        <Core:DataTriggerBehavior Binding="{Binding Age}" Value="10">
            <Core:ChangePropertyAction TargetObject="{Binding ElementName=tb_age}" 
                       PropertyName="Foreground" Value="Red" />
        </Core:DataTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
    <TextBlock x:Name="tb_age" Text="{Binding Age}" FontSize="20" TextAlignment="Center" />
</StackPanel>

Note that you cannot use Style triggers as they are not available in UWP apps.

This solution has the advantage of being 100 % XAML based, so you don't have to modify C# code itself and presentation stays in the declarative XAML code.