UWP: Problem when trying to change the background color of a ListView item

Question

I have a uwp desktop application with a listview in which I need to change the background color of items whose given value is empty. I've already done everything indicated by the answer to the question below, but the color doesn't change. Any help is most welcome.

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

https://zamjad.wordpress.com/2010/01/01/applying-style-conditionally/

XAML

<Page.Resources>
    <Style x:Key="SpeechLineTimingSet" TargetType="ListViewItem">
        <Setter Property="Background" Value="Transparent" />
    </Style>

    <Style x:Key="SpeechLineTimingNotSet" TargetType="ListViewItem">
        <Setter Property="Background" Value="Red" />
    </Style>


    <local:SpeechLineListViewStyleSelector x:Key="SpeechLineListViewStyleSelectorObject"
                                         SpeechLineTimingSetStyle="{StaticResource SpeechLineTimingSet}"
                                         SpeechLineTimingNotSetStyle="{StaticResource SpeechLineTimingNotSet}"/>
</Page.Resources>



        <ListView x:Name="dtgSpeechLines" Grid.Column="0" Grid.Row="2" Margin="3,0,3,3" 
                  BorderBrush="Gray" BorderThickness="1" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ItemContainerStyleSelector="{StaticResource SpeechLineListViewStyleSelectorObject}" 
                  DoubleTapped="dtgSpeechLines_DoubleTapped">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid Padding="12" Margin="3,5,3,5" Background="{ThemeResource SystemBaseLowColor}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" x:Uid="CtrPgLvwColumn0" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Grid.Column="1" x:Uid="CtrPgLvwColumn1" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Grid.Column="2" x:Uid="CtrPgLvwColumn2" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Grid.Column="3" x:Uid="CtrPgLvwColumn3" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Grid.Column="4" x:Uid="CtrPgLvwColumn4" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Grid.Column="5" x:Uid="CtrPgLvwColumn5" Style="{ThemeResource CaptionTextBlockStyle}"/>
                    </Grid>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="3,5,3,5" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" TextWrapping="Wrap" FontSize="12" Text="{Binding Number}" />
                        <TextBlock Grid.Column="1" TextWrapping="Wrap" FontSize="12" Text="{Binding OriginalText}"/>
                        <TextBlock Grid.Column="2" TextWrapping="Wrap" FontSize="12" Text="{Binding TextForAudio}"/>
                        <TextBlock Grid.Column="3" TextWrapping="Wrap" FontSize="12" Text="{Binding SubtitleNumber}"/>
                        <TextBlock Grid.Column="4" TextWrapping="Wrap" FontSize="12" Text="{Binding Start}"/>
                        <TextBlock Grid.Column="5" TextWrapping="Wrap" FontSize="12" Text="{Binding Length}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

CODE BEHIND

 public class SpeechLineListViewStyleSelector : StyleSelector
{
    public Style SpeechLineTimingSetStyle { get; set; }
    public Style SpeechLineTimingNotSetStyle { get; set; }


    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        SpeechLine speechLine = item as SpeechLine;

        if (speechLine != null)
        {
            if (speechLine.Start == "")
            {
                return SpeechLineTimingNotSetStyle;
            }
            else
            {
                return SpeechLineTimingSetStyle;
            } 
        }

        return base.SelectStyleCore(item, container);

    }
}

score 1 · Accepted Answer · answered Feb 22 '22 at 02:41

1

Please remove the ListView.ItemContainerStyle that you defined in the ListView. It overrides the style that you defined in the StyleSelector. Just put the HorizontalContentAlignment setting in the styles in the SpeechLineListViewStyleSelector.

Like:

 <Style x:Key="SpeechLineTimingSet" TargetType="ListViewItem">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>

    <Style x:Key="SpeechLineTimingNotSet" TargetType="ListViewItem">
        <Setter Property="Background" Value="Red" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>

And:

answered Feb 22 '22 at 02:41

Roy Li - MSFT

8,043
1
7
13

That worked, thank you very much. But I have another problem. The ListView's ItemsSource is an ObservableCollection and when it is updated, the item's background color does not change. Any suggestion to resolve this? – Jose Afonso Feb 22 '22 at 17:02
@JoseAfonso Please go ahead and post a new thread about this new question so that we could check that new thread. – Roy Li - MSFT Feb 23 '22 at 02:57

UWP: Problem when trying to change the background color of a ListView item

1 Answers1