EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.

OR

C#Winform向WPF过渡入门(五)

总目录:https://www.v2know.com/MainPage/Category/WPF

基本触发器

直接上代码:

<Window.Resources>
    <Style x:Key="defaultStyle" TargetType="Button">
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="40"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="FontSize" Value="30"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="FontSize" Value="20"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
    </StackPanel>
</Grid>

嘛,没什么好说的,既然你有Winform+HTML的基础,这种代码应该看得懂,不懂自己跑一遍罢。

还是稍微解释一下罢:

这是一个简单的触发器,它实现的功能是当鼠标移动到按钮的时候,触发第一个触发器使得字体变成红色,并放大到30,当离开的时候,触发第一个触发器,使得按钮还原。

接下来说多条件触发器。


多条件触发器

为什么会出现这个东西?

其实看了上面的代码,你应该发现了,你为了一个IsMouseOver事件,写了两个触发器,这样代码实在是太多了。

所以,有更好的解决方案,那就是“多条件触发器”。

“多条件触发器”顾名思义就是多条件,直接上代码:

<Window.Resources>
    <Style x:Key="defaultStyle" TargetType="Button">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="40"/>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsFocused" Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="Foreground" Value="Red"/>
                </MultiTrigger.Setters>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
    </StackPanel>
</Grid>

嘛,先不介绍上一套代码的简化版,继续看事件触发器。


事件触发器

直接上代码:

<Window.Resources>
    <Style x:Key="defaultStyle" TargetType="Button">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="40"/>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2"
                                             Storyboard.TargetProperty="FontSize"
                                             To="30"
                                             >
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
        <Button Style="{StaticResource defaultStyle}"   Content="Hello"/>
    </StackPanel>
</Grid>

不解释,自己测试,因为你有Winform+Web Design的基础,也没啥好说的。


下一篇:WPF设计之控件模板

This article was last edited at 2020-12-27 19:14:21

* *