WPF:ListBox 利用ItemContainerStyle改变ListBoxItem样式

最新推荐文章于 2024-03-11 21:00:58 发布

原创

最新推荐文章于 2024-03-11 21:00:58 发布 · 1.4w 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了如何在WPF中利用ItemContainerStyle修改ListBoxItem的样式，特别是针对鼠标悬停时的效果。通过添加MultiTrigger和ScaleTransform，可以实现ListBoxItem的背景、边框、字体大小的改变。同时，文章提到了使用Storyboard动画来动态调整ScaleTransform的ScaleX和ScaleY属性，以实现更丰富的交互体验。

上篇文章中的ItemContainerStyle 只是默认的样式，但是很多时候我们做鼠标悬浮操作时都想有其它的效果，比如改变ListBoxItem的背景或者边框，再者改变字体大小。

前面提到的MultiTrigger对象，就是多条件触发器，也许触发条件不止IsMouseOver。我们在原来的基础上增加设置条目的放大转换ScaleTransform（它隶属于LayoutTransform，用于设定UIElement的“布局转化”），并且设置FonteWeight以及FontFamily属性。下面的代码省略了部分代码。

<MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                        <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="FontWeight" Value="SemiBold"/>
                            <Setter Property="FontFamily" Value="宋体" />
                    </MultiTrigger>

ScaleTransform 中的ScaleX,ScaleY 默认值为1 ，这里讲它设置为1.5，用于在原来的基础上放大1.5倍。

<ScaleTransform ScaleX="1.5" ScaleY="1.5"/&

最低0.47元/天解锁文章