WPF 按键图标缩放动画示例

html 复制代码
	
    <mah:MetroWindow.Resources>
        <Storyboard x:Key="ExpandStoryboard">
            <DoubleAnimation
                                Storyboard.TargetName="CtrlGrid"
                                Storyboard.TargetProperty="Width"
                                From="0"
                                To="100"
                                Duration="0:0:0.2"
                                />
        </Storyboard>

        <Storyboard x:Key="CollapseStoryboard">
            <DoubleAnimation
                                Storyboard.TargetName="CtrlGrid"
                                Storyboard.TargetProperty="Width"
                                From="100"
                                To="0"
                                Duration="0:0:0.2"
                                 />
        </Storyboard>

        <Storyboard x:Key="IconStoryboard">
            <DoubleAnimation
                                Storyboard.TargetName="PackIconFileIcon"
                                Storyboard.TargetProperty="(iconPacks:PackIconFileIcons.RotationAngle)"
                                From="0"
                                To="360"
                                Duration="0:0:0.3"
                               />
        </Storyboard>
    </mah:MetroWindow.Resources>

 <ToggleButton x:Name="toggleBtn" VerticalAlignment="Top" Width="30" Height="30" Margin="0,0,0,0">
            <iconPacks:PackIconVaadinIcons Kind="DotCircle" x:Name="PackIconFileIcon" Foreground="#FF6AFCFF" >
                <iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                    <Point X="0.5" Y="0.5"/>
                </iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                <iconPacks:PackIconVaadinIcons.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1" x:Name="iconScaleTransform" />
                </iconPacks:PackIconVaadinIcons.RenderTransform>
            </iconPacks:PackIconVaadinIcons>
            <ToggleButton.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="PackIconFileIcon" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="#FF97FFBA" Duration="0:0:0" />
    
                            <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1.5" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1.5" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                            </DoubleAnimationUsingKeyFrames>-->
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="PackIconFileIcon" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="#FF6AFCFF" Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                
                <EventTrigger RoutedEvent="UIElement.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="1.5" Duration="0:0:0.25" Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                            <DoubleAnimation To="1.5" Duration="0:0:0.25" Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)"/>
                        
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="UIElement.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="1" Duration="0:0:0.25" Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
                            <DoubleAnimation To="1" Duration="0:0:0.25" Storyboard.TargetName="iconScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ToggleButton.Triggers>
        </ToggleButton>
相关推荐
ifeng09182 小时前
HarmonyOS实战项目:AI健康助手(影像识别与健康分析)
人工智能·华为·wpf·harmonyos
Aevget2 小时前
界面控件Telerik UI for WPF 2025 Q3亮点 - 集成AI编码助手
人工智能·ui·wpf·界面控件·ui开发·telerik
张人玉2 小时前
WPF 数据绑定与转换器详解
c#·wpf·light
主宰者2 小时前
WPF CalcBinding简化判断逻辑
c#·.net·wpf
Aevget2 小时前
DevExpress WPF中文教程:Data Grid - 如何使用虚拟源?(五)
wpf·界面控件·devexpress·ui开发·.net 10
就是有点傻12 小时前
使用PaddleOCRSharp大模型精选文字识别
c#
LeonDL16813 小时前
【通用视觉框架】基于C#+Winform+OpencvSharp开发的视觉框架软件,全套源码,开箱即用
人工智能·c#·winform·opencvsharp·机器视觉软件框架·通用视觉框架·机器视觉框架
数据的世界0114 小时前
技术变革:为何C#与.NET是未来的开发方向
java·c#·.net
大龄Python青年14 小时前
C#快入教程:Linux安装.NET
linux·c#·.net
我是唐青枫15 小时前
C#.NET Random 深入解析:随机数生成原理与最佳实践
c#·.net