WPF 样式学习总结

一、在学习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>

以上代码实现简单的动画效果。

当使用事件触发器时，需要反转事件触发器，使事件回到原来的状态。