change properties inside datatemplate of listboxItem if selected

Question

I have the following style:

<Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock x:Name="Text" Text="{Binding Name}" Margin="0, 5" FontSize="16"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger> 
        </Style.Triggers>

I want to change the foreground color of "Text" if the "ListBoxItem" is selected. I know from here: Change WPF DataTemplate for ListBox item if selected how to change the DataTemplate. but since I just want to change colors, this solution makes unnecessary duplication in codd - It would be a greater problem if my DataTemplate would be very complex and long.

How do I achieve change of a single property of an object inside the DataTemplate?

15ee8f99-57ff-4f92-890c-b56153 15ee8f99-57ff-4f92-890c-b56153 · Accepted Answer · 2017-12-26T19:24:21

If you actually want the same item template always (whether the item is selected or not), but you want a different foreground color when the item is selected, that's easy. Don't set the ContentTemplate in a trigger, because ContentTemplate doesn't change. Just set the foreground color with a trigger. If you don't mess with the foreground color in the template, it will inherit whatever the ListBoxItem has for that property.

<Style TargetType="ListBoxItem">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock 
                    x:Name="Text" 
                    Text="{Binding Name}" 
                    Margin="0, 5" 
                    FontSize="16"
                    />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

A more elaborate version of the same style:

<Style TargetType="ListBoxItem">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Ellipse
                        Height="12"
                        Width="12"
                        VerticalAlignment="Center"
                        x:Name="Ellipse"
                        Fill="Yellow"
                        Stroke="DeepSkyBlue"
                        StrokeThickness="1"
                        />
                    <TextBlock 
                        x:Name="Text" 
                        Text="{Binding Name}" 
                        Margin="5,5,0,5" 
                        FontSize="16"
                        />
                </StackPanel>
                <DataTemplate.Triggers>
                    <DataTrigger 
                        Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                        Value="True"
                        >
                        <Setter 
                            TargetName="Ellipse"
                            Property="Stroke"
                            Value="Orange"
                            />
                        <Setter 
                            TargetName="Ellipse"
                            Property="StrokeThickness"
                            Value="3"
                            />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

change properties inside datatemplate of listboxItem if selected

1 Answers