WPF:ListBox 利用ItemContainerStyle改变ListBoxItem样式

原创 2017年04月17日 13:47:51

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


PHP基础之字符串

String 字符串 字符串(string)就是由一系列的字符组成的,其中每个字符都等同于一个字节。在php中只支持256字符集,不支持unicode。 php中的字符串的实现方式是由字节组成的数...

WPF 用代码调用dynamic resource动态更改背景

一般dynamic resoource通常在XAML里调用,如下范例: Button Click="Button_Click" Background="{DynamicResource The...

wpf listbox notes 样式重写

  • 2017年12月14日 10:40
  • 180KB
  • 下载

自定义WPF ListBox的选择样式

http://winsystem.ctocio.com.cn/407/12166907.shtml (下图:进行多项选择的ListBox)   首先介绍一种简单地方法:就是通过自定义Sys...

WPF 修改listbox中scollviewer的样式

1、首先先修改listbox的样式:                                                         ...

ListBoxItem失去焦点样式

  • 2014年02月05日 21:24
  • 1KB
  • 下载

WPF设置ListBoxItem失去焦点时的背景色

Style TargetType="ListBoxItem">     Style.Resources>         SelectedItem with focus-->         S...
  • czs8585
  • czs8585
  • 2011年10月20日 09:44
  • 3418

在WPF中给ListBoxItem添加鼠标滑过效果

效果具体还没整明白,先弄下来,省的忘。原文地址:http://bbs.csdn.net/topics/390047164。 这段是XAML中的Code: ...

WPF绚丽listbox

  • 2013年01月24日 17:06
  • 871KB
  • 下载

WPF listbox width自适应

  • 2014年12月01日 09:40
  • 76KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF:ListBox 利用ItemContainerStyle改变ListBoxItem样式
举报原因:
原因补充:

(最多只允许输入30个字)