构成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