How do I change the selected item 'text' foreground color in a listbox

Question

I have a ListBox with a DataTemplate. I'm trying to change the color of the text/foreground to white for the selected item in the listbox. I have seriously tried like 30 different ways to do it that I've found on google. I just can't get it to work. How can I change the foreground color?

Also, I would like to point out that I would like to not rely on the method that uses the SystemColors because I read that it won't work in .net 4.5 so I don't want it to break when we move our application to 4.5 some day. Here is my listbox xaml:

<ListBox Grid.Row="1" x:Name="Alerts" ItemsSource="{Binding Alerts}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" AlternationCount="2">
<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" Orientation="Horizontal">
                    <Label Content="{Binding Type}" HorizontalAlignment="Left" Padding="1,1,1,0" />
                    <Label Content=" - " Padding="1,1,1,0"></Label>
                    <Label Content="{Binding Date}" HorizontalAlignment="Left" Padding="1,1,1,0" />
                </StackPanel>
                <Label Grid.Row="1" Content="{Binding Message}" HorizontalAlignment="Left" Margin="0" Padding="1,0,1,1" />
            </Grid>
            <Button Grid.Column="1"
                    CommandParameter="{Binding .}"
                    Command="{Binding Path=DataContext.Commands.RemoveAlertCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
                    Content="X" HorizontalAlignment="Right" Width="Auto" Height="Auto" Foreground="#FFD40000" FontWeight="Bold" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
    <Style  TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="LightGray"></Setter>
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="Ivory"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>
</ListBox>

Clemens Clemens · Accepted Answer · 2013-02-10T22:24:54

What about this:

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

In a DataTemplate that uses TextBlocks, the Foreground property would simply be inherited:

<ListBox.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}"/>
    </DataTemplate>
</ListBox.ItemTemplate>

In your DataTemplate with Label controls Foreground value inheritance does not work (see here why). But you may always bind to the Foreground property of the ListBoxItem like this:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Label Content="{Binding}"
               Foreground="{Binding Foreground,
                            RelativeSource={RelativeSource Mode=FindAncestor,
                                            AncestorType=ListBoxItem}}"/>
    </DataTemplate>
</ListBox.ItemTemplate>

Or you may simply replace your Labels with TextBlocks.

How do I change the selected item 'text' foreground color in a listbox

1 Answers