UWP C# - listview change "item" background color depending of value (not the entire row)

Question

The following code run when loading rows to listview what happens only once. My ListView items only have 2 values - "x" and "n". I want the item("cell") with value "x" to have as background color Red. The following code has 2 issues for me: 1) I do not want to specify all columns/items (goodFH, Position, etc) to have the "cell" Red if value = "x" (would like as pseudocode "if current cell value = "x" then Red") 2) args.ItemContainer.Background change the entire row background and not the "cell" I wish!

private void listViewContentChange(ListViewBase sender, ContainerContentChangingEventArgs args)
    {

        if (((Binding.Car)args.Item).GoodFH == "x")
        {
            args.ItemContainer.Background = (SolidColorBrush)Application.Current.Resources["Red"];
        }
        else
        {
            if (((Binding.Car)args.Item).Position == "x")
            {
                args.ItemContainer.Background =(SolidColorBrush)Application.Current.Resources["red"];

            }
        }
    }


<DataTemplate x:DataType="data:Car">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
                        <TextBlock FontSize="18" Text="{x:Bind GoodFH}" HorizontalAlignment="Right" Height="20" Width="158"></TextBlock>
                        <TextBlock FontSize="18" Text="{x:Bind Position }" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>
                        <TextBlock FontSize="18" Text="{x:Bind PathFHfs}" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>
                        <TextBlock FontSize="18" Text="{x:Bind PathBHFlSp }" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>

Any Help? Hope the question is understandable!

Jayden Jayden · Accepted Answer · 2017-01-05T09:56:14

As far as I known, we can not change the Background of the cell by setting the ItemContainer.Background.

We should be able to set the TextBlock in the Grid that we can change the Background of the Grid.

Also we can use the bind to set the Background of the Grid. To bind the "GoodFH" to the Background, we should be able to use the IValueConverter.

For example:

The MyValueConverters.cs code:

public object Convert(object value, Type targetType, object parameter, string language)
{
    if (value.ToString() == "x")
    {
        return new SolidColorBrush(Colors.Red);
    }
    return new SolidColorBrush(Colors.Transparent);
}

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

The XAML code:

<Page.Resources>
    <local:MyValueConverters x:Key="MyConverter" />
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView  Name="MyListView" ItemsSource="{x:Bind Cars}" ContainerContentChanging="listViewContentChange">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Car">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
                        <Grid Background="{x:Bind GoodFH,Converter={StaticResource MyConverter}}">
                            <TextBlock  FontSize="18" Text="{x:Bind GoodFH}" HorizontalAlignment="Right" Height="20" Width="158"></TextBlock>
                        </Grid>
                        <Grid Background="{x:Bind Position,Converter={StaticResource MyConverter}}">
                            <TextBlock FontSize="18" Text="{x:Bind Position }" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>
                        </Grid>
                        <TextBlock FontSize="18" Text="{x:Bind PathFHfs}" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>
                        <TextBlock FontSize="18" Text="{x:Bind PathBHFlSp }" HorizontalAlignment="Right" Height="20" Width="78"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

UWP C# - listview change "item" background color depending of value (not the entire row)

1 Answers