zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HDU 2476 String painter (*区间DP+基础Dp)
    hdoj 1405 The Last Practice
    hdu 2715 Herd Sums
    hdu 3617 Happy 2009
    hdu 1062 Text Reverse
    hdu 2716 Message Decowding
    hdu 1597 find the nth digit
    hdoj 1229 还是A+B
    hdu 1877 又一版 A+B
    hdoj 2045 不容易系列之(3)—— LELE的RPG难题
  • 原文地址:https://www.cnblogs.com/wjx-blog/p/15423343.html
Copyright © 2011-2022 走看看