Wpf 自定义鼠标悬浮(Trigger) 控件缩放动画（ScaleTransform）RenderTransform图形旋转，缩放

最新推荐文章于 2025-04-16 11:46:38 发布

程序猿人大林

最新推荐文章于 2025-04-16 11:46:38 发布

阅读量3.4k

点赞数 6

文章标签： wpf 动画 microsoft

本文链接：https://blog.youkuaiyun.com/weixin_41440306/article/details/121825885

版权

此博客介绍了如何在WPF中利用样式和触发器为UI元素创建悬停时的缩放动画效果。通过设置`DockPanel`、`Border`和`TextBlock`的属性，并定义一个`Style`，当鼠标悬停在元素上时，元素会以平滑的动画方式放大1.2倍。这种效果可以增强用户体验并提升应用的视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上效果图,在需要使用的控件上给定

<DockPanel HorizontalAlignment="Left" Margin="0 32 0 0" Style="{StaticResource UIElementHover}">

  <Border Width="120" Height="120" CornerRadius="120" Style="{StaticResource UIElementHover}">

 <TextBlock FontSize="20" Text="DaskBoard" FontWeight="Bold" Style="{StaticResource UIElementHover}"></TextBlock>

  <Style x:Key="UIElementHover" TargetType="FrameworkElement">
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5">
                </Setter>
                <Setter Property="Cursor" Value="Hand">
                    
                </Setter>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform   CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" 
                                                 BeginTime="00:00:00" Duration="00:00:01"
                                                  To="1.2" 
                                                >
                                        <DoubleAnimation.EasingFunction>
                                            <PowerEase Power="1" EasingMode='EaseIn'></PowerEase>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" 
                                                 BeginTime="00:00:00" Duration="00:00:01"
                                                To="1.2" >
                                        <DoubleAnimation.EasingFunction>
                                            <PowerEase Power="1" EasingMode='EaseIn'></PowerEase>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" 
                                                 BeginTime="00:00:00" Duration="00:00:01"
                                                >
                                        <DoubleAnimation.EasingFunction>
                                            <PowerEase Power="1" EasingMode='EaseOut'></PowerEase>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" 
                                                 BeginTime="00:00:00" Duration="00:00:01"
                                                >
                                        <DoubleAnimation.EasingFunction>
                                            <PowerEase Power="1" EasingMode='EaseInOut'></PowerEase>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>