一、在学习WPF的样式之前,先总结下静态资源的使用方法:
首先,将.NET名称空间系统映射到XAML名称空间前缀<Window xmlns:sys="clr-namespace:System;assembly=mscorlib">。
然后,在窗口级别上定义相关的资源,也可以在Grid面板或StackPanel面板上设定资源。
<Window.Resources>
<FontFamily x:Key = "ButtonFontFamily">Times New Roman</FontFamily>
<sys:Double x:Key = "ButtonFontSize">18</sys:Double>
<FontWeight x:Key = "ButtonFontWeight">Bold</FontWeight>
</Window.Resources>
最后,就可以在元素中使用这些资源:
<Button Padding="5" Margin="5" Name="cmd"
FontFamily="{StaticResource ButtonFontFamily}"
FontSize="{StaticResource ButtonFontSize}"
FontWeight="{StaticResource ButtonFontWeight}">
A Customized Button
</Button>
二、使用静态资源设置属性的方法非常繁琐,以下是使用样式的方法:
<Window.Resources>
<Style x:Key="FontButtonStyle">
<Setter Property="Control.FontFamily" Value="Times New Roman"/>
<Setter Property="Control.FontSize" Value="48"/>
<Setter Property="Control.FontWeight" Value="Bold"/>
</Style>
</Window.Resources>
<Grid>
<Button Padding="5" Margin="5" Name="cmd"
Style="{StaticResource FontButtonStyle}">
A Customized Button
</Button>
</Grid>
XAML中定义的样式也可以在代码中使用:
button1.Style = (Style)cmd.FindResource("FontButtonStyle");
如果使用了样式的元素又显式的修改了属性,那么元素修改后的属性将覆盖样式。
三、样式的嵌套层次:
<Style x:Key="FontButtonStyle2">
<Setter Property="Control.FontFamily" Value="Times New Roman"/>
<Setter Property="Control.FontSize" Value="18"/>
<Setter Property="Control.FontWeight" Value="Bold"/>
<Setter Property="Control.Background">
<Setter.Value>
<ImageBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="0 0 99 99" ImageSource="1.jpg" Opacity="0.3">
</ImageBrush>
</Setter.Value>
</Setter>
</Style>
四、样式中关联事件处理程序
<Style x:Key="MouseOverHighlightStyle">
<EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter" />
<EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave" />
</Style>
事件处理代码:
private void element_MouseEnter(object sender, MouseEventArgs e)
{
((TextBlock)sender).Background = new SolidColorBrush(Colors.GreenYellow);
}
private void element_MouseLeave(object sender, MouseEventArgs e)
{
((TextBlock)sender).Background = null;
}
五、多层样式
<Window.Resources>
<Style x:Key="FontButtonStyle">
<Setter Property="Control.FontFamily" Value="Times New Roman"/>
<Setter Property="Control.FontSize" Value="48"/>
<Setter Property="Control.FontWeight" Value="Bold"/>
</Style>
<Style x:Key="AddFontButtonStyle"BasedOn=“{StaticResource FontButtonStyle}">
<Setter Property="Control.FOreground" Value="White"/>
<Setter Property="Control.Background" Value="DarkBlue"/>
</Style>
</Window.Resources>
六、通过类型自动应用样式
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Control.FontFamily" Value="Times New Roman"/>
<Setter Property="Control.FontSize" Value="30"/>
<Setter Property="Control.FontWeight" Value="Bold"/>
</Style>
</Window.Resources>
这样,在所有的元素中,按钮都被替换为了设定的样式,如果哪个按钮不需要该样式,只需要在该按钮的XAML中设定Style="{x:Null}"或显式改变该按钮的属性。
七、样式中的触发器
只能处理一些简单的触发事件,当需要处理复杂事件时(判断一些条件成立,计算等)需要使用事件处理程序,如标题四。
触发器的好处是:不用为了翻转它们而编写任何逻辑。只要触发事件取消,元素就会恢复到它的正常外观。
<Style x:Key="FontButton">
<Style.Setters>
<Setter Property="Control.FontFamily" Value="Times New Roman" />
<Setter Property="Control.FontSize" Value="19" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="Control.IsFocused" Value="True">
<Setter Property="Control.Foreground" Value="DarkRed" />
</Trigger>
</Style.Triggles>
</Style>
当希望创建只有当多个条件同时满足时才能激活的触发器,需要使用MultiTrigger触发器:
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Trigger Property="Control.IsFocused" Value="True">
<Trigger Property="Control.IsMouseOver" Value="True">
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Control.Foreground" Value="DarkRed" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggles>
八、事件触发器、 故事板
XAML中,每个动画必须在故事板中定义,故事板为动画提供了时间线。
<Window.Resources>
<Style x:Key="{x:Type Button}">
<Setter Property="Control.FontFamily" Value="Times New Roman"/>
<Setter Property="Control.FontSize" Value="30"/>
<Setter Property="Control.FontWeight" Value="Bold"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
以上代码实现简单的动画效果。
当使用事件触发器时,需要反转事件触发器,使事件回到原来的状态。