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);

    }
}

Answer 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: