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!

Dennis · Accepted Answer · 2012-09-12 11:59:21Z

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" }, }; } }

I cannot figure out which class you want me to chose instead of ViewModel and ViewModelBase
@SeveFriede: ViewModel is a separate class, in separate code file. Did you mean assigning a data context for ListBox? If so, I'll update the answer.
@SeveFriede: ViewModelBase is a simple implementation of INotifyPropertyChanged interface. ViewModel is a sample model, representing data item (the thing you want to display) for items control (ListBox in your case).
It took me some time to understand the data triggering and binding ... but finally thats it! Thank you very much! :)

Miklós Balogh · Accepted Answer · 2012-09-12 10:51:03Z

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>

All I want to do is to change the TextColor and FontSize. Do I really need a DataTemplateSelector for that? I think that my problem is that actually there is no selectionChanged event :S

Collectives™ on Stack Overflow

Cannot change the style of the selected item in a ListBox

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related