WPF. ListBox item style

Question

I have problem with ListBox item style, I create two styles and do not know to use it together. 1st style is for ListBox item size, mouse over color and so on, or second is for item background (Alternation count). If I leave one of them they work fine, but how to make them work together? Or maybe I could it write in one style?

My code is:

..... <Style x:Key="Style2" TargetType="{x:Type ListBoxItem}"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="Border" Padding="7" SnapsToDevicePixels="True"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="0"> <Setter Property="Background" Value="#FFFFFF"></Setter> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="#F7F7F7"></Setter> </Trigger> </Style.Triggers> </Style> <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource Style2}"> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="0"> <Setter Property="Background" Value="#19f39611"></Setter> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="#19000000"></Setter> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid > <ScrollViewer Margin="30,98,362,30"> <ListBox x:Name="lbPersonList" AlternationCount="2"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Name}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </ScrollViewer> </Grid>

Nacho · Accepted Answer · 2015-07-17 11:37:41Z

You can use BasedOn

<Style x:Key="Style1" TargetType="ListBoxItem"> ... </Style> <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem" BasedOn={StaticResource Style1}> ... </Style>

EDITED

The problem was the Background setter of the ControlTemplate. This is the solution (using AlternationConverter instead of triggers):

<Window.Resources> <AlternationConverter x:Key="BackgroundConverter"> <SolidColorBrush Color="#19f39611" /> <SolidColorBrush Color="#19000000" /> </AlternationConverter> <Style x:Key="Style2" TargetType="{x:Type ListBoxItem}"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="Border" Padding="7" SnapsToDevicePixels="True" Background="{TemplateBinding Background}"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter TargetName="Border" Property="Background" Value="Gray"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="Green"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="Style1" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource Style2}"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=(ItemsControl.AlternationIndex), Converter={StaticResource BackgroundConverter}}"/> </Style> </Window.Resources> <ListBox x:Name="lbPersonList" AlternationCount="2" ItemContainerStyle="{StaticResource Style1}"> ...

if I use your example How I could call this style in ListBox option? Because know its working only style1 (Alternationcount is not working)
The problem was the Background setter of the ControlTemplate. I edited my answer.

Community · Accepted Answer · 2017-05-23 12:31:05Z

Using Dynamic resource you can achieve this using single listboxitem style

 <Window.Resources> <Style x:Key="Lststyle" TargetType="ListBoxItem"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="Border" Background="Transparent" Padding="7" SnapsToDevicePixels="True"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="0"> <Setter TargetName="Border" Property="Background" Value="{DynamicResource Color0}"/> </Trigger> <Trigger Property="ListBox.AlternationIndex" Value="1"> <Setter TargetName="Border" Property="Background" Value="{DynamicResource Color1}"/> </Trigger> <Trigger Property="ListBoxItem.IsSelected" Value="true"> <Setter TargetName="Border" Property="Background" Value="Green"/> </Trigger> <Trigger Property="ListBoxItem.IsEnabled" Value="false"> <Setter Property="Foreground" Value="LightGray"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel > <TextBlock Text="Listbox1"></TextBlock> <ScrollViewer > <ListBox x:Name="lbPersonList" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2"> <ListBox.Resources> <SolidColorBrush x:Key="Color0" Color="#19f39611"></SolidColorBrush> <SolidColorBrush x:Key="Color1" Color="#19000000"></SolidColorBrush> </ListBox.Resources> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> </ListBox> </ScrollViewer> <TextBlock Margin="0,10,0,0" Text="Listbox2"></TextBlock> <ScrollViewer> <ListBox x:Name="lbPersonList1" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2"> <ListBox.Resources> <SolidColorBrush x:Key="Color0" Color="Yellow"></SolidColorBrush> <SolidColorBrush x:Key="Color1" Color="Blue"></SolidColorBrush> </ListBox.Resources> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> </ListBox> </ScrollViewer> </StackPanel>

Simplified xaml

<Window.Resources> <Style x:Key="lst1" TargetType="ListBox" > <Style.Resources> <SolidColorBrush x:Key="Color0" Color="#19f39611"></SolidColorBrush> <SolidColorBrush x:Key="Color1" Color="#19000000"></SolidColorBrush> </Style.Resources> </Style> <Style x:Key="lst2" TargetType="ListBox" > <Style.Resources> <SolidColorBrush x:Key="Color0" Color="Blue"></SolidColorBrush> <SolidColorBrush x:Key="Color1" Color="Yellow"></SolidColorBrush> </Style.Resources> </Style> <Style x:Key="Lststyle" TargetType="ListBoxItem"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="Border" Background="Transparent" Padding="7" SnapsToDevicePixels="True"> <Border.Style> <Style TargetType="Border"> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="0"> <Setter Property="Background" Value="{DynamicResource Color0}"/> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="{DynamicResource Color1}"/> </Trigger> </Style.Triggers> </Style> </Border.Style> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="0"> <Setter TargetName="Border" Property="Background" Value="{DynamicResource Color0}"/> </Trigger> <Trigger Property="ListBox.AlternationIndex" Value="1"> <Setter TargetName="Border" Property="Background" Value="{DynamicResource Color1}"/> </Trigger> <Trigger Property="ListBoxItem.IsSelected" Value="true"> <Setter TargetName="Border" Property="Background" Value="Green"/> </Trigger> <Trigger Property="ListBoxItem.IsEnabled" Value="false"> <Setter Property="Foreground" Value="LightGray"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel > <TextBlock Text="Listbox1"></TextBlock> <ScrollViewer > <ListBox x:Name="lbPersonList" Style="{StaticResource lst1}" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2">![enter image description here][2] <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> </ListBox> </ScrollViewer> <TextBlock Margin="0,10,0,0" Text="Listbox2"></TextBlock> <ScrollViewer> <ListBox x:Name="lbPersonList1" Style="{StaticResource lst2}" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2"> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> <TextBlock Text="listboxitem1"></TextBlock> </ListBox> </ScrollViewer> </StackPanel>

enter image description here

Shmwel · Accepted Answer · 2015-07-17 09:14:52Z

You should set for each style a proper x:Key and then for one of your style you can use BasedOn={StaticResource Style1} which appends to your current style, style1. (Check documentation: https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx)

Check this one:

 <Style x:Key="Style2" TargetType="ListBoxItem"> <Style.Triggers> <Trigger Property="ItemsControl.AlternationIndex" Value="0"> <Setter Property="Background" Value="#19f39611"></Setter> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="#19000000"></Setter> </Trigger> </Style.Triggers> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="Border" Padding="7" SnapsToDevicePixels="True"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter Property="Background" Value="Red" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="Gray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource Style2}"> <Setter Property="SnapsToDevicePixels" Value="true" /> <Style.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="0"> <Setter Property="Background" Value="CornflowerBlue" /> <Setter Property="Foreground" Value="Black" /> </Trigger> <Trigger Property="ItemsControl.AlternationIndex" Value="1"> <Setter Property="Background" Value="LightBlue" /> <Setter Property="Foreground" Value="Red" /> </Trigger> </Style.Triggers> </Style>

Ok, I fix it, and how I Have to write it in ListBox option (see in <Grid>.....)? Because now only first style work (Alternation count is not working)
Check new update.:D Well, you have to know that using BasedOn, the new style will overwrite all already defined styles. For instance Alternation will not work both of them at the same time. It will be taken in consideration only 1 of it, because that Trigger is defined in both styles.
How I can make them work together? Maybe its possible alternation count properties put inside first style?
Well... I don't really get how would you want to combine them. Is there any property on which it depends? At least, There is either (for instance blue & red) otherwise is anything else.. Can you explain the scenario in detail? So as I said, you cannot combine if it is defined in both styles. There should be 1 trigger applied for Alternation at time (cannot be two, three and so on).

Collectives™ on Stack Overflow

WPF. ListBox item style

3 Answers 3

2 Comments

Comments

6 Comments

Linked

Hot Network Questions