WPF 按键图标缩放动画示例

	
    <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>

相关推荐

  1. WPF 按键图标动画示例

    2024-06-07 10:22:04       27 阅读
  2. WPF —— 动画变换

    2024-06-07 10:22:04       40 阅读
  3. WPF 按键图标转动效果示例

    2024-06-07 10:22:04       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-07 10:22:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-07 10:22:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-07 10:22:04       87 阅读
  4. Python语言-面向对象

    2024-06-07 10:22:04       96 阅读

热门阅读

  1. 推箱子小游戏C++

    2024-06-07 10:22:04       38 阅读
  2. Hadoop文件存储格式

    2024-06-07 10:22:04       28 阅读
  3. IDM的优势

    2024-06-07 10:22:04       27 阅读
  4. docker错误

    2024-06-07 10:22:04       27 阅读
  5. golang通道(chan)选择(select)与关闭(close)使用示例

    2024-06-07 10:22:04       33 阅读
  6. vue3中作用域插槽

    2024-06-07 10:22:04       32 阅读
  7. Stable Diffusion:多领域应用的创新引擎

    2024-06-07 10:22:04       30 阅读
  8. npm发布自己的插件包

    2024-06-07 10:22:04       29 阅读
  9. 从零手写实现 nginx-09-compress http 文件压缩

    2024-06-07 10:22:04       24 阅读
  10. 从零手写实现 nginx-10-sendfile 零拷贝 zero-copy

    2024-06-07 10:22:04       24 阅读