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>

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

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