WPF对象样式 - 技术栈

基本样式设置

Style 设置指定对象的属性

属性：

TargetType 引用在哪个类型上面，例如Button、Textblock。。

如果在控件对象里面设置Style，则TargetType必须指定当前控件名

只在作用域里面有效果，其他的相同控件没有影响，作用域类似于C#中的大括号

Setters 集合设置属性的集合 可以省略

原理就是反射，根剧控件的属性进行设置值，反射到控件属性

设置的属性优先使用控件上的指定属性，控件属性>Style属性

Property 属性

Value 属性的值

Triggers 集合触发器监听 不可以省略

Property 监听的属性

Value 当监听的属性 == 这个Value的时候执行以下方法在下方写满足之后的方法 Trigger.Setters（此时的Setters也可以省略）

复制代码

<Button>
    <Button.Style>
        <Style TargetType="Button">
            <!--<Style.Setters> 可以省略-->
            <Style.Setters>
                <Setter Property="Content" Value="Btn"/>
                <Setter Property="FontSize" Value="50"/>
                <Setter Property="Height" Value="100"/>
                <Setter Property="Width" Value="200"/>
                <Setter Property="Background" Value="Orange"/>
            </Style.Setters>
        </Style>
    </Button.Style>
</Button>

复制代码

<Style.Triggers>
    <Trigger Property="Background" Value="Orange">
        <!--满足条件执行-->
        <!--<Trigger.Setters> 可以省略-->
        <Trigger.Setters>
            <Setter Property="Content" Value="被Trigger改变了"/>
        </Trigger.Setters>
    </Trigger>
</Style.Triggers>

由此可以看到我们按钮的Content被触发器给修改了

样式触发器设置

样式触发器：根据用户行为，改变控件外观

MultiTrigger 多重条件

需求：当需要多个条件一起才能触发的时候，使用

复制代码

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="Background" Value="Orange"/>
        <Condition Property="Content" Value="Btn"/>
    </MultiTrigger.Conditions>
    <!--两个都满足才会触发-->
    <!--<MultiTrigger.Setters> 可以省略-->
    <MultiTrigger.Setters>
        <Setter Property="Foreground" Value="Green"/>
    </MultiTrigger.Setters>
</MultiTrigger>

还是上面的图为案例代码：

EventTrigger 事件触发

需求：当需要点击获取鼠标等事件触发的时候，使用此方法

此方法仅可以使用动画去变化，不可以直接Setter

复制代码

<!--必须设置路由事件 RoutedEvent-->
<EventTrigger RoutedEvent="MouseMove">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Duration="0:0:0.5" To="200"
                             Storyboard.TargetProperty="Width" />
            <DoubleAnimation Duration="0:0:0.5" To="400"
                             Storyboard.TargetProperty="Height" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

当我鼠标进入的时候，变成这个样子：触发生效

补充

需求：我需要鼠标进入的时候变大，鼠标出去的时候正常大小

利用触发器触发和离开的方法

复制代码

<Trigger Property="IsMouseOver" Value="True">
    <!--EnterActions 开始触发-->
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.5" To="400"
                                 Storyboard.TargetProperty="Width"/>
                <DoubleAnimation Duration="0:0:0.5" To="400"
                                 Storyboard.TargetProperty="Height"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <!--ExitActions 退出触发-->
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Duration="0:0:0.5" To="200"
                                 Storyboard.TargetProperty="Width"/>
                <DoubleAnimation Duration="0:0:0.5" To="100"
                                 Storyboard.TargetProperty="Height"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

鼠标进入：

鼠标离开：

注意：触发器的渲染是从上至下，同样的触发下面的动作会覆盖上面的动作。

访问级别

越接近对象，级别越高

样式继承

BasedOn：继承父样式

样式继承必须单独写在资源里面

SunBtn样式中只写了前景色，因为继承了PreBtn的样式，所以长宽背景色都继承了。

复制代码

<Window.Resources>
  <Style TargetType="Button" x:Key="preStyle">
      <Setter Property="Height" Value="80"/>
      <Setter Property="Width" Value="200"/>
      <Setter Property="Background" Value="Orange"/>
  </Style>
  <Style TargetType="Button" x:Key="sunStyle" BasedOn="{StaticResource preStyle}">
      <Setter Property="Foreground" Value="Red"/>
  </Style>
</Window.Resources>
<StackPanel>
    <Button Content="PreBtn" Style="{StaticResource preStyle}" />
    <Button Content="SunBtrn" Style="{StaticResource sunStyle}"/>
</StackPanel>

注意：可以多层次继承和C#中的类一样，但是不可以继承多个。

优先级，自己的大于继承的，自己没有找继承。总结： 越接近对象，级别越高