WPF中的Style

kingwebo'sZone

已于 2022-09-22 18:02:51 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：关于程序文章标签： WPF

于 2022-09-22 18:01:05 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_44549949/article/details/92709054

关于程序专栏收录该内容

422 篇文章

订阅专栏

构成Style最重要的两种元素是Setter和Trigger，Setter类帮助我们设置控件的静态外观风格，Trigger类则帮助我们设置控件的行为风格。

Style作用：
为了设计多种外观形式和动作行为。

Style中的Setter

Setter设置器，Setter类的Property属性用来指明你想为目标的哪个属性赋值：Setter类的Value属性则是你提供的属性值。

下面的例子中在Window的资源字典中放置一个针对TextBlock的Style，Style中使用若干个Setter来设定TextBLock的一些属性，这样程序中的TextBlock就会具有统一的风格，除非你使用{x:Null}清空Style样式。

XAML代码如下：

<Window x:Class="WpfStyle.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="MainWindow" Height="250" Width="300"> 
    <Window.Resources> 
        <Style TargetType="TextBlock"> 
            <Style.Setters> 
                <Setter Property="FontSize" Value="24"/> 
                <Setter Property="TextDecorations" Value="Underline"/> 
                <Setter Property="FontStyle" Value="Italic"/> 
            </Style.Setters> 
        </Style> 
    </Window.Resources> 
    <StackPanel> 
        <TextBlock Text="Hello WPF!"/> 
        <TextBlock Text="这是一个TextBlock"/> 
        <TextBlock Text="这也是一个TextBlock" Style="{x:Null}"/> 
    </StackPanel> 
</Window>

因为Style的内容属性是Setters,所以我们可以直接在

<Style TargetType="TextBlock"> 
        <Style.Setters> 
             <Setter Property="FontSize" Value="24"/> 
             <Setter Property="TextDecorations" Value="Underline"/> 
             <Setter Property="FontStyle" Value="Italic"/> 
         </Style.Setters> 
  </Style>

运行效果：
在这里插入图片描述

根据上面这个例子我们可以推知，如果想设置控件的ControlTemplate，只需要把Setter的Property设为Template并为Value提供一个ControlTemplate对象即可。

Style中的Trigger

Trigger触发器，即当某些条件满足是会触发一个行为（比如某些值的变化或动画的发生等）。触发器比较像事件。事件一般是由用户操作触发的，而触发器除了有事件触发型的EventTrigger外还有数据变化触发型的Trigger/DataTrigger及多条件触发型的MultiTrigger/MultiDataTrigger等。

1、基本Trigger

Trigger类是最基本的触发器。类似于Setter.Trigger也有Property和Value这两个属性，Property是Trigger关注的属性名称，Value是触发条件。Trigger类还有一个Setters属性，此属性值是一组？Setter，一旦触发条件满足，这组Setter的“属性一值”就会被应用，触发条件不再满足后，各属性值会被还原。

下面这个例子中包含一个针对CheckBox的Style，当CheckBox的IsChecked属性值为true的时候前景色和字体会改变。XAML代码如下：

<Window.Resources>
        <Style  TargetType="CheckBox">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Trigger.Setters>
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox Content="悄悄的我走了" Margin="5"/>
        <CheckBox Content="正如我悄悄的来" Margin="5"/>
        <CheckBox Content="我挥一挥衣袖" Margin="5"/>
        <CheckBox Content="不带走一片云彩" Margin="5,0"/>
    </StackPanel>
</Window>

因为Triggers不是Style的内容属性，所以<Style.Triggers>…</Style.Triggers>这层标签不能省略，但Triggers的Setters属性是Trigger的内容属性，所以<Trigger.Setter>…</Style.Setters>这层标签是可以省略的，以上代码可以简化为：

   <Setter Property="FontSize" Value="20"/>

   <Setter Property="Foreground" Value="Orange"/>

这个是选中后的效果运行效果如下图：

在这里插入图片描述

2、MultiTrigger

MultiTrigger必须多个条件同时成立是才会被触发。MultiTrigger比Trigger多了个Conditions属性，需要同时成立的条件就存储在这个集合中。

稍微改动下上面的例子，要求同时满足CheckBox被选中且Content为“正如我悄悄的来”时才会触发。XAML代码如下：

  <Style  TargetType="CheckBox">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True"/>
                        <Condition Property="Content" Value="正如我悄悄的来"/>
                    </MultiTrigger.Conditions>
<MultiTrigger.Setters>
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
</Style>

运行效果如下：

在这里插入图片描述

3、由数据触发的DataTrigger

程序中经常会遇到基于数据执行某些判断情况，遇到这种情况时我们可以考虑使用DataTrigger。DataTrigger对象的Binding属性会把数据源源不断的送过来，一旦送来的值与Value属性一致，DataTrigger即被触发。

下面例子中，当TextBox的Text长度小于7个字符时其Border会保持红色。XAML代码如下：

调用自身命名空间

xmlns:local=“clr-namespace:WpfStyle”

页面布局：

<Window.Resources>
        <local:L2BConverter x:Key="evtr"/>
        <Style TargetType="TextBox">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource= {x:Static RelativeSource.Self}, Path=Text.Length, Converter={StaticResource evtr}}" Value="false">
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="BorderThickness" Value="1"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBox Margin="5"/>
        <TextBox Margin="5,0"/>
        <TextBox Margin="5"/>
</StackPanel>

因为是由长度而触发，那么就用到了Converter，后台代码：

public class L2BConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
                    int textLength = (int)value;
            return textLength > 6 ? true : false;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
}

经Converter转换后，长度值会转换为bool类型值。DataTrigger的Value被设置为false，也就是当TextBox的文本长度小于7时DataTrigger会使用自己的一组Setter把TextBox的边框设为红色。最后注意生成一下代码。

运行结果如下：

在这里插入图片描述

————————————————
版权声明：本文为优快云博主「蝉鸣扰梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_44549949/article/details/92709054

另一个参考文档：
https://www.cnblogs.com/bruce1992/p/15022547.html
wpf 中的style