Cannot change the style of the selected item in a ListBox

Question

I´m trying to change the focused/selected item of a ListBox. My application is based on this article. At the moment I´m trying to set the ListBoxItem style via data templates:

    <DataTemplate x:Key="ItemTemplate">
        <TextBlock Text="{Binding}" 
                   Foreground="Black" 
                   FontFamily="Segoe UI" 
                   FontSize="22"
                   HorizontalAlignment="Left"
                   Padding="15,10,0,0"
                   />
    </DataTemplate>

    <DataTemplate x:Key="SelectedTemplate">
        <TextBlock Text="{Binding}" 
                   Foreground="Red" 
                   FontFamily="Segoe UI" 
                   FontSize="30"
                   HorizontalAlignment="Left"
                   Padding="15,10,0,0"
                   />
    </DataTemplate>

My idea was to switch between those templates using a trigger:

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
        <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>

The ListBox looks like this:

<ListBox x:Name="valuesItemsCtrl" 
         BorderThickness="0" 
         ItemContainerStyle="{StaticResource ContainerStyle}"
         Background="Transparent"
         Tag="{Binding }">
    <ListBox.AlternationCount>
        <Binding>
            <Binding.Path>Values.Count</Binding.Path>
        </Binding>
    </ListBox.AlternationCount>
        <ListBox.ItemsSource>
            <Binding>
                <Binding.Path>Values</Binding.Path>
            </Binding>
        </ListBox.ItemsSource>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

At the end I add the template to another ListBox:

<ListBox x:Name="tumblersCtrl" 
                 BorderThickness="0" 
                 Background="Transparent" 
                 ItemsSource="{Binding Tumblers, ElementName=thisCtrl}" 
                 ItemTemplate="{StaticResource TumblerTemplate}">
</ListBox>

Thanks for any help or hint!

Answer 1

Use ItemTemplate and data triggers:

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" 
                       Foreground="Black" 
                       FontFamily="Segoe UI" 
                       FontSize="22" 
                       HorizontalAlignment="Left" 
                       Padding="15,10,0,0"
                       x:Name="tbName"/>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter TargetName="tbName" Property="Foreground" Value="Red"/>
                    <Setter TargetName="tbName" Property="FontSize" Value="30"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

where bound data is a collection of:

public class ViewModel : ViewModelBase
{
    public String Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }
    }
    private String name;

    public Boolean IsSelected
    {
        get { return isSelected; }
        set
        {
            if (isSelected != value)
            {
                isSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }
    }
    private Boolean isSelected;
}

Window code-behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new[]
        {
            new ViewModel { Name = "John", IsSelected = true },
            new ViewModel { Name = "Mary" },
            new ViewModel { Name = "Pater" },
            new ViewModel { Name = "Jane" },
            new ViewModel { Name = "James" },
        };
    }
}

Answer 2

If you want to change the templates use DataTemplateSelector.

Dismiss your ContainerStyle and instead set the ListBox.ItemsTemplateSelector to your custom datatemplateselector as static resource.

You can find a detailed example in this link.

EDIT : According to your comment you don't need DataTemplate just set these two properties in the Trigger:

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="FontSize" Value="22" />
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Padding" Value="15,10,0,0" />
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="Red" />
            <Setter Property="FontSize" Value="30" />
        </Trigger>
    </Style.Triggers>
</Style>