关闭

WPF:ListBox 利用ItemContainerStyle改变ListBoxItem样式

1512人阅读 评论(0) 收藏 举报
分类:

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:103511次
    • 积分:1377
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:0篇
    • 译文:1篇
    • 评论:24条
    文章分类
    最新评论