当前位置:网站首页>WPF 属性触发器
WPF 属性触发器
2022-07-19 16:50:00 【小慧哥】
今天做了一个属性触发器的效果
我按照属性触发器这么写 发现 动画效果不怎么好 没有动的感觉
<Style x:Key="PathStyle1" TargetType="{x:Type Path}">
<Setter Property="Fill" Value="#c8c8c8"/>
<Setter Property="Stroke" Value="#c8c8c8"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="#FF1AB394"/>
<Setter Property="Stroke" Value="#FF1AB394"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="90"></RotateTransform>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
在Path 后面增加了一个Grid 用Grid的事件触发器 来触发效果
前台
<Grid x:Name="grid" Background="White" Width="16" Height="16" Margin="0,17,32,0" HorizontalAlignment="Right" VerticalAlignment="Top">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding CMDCloseClick}"></i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<Path x:Name="path" Panel.ZIndex="999" Data="M220.8 812.8l22.4 22.4 272-272 272 272 48-44.8-275.2-272 275.2-272-48-48-272 275.2-272-275.2-22.4 25.6-22.4 22.4 272 272-272 272z" Height="16" Stretch="Fill" Width="16" Style="{DynamicResource PathStyle1}" Fill="#FFC8C8C8" Stroke="#FFC8C8C8" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
动画
<Window.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF1AB394"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF1AB394"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF1AB394"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFC8C8C8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0" Value="#FF1AB394"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFC8C8C8"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
触发器
<Window.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="grid">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="grid">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</Window.Triggers>
效果OK
边栏推荐
- [problem solving] the port number is occupied
- Matlab与1stOpt多元非线性回归
- 云上机器CLOSE_WAIT过多的原因和解决办法
- Batch download data -- Take TRMM data as an example
- Delete the elements of array B in MATLAB array a
- 行业首个「视频直播技术最佳实践图」发布!
- go-fastDFS 分布式文件系统搭建(实现梳理)
- cobbler離線安裝
- ASP function split() corresponds to PHP function explode() string variable array
- matlab获取原数组在排序后数组中的位置
猜你喜欢
Implementation scheme of importing thinkphp6 million xlsx tables into the database
Interviewer: what are the three cache update strategies of redis & MySQL?
LeetCode 剑指offer刷题笔记
mysql远程登录
Map和Set
Matlab填充多边形
Multithreaded FTP project (4) -- MySQL database + FTP
行业首个「视频直播技术最佳实践图」发布!
MySQL migration gold warehouse database primary key, index loss solution
Matlab regression analysis obtains the coefficient, P value and R2 of predictive variables (only one line of code)
随机推荐
Browser compatibility problems and common solutions
Delete the elements of array B in MATLAB array a
150. 逆波兰表达式求值
【YOLOv5实战3】基于YOLOv5的交通标志识别系统-模型训练
Matlab与1stOpt多元非线性回归
MATLAB data writing file common functions
go语言环境搭建和样例
Draw scatter density diagram with MATLAB
sqoop跑数模板保存
ASP function split() corresponds to PHP function explode() string variable array
【Codeforces1706A】 Another String Minimization Problem
Matlab calculates the distance between two points (longitude and latitude coordinates) (large arc method and haversine method)
【问题解决】端口号被占用问题
动态内存管理
Interviewer: what are the three cache update strategies of redis & MySQL?
Go language - Testing and performance
Go fastdfs distributed file system construction (implementation sorting)
Matlab绘制散点密度图
lpad()函数和(row_number()over( order by )+ ...)
单片机调试 — Event Recorder 的使用