How to change foreground of SelectedItem in ListBox?

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.

score 4 · Answer 1 · answered Mar 03 '14 at 09:11

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>

Anatoliy Nikolaev · Accepted Answer · 2014-03-03T09:21:05.923

3

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>

edited Mar 03 '14 at 09:21

answered Mar 03 '14 at 08:39

Anatoliy Nikolaev

22,370
15
69
68

No, I think you have misunderstand my question or might be I am misunderstanding you. The Style declared in ListBox.Resources section works fine with the Style BlankListBoxContainerStyle if I don't even use BasedOn. But the problem is that If I use BlankListBoxContainerStyle with ListBox.ItemTemplate then I don't get the proper output. – Vishal Mar 03 '14 at 08:55
1

Yes, I misunderstood question. Now I understand you're trying to set the two templates when you need one. In your `DataTemplate` try this construction may be help: ``. – Anatoliy Nikolaev Mar 03 '14 at 09:05
1

Yes, that solves the problem. Thanks for solving my problem again. – Vishal Mar 03 '14 at 09:12

How to change foreground of SelectedItem in ListBox?

2 Answers2