CODEWITHSUNDEEP
wpfxaml
Lukasz
Lukasz

Reputation: 8900

Change ListBoxItem.Foreground color using a Trigger

I have this listbox style but for some reason I am unable to change the foreground color based on a trigger. I would like to change the foreground color to black when the item in the listbox is selected. I searched all over and all the solutions don't seem to work in my case. Here is my list box...

<ListBox IsSynchronizedWithCurrentItem="True" SelectedValuePath="RecordId" ItemsSource="{Binding People}" SelectedValue="{Binding SelectedPersonId}" HorizontalAlignment="Stretch" Margin="20,5,10,5" Width="Auto" Grid.Row="1" Background="{x:Null}" BorderBrush="{x:Null}" x:Name="lstCustomers">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="Auto" Width="Auto" d:DesignWidth="545.375" d:DesignHeight="50.294">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="132.375"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="stackPanel" Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <Label FontSize="16" Content="{Binding FullName}" Foreground="White"/>
                    <Label FontSize="16" Content="{Binding DisplayName}" Margin="5,0,0,0" Foreground="White"/>
                </StackPanel>
                <DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Margin="0" Grid.Column="1">
                    <Label Content="{Binding Date}" ContentStringFormat="yyyy/MM/dd" FontSize="24" HorizontalAlignment="Right" Foreground="White" DockPanel.Dock="Right" VerticalAlignment="Center"/>
                </DockPanel>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border BorderBrush="#26FFFFFF" BorderThickness="3" CornerRadius="5" Name="Border" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#7FFFFFFF" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="#0FFFFFFF"></Setter>
                                <Setter TargetName="Border" Property="BorderBrush" Value="#BEFFFFFF"></Setter>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelected" Value="true"></Condition>
                                    <Condition Property="IsMouseOver" Value="true"></Condition>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Border" Property="Background" Value="#7FFFFFFF"/>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Any help would be appreciated!

Thank You!

Upvotes: 1

Views: 5628

Answers (1)

Rachel
Rachel

Reputation: 132618

Your triggers are working fine, however I don't see anything that specifies the foreground should be black when an item is selected....

  <ControlTemplate TargetType="ListBoxItem">
        <Border BorderBrush="#26FFFFFF" BorderThickness="3" CornerRadius="5" Name="Border" Margin="0,0,2,3" Padding="0" SnapsToDevicePixels="true">
            <ContentPresenter />
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Border" Property="Background" Value="#7FFFFFFF" />
                <Setter TargetName="Border" Property="Foreground" Value="Black" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter TargetName="Border" Property="Background" Value="#0FFFFFFF"></Setter>
                <Setter TargetName="Border" Property="BorderBrush" Value="#BEFFFFFF"></Setter>
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="Selector.IsSelected" Value="true"></Condition>
                    <Condition Property="IsMouseOver" Value="true"></Condition>
                </MultiTrigger.Conditions>
                <Setter TargetName="Border" Property="Background" Value="#7FFFFFFF"/>
                <Setter TargetName="Border" Property="Foreground" Value="Black" />
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

I do see code that sets the Foreground color of a Label to white however. This is overwriting any foreground color that you set in your ListBoxItem style.

I would suggest adding the default foreground color to your ListBoxItem style, and either binding the Label foreground color to the ListBoxItem foreground color, or using a TextBlock instead of a Label which will by default inherit the foreground color.

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        ...
    </Setter>
</Style>

And 

<Label Text="Name" Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=Foreground}"/>

Or

<TextBlock Text="Name" />

Upvotes: 2

Related Questions