WPF学习记录 二、Style样式

样式可以像css那样，把属性写到公共的地方，然后各个需要用到的控件再去引用

1、最简单的样式Demo

下面是定义一个最简单的样式，然后让2个按钮去引用：

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="35"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel  LastChildFill="False">
            <Button Width="100" Style="{ StaticResource buttonStyle}" DockPanel.Dock="Left" Height="60" Content="test"></Button>
            <Button Width="100" Style="{ StaticResource buttonStyle}" DockPanel.Dock="Top" Height="60" Content="test"></Button>
        </DockPanel>
    </Grid>

其中：key是主键，用于其它需要用到这个样式的控件来引用，TargetType后面的值是控件类型，上图示例的是button，还可以是文本框，下拉框等，引用的时候，要使用 StaticResource

2、样式的继承

使用BaseOn来设置，如下图的代码：

    <Window.Resources>
        <Style x:Key="baseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="35"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
        </Style>
        <Style x:Key="buttonStyle" TargetType="Button" BasedOn="{ StaticResource baseButtonStyle}">
            <Setter Property="Width"  Value="200"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel  LastChildFill="False">
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Left" Height="60" Content="test"></Button>
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Top" Height="60" Content="test"></Button>
        </DockPanel>
    </Grid>

3、样式的触发

　　1)：简单触发

使用触发可以来实现，如：鼠标移上变色等功能

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Width"  Value="200"></Setter>
            <Setter Property="FontSize" Value="35"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="White"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel  LastChildFill="False">
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Left" Height="60" Content="test"></Button>
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Top" Height="60" Content="test"></Button>
        </DockPanel>
    </Grid>

　　2)：多条件触发

如面代码示例，在满足按钮既获得焦点，然后又鼠标移上后才变色

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Width"  Value="200"></Setter>
            <Setter Property="Height"  Value="25"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True"></Condition>
                        <Condition Property="IsFocused" Value="True"></Condition>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Blue"></Setter>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel  LastChildFill="False">
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Left"  Content="test"></Button>
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Top"  Content="test"></Button>
        </DockPanel>
    </Grid>

 　　3)：事件触发

下面的代码实现了，鼠标移上字变小，移开字变大

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Width"  Value="200"></Setter>
            <Setter Property="Height"  Value="25"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0:0.2" Storyboard.TargetProperty="FontSize" To="1">

                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0:0.2" Storyboard.TargetProperty="FontSize" To="20">

                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel  LastChildFill="False">
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Left"  Content="test"></Button>
            <Button Style="{ StaticResource buttonStyle}" DockPanel.Dock="Top"  Content="test"></Button>
        </DockPanel>
    </Grid>