如何从材料设计中将ListBox项容器设置为Card

如何解决如何从材料设计中将ListBox项容器设置为Card

是否可以从Material Design将ListBox项容器从矩形更改为Card？这是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>

它看起来像这样：

我想让ListBox具有相同的行为，但作为容器，我希望从MaterialDesign获得Card（圆角和阴影）。当我在ItemTemplate中使用Card时，card被包装到内容中，因此我想我必须在ItemContainerStyle中这样做，但是我不知道如何。最终效果应如下所示：

---

编辑：到目前为止，我得到的信息：

<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>

应用内资源：

<SolidColorBrush x:Key="mouse_over_color" Color="#EEEEEE"/>

结果：

这可能是一个不好的解决方案，有太多代码，并且静态颜色mouse_over_color对于深色和浅色主题都是相同的。是否有可能为两个泰晤士河添加相同名称的单独颜色？还是通过鼠标悬停在Item上方时使背景变暗的其他方法？与Opacity相反。