WPF:ListBox 利用ItemContainerStyle改变ListBoxItem样式

   上篇文章中的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"/>


   也可以使用利用Storyboard通过动画来改变一个属性值:

  1. 添加一个LayoutTransform属性,并设置值为ScaleTransform
  2. 利用触发器trigger(而不是MulitTrigger) 在IsMouseOver为true的条件下 设定ScaleTransform的ScaleX与ScaleY的值
Style x:Key="lbDefaultItemContainerStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Padding" Value="4,1"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="1.1" Duration="0:0:0.3"
                                                         Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"/>
                                        <DoubleAnimation To="1.1" Duration="0:0:0.3"
                                                         Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="1" Duration="0:0:0.3"
                                                         Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)"/>
                                        <DoubleAnimation To="1" Duration="0:0:0.3"
                                                         Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


阅读更多
个人分类: wpf
上一篇WPF:ListBox的默认ItemContainerStyle
下一篇WPF: ListBox绑定xml数据
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭