Is this possible to change ListBox item container from rectangle to Card from Material Design? This is code for ListBox:
<ListBox
SelectedIndex="{Binding SelectedIndex}"
SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding DateRanges}">
<ListBox.ItemContainerStyle>
<Style
TargetType="ListBoxItem"
BasedOn="{StaticResource MaterialDesignListBoxItem}">
<Style.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
Property="Background"
Value="{StaticResource SecondaryHueMidBrush}" />
</Trigger>
</Style.Triggers>
<Setter
Property="Margin"
Value="0 2 0 0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate
DataType="modelDate:DateRange">
<TextBlock
FontSize="14"
Text="{Binding GetRange}"
Margin="8 0 8 0" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It looks like this:
And I want to have the ListBox with the same behavior but as a container, I want Card from MaterialDesign (rounded corners and shadow). When I use Card in ItemTemplate
card is wrapped to content so I suppose I have to do this in ItemContainerStyle
but I have no idea how. The final effect should look like this:
Edit: What I get so far:
<ListBox
Padding="0 4 0 4"
SelectedIndex="{Binding SelectedIndex}"
SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding DateRanges}">
<ListBox.ItemContainerStyle>
<Style
TargetType="ListBoxItem">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="IsSelected"
Value="True" />
<Condition
Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBoxItem}">
<materialDesign:Card
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
UniformCornerRadius="8"
Background="{StaticResource SecondaryHueDarkBrush}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="IsSelected"
Value="True" />
<Condition
Property="IsMouseOver"
Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBoxItem}">
<materialDesign:Card
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
UniformCornerRadius="8"
Background="{StaticResource SecondaryHueMidBrush}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="IsSelected"
Value="False" />
<Condition
Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBoxItem}">
<materialDesign:Card
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
UniformCornerRadius="8"
Background="{StaticResource mouse_over_color}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ListBoxItem}">
<materialDesign:Card
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
UniformCornerRadius="8"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter
Property="Margin"
Value="8 4 8 4" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<Style
TargetType="ScrollBar"
BasedOn="{StaticResource MaterialDesignScrollBarMinimal}" />
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate
DataType="modelDate:DateRange">
<TextBlock
FontSize="14"
Text="{Binding GetRange}"
Margin="8 8 8 8" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In App resources:
<SolidColorBrush x:Key="mouse_over_color" Color="#EEEEEE"/>
Result:
It is probably a bad solution, there is so much code, and also static color mouse_over_color
is the same for the dark and light theme. Is there any possibility to add to separate colors with the same name to both Thames? Or any other way to make the background darker when the mouse is over Item? Something like an opposite to Opacity
.