How to change foreground of SelectedItem in ListBox? - wpf

Question

I have asked this question yesterday and got a good quick answer. But now I have something different where the last solution does not work.
First lets have a look at my xaml:
<ListBox ItemsSource="{Binding Children}" x:Name="lst">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Vertical" MaxHeight="{Binding ElementName=lst, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="125" Width="250">
<Path Data="{Binding Image}" VerticalAlignment="Center"
Stretch="Uniform" Fill="#FFFFFFFF"
Width="68" Height="68" Margin="10" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock Text="{Binding Title, Converter={StaticResource spaceToNewLineConverter}}" VerticalAlignment="Top"
Margin="40,10,10,10" FontSize="24" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The above xaml works perfectly well and gives good output. But now I want to change the foreground color of SelectedItem.
Here you can find find the question that I asked yesterday.
Now, the solution to the question asked yesterday was something like this :
<Style x:Key="BlankListBoxContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{x:Null} "/>
</Style>
If I change the template as shown in the above code I loose my DataTemplate that I applied on the listbox.
I have also tried SolidColorBrush and using Setters and Triggers. But I am out of luck.

Answer 1

You can do this by using a trigger in your Style. Try something like this:
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>

Answer 2

In this case, you need to pass Foreground value in the DataTemplate of ListBoxItem. This can be done as follows:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Height="125"
Width="250">
...
<TextBlock Foreground="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" ... />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>