How to set ListBox item container to Card from Material Design

1k views Asked by At

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:

enter image description here

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:

enter image description here


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:

enter image description here

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.

0

There are 0 answers