CODEWITHSUNDEEP
wpfxaml.net-core
Guapo
Guapo

Reputation: 3482

Modify a child control from trigger or better way to change their foreground?

I have a listbox with a template, inside the listboxitem I have 2 textblock.

My goal is to change the foreground of those 2 textblock when the listboxitem is:

My ItemTemplate currently removes the highlight when u hover over items, that works as expected.

I know I can get the IsSelected and IsMouseOver events, for example:

<Trigger Property="IsSelected" Value="true">
    <Setter Property="Background" TargetName="Bd" Value="White"/>
    <!-- I have no idea how to access the textblock child of the listboxitem to change it -->
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
    <!-- I have no idea how to access the textblock child of the listboxitem to change it -->
</Trigger>

But I could not figure out how to modify the TextBlock inside, I've tried using acestor and a whole different ways none worked(as in they had no effect).

Here is what my View looks like:

<UserControl x:Class="Shex.Views.SideBarView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Shex.Views"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:shex="clr-namespace:Shex"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="260"
             Background="#403f42" Padding="0" BorderThickness="0" Margin="0">
    <UserControl.Resources>
        <Style x:Key="MenuContainerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="0" Background="{TemplateBinding Background}" 
                                Padding="0" SnapsToDevicePixels="true"> 
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid Margin="0">
        <ListBox ItemsSource="{Binding MenuItems}" SelectionMode="Single" SelectedItem="{Binding SelectedMenuItem}" SelectionChanged="{s:Action ChangeView}"
                 BorderThickness="0" Padding="0" Margin="0 10 0 0" Background="#403f42" ItemContainerStyle="{DynamicResource MenuContainerStyle}" SnapsToDevicePixels="true">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Height="60" Orientation="Horizontal" SnapsToDevicePixels="true">
                        <TextBlock Text="{Binding Image}" FontFamily="/Shex;component/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" Foreground="#cfced1" FontSize="20" Margin="10 6 0 0" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                        <TextBlock Text="{Binding Name}" Foreground="#cfced1" FontSize="20" Margin="10 6 0 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Upvotes: 1

Views: 445

Answers (1)

mm8
mm8

Reputation: 169200

You should add the trigger(s) to the ItemTemplate, e.g.:

<DataTemplate>
    <StackPanel ...>
        <TextBlock x:Name="tb1" ... />
        <TextBlock x:Name="tb2" ... />
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
            <Setter TargetName="tb1" Property="Foreground" Value="Blue" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

A ListBoxItem style cannot set properties of some individual TextBlock or any other control that is defined in the ItemTemplate.

Upvotes: 1

Related Questions