WPF中的Style

时间:2022-04-07 16:12:48

一、Style基础知识

构成Style最重要的两种元素是Setter和Trigger

  Setter类帮助我们设置控件的静态外观风格

  Trigger类帮助我们设置控件的行为风格

Setter类的Property属性是用来指明你想为目标的哪个属性赋值;Value属性则是你提供的属性值:例如在Window的资源词典中放置一个针对TextBlock的Style,Style中使用若干          Setter来设定TextBlock的一些属性,这样程序中的TextBlock就会具有统一的风格,除非使用{x:Null}显示地清空Style.

Trigger类最基本的是触发器,Property是Trigger关键的属性名称,Value是触发条件,Trigger类还有一个Setters属性,此属性是一组Setter,一旦触发条件被满足,这组Setter           的“属性-值”就会被应用,触发条件不再满足后,各属性值会被还原。

二、案例

1、  Style中的Setter

WPF中的Style

<Window x:Class="Style中的Setter.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<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 Margin="5">
<TextBlock Text="Hello Wpf"/>
<TextBlock Text="This is a sample"/>
<TextBlock Text="by time 2009" Style="{x:Null}"></TextBlock>
</StackPanel>
</Window>

Style中的Trigger

WPF中的Style

<Window x:Class="Style中的Trigger.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="CheckBox" x:Key="myStyle">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Foreground" Value="Orange"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<CheckBox Content="悄悄地我走了" Margin="5" Style="{StaticResource myStyle}"/>
<CheckBox Content="正如我轻轻的来" Margin="5"/>
<CheckBox Content="我挥一挥衣袖" Margin="5"/>
<CheckBox Content="不带走一片云彩" Margin="5"/>
</StackPanel>
</Window>

如果想全部应用的话那就去掉x:Key="myStyle"

2、MultiTrigger:(叫MultiConditionTrigger更合适)因为必须多个条件同时满足的时候才会被触发,MultiTrigger比Trigger多了一个Conditions属性,需要同时成立的条件就被存储在这个集合中。

WPF中的Style

    <Window.Resources>
<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>
</Window.Resources>
<StackPanel>
<CheckBox Content="轻轻的我走了"/>
<CheckBox Content="正如我轻轻的来"/>
<CheckBox Content="我轻轻的招手"/>
<CheckBox Content="不带走一片云彩"/>
</StackPanel>

3、由数据触发的DataTrigger

WPF中的Style

    <Window.Resources>
<local:L2BConverter x:Key="cvtr"/>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource cvtr}}" Value="false">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="11"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Margin="5"/>
<TextBox Margin="5"/>
<TextBox Margin="5"/>
</StackPanel>
    class L2BConverter:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int textLength = (int) value;
return textLength > ? true : false;
} public object ConvertBack(object value, Type targerType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

4、多数据条件触发的MultiDataTrigger:有时我们会遇到要求多个数据同时满足时才能触发变化的需求,此时可以考虑使用MultiDataTrigger

WPF中的Style

<Window x:Class="多数据条件触发的MultiDataTrigger.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:多数据条件触发的MultiDataTrigger"
xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ListBoxItem">
<!--使用Style设置DataTemplate-->
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<!--MultiDataTrigger-->
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=ID}" Value="2"/>
<Condition Binding="{Binding Path=Name}" Value="Tom"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="Orange"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
<!--数据源-->
<!--<collections:ArrayList x:Key="stuList">
<local:Student ID="1" Name="One" Age="1"/>
<local:Student ID="2" Name="Two" Age="2"/>
<local:Student ID="3" Name="Three" Age="3"/>
</collections:ArrayList>-->
</Window.Resources>
<StackPanel>
<ListBox x:Name="list" Margin="5" />
</StackPanel>
</Window>
            List<Student> stuList=new List<Student>()
{
new Student(){ID = ,Name = "One",Age = },
new Student(){ID = ,Name = "Two",Age = },
new Student(){ID = ,Name = "Three",Age = },
new Student(){ID = ,Name = "Tom",Age = }
};
this.list.ItemsSource = stuList;
}

5、由事件触发的EventTrigger

EventTrigger是触发器中最特殊的一个。首先,它不是由属性值或数据的变化来触发而是由事件来触发;其次,被触发后它并非应用一组Setter,而是执行一段动画。

<Window x:Class="由事件触发的EventTrigger.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button">
<Style.Triggers>
<!--鼠标进入-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--鼠标退出-->
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Width="40" Height="40"></Button>
</Grid>
</Window>