Skip to content

win10 uwp 鼠标移动到图片上切换图片

Updated: at 12:43,Created: at 06:43

如果只是在后台代码判断鼠标是否移动到图片上,修改图片,那么实在简单,但是如果后台代码写多了,就会如下面的注释说的一样。如果只是在 xaml 写所有代码能否在鼠标移动到图片上自动修改图片?在 UWP 有一个好用的库 Behaviors 库支持绑定事件,于是在鼠标进入图片的时候触发动画修改图片,在鼠标在图片范围外的时候触发动画修改图片

这个问题是堆栈的小伙伴问的,我看到有小伙伴通过后台代码控制图片,看起来代码一点都不好,我看到小伙伴发的注释,有一段代码很难维护,其实如果将本来 UI 做的代码都放在后台,那么这个代码会让开发者觉得不如删除代码自己写

Microsoft.Xaml.Behaviors.Uwp.Managed 提供了 EventTriggerBehavior 可以用来在触发了某个事件就调用里面的 Action 方法。同时有 ControlStoryboardAction 可以用来播放动画

将 Image 图片放在一个 Border 控件,这样可以在 Border 控件里面写动画修改 Image 的内容

在鼠标没有移动到图片上的时候,图片使用的是 Assets/click_cursor_mouse_pointer_select_121.7433808554px_1193623_easyicon.net.png 在鼠标移动到图片上使用的是 assets/click_cursor_mouse_pointer_select_128px_1225441_easyicon.net.png 请看代码

<Border>
<Border.Resources>
<Storyboard x:Key="EnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="assets/click_cursor_mouse_pointer_select_128px_1225441_easyicon.net.png" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ExitStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Assets/click_cursor_mouse_pointer_select_121.7433808554px_1193623_easyicon.net.png" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Border.Resources>
<Image x:Name="Image"
Source="Assets/click_cursor_mouse_pointer_select_121.7433808554px_1193623_easyicon.net.png"
Height="120" Width="120" Margin="176,31,534,84" />
</Border>

因为图片的 Source 只能通过 ObjectAnimationUsingKeyFrames 修改,于是看起来的动画写的代码还是很多

在使用 Behaviors 之前需要引用命名空间

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"

使用 EventTriggerBehavior 可以知道用户的鼠标移动到图标上,然后通过 ControlStoryboardAction 播放动画,请看代码

<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="PointerEntered">
<media:ControlStoryboardAction Storyboard="{StaticResource EnterStoryboard}" />
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="PointerExited">
<media:ControlStoryboardAction Storyboard="{StaticResource ExitStoryboard}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>

运行代码可以看到下面图片

我将所有代码放在 github 请看https://github.com/lindexi/lindexi_gd/tree/7f0dcf62f38eda513b3455658b9dffd6c4974847/PernemtanowsearDeerawkurkosa 直接下载代码,选择 x86 就可以运行

现在修改图片在鼠标移动到图片上就显示图片1如果没有鼠标移动到图片上就显示原来图片的代码可以全部写在 xaml 不需要后台代码

<Border>
<Border.Resources>
<Storyboard x:Key="EnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="assets/click_cursor_mouse_pointer_select_128px_1225441_easyicon.net.png" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ExitStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Assets/click_cursor_mouse_pointer_select_121.7433808554px_1193623_easyicon.net.png" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Border.Resources>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="PointerEntered">
<media:ControlStoryboardAction Storyboard="{StaticResource EnterStoryboard}" />
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="PointerExited">
<media:ControlStoryboardAction Storyboard="{StaticResource ExitStoryboard}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Image x:Name="Image"
Source="Assets/click_cursor_mouse_pointer_select_121.7433808554px_1193623_easyicon.net.png"
Height="120" Width="120" Margin="176,31,534,84" />
</Border>

xaml - How do I change an image on image Mouse over in UWP - Stack Overflow

如何在 UWP 使用 wpf 的 Trigger


知识共享许可协议

原文链接: http://blog.lindexi.com/post/win10-uwp-%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E5%88%B0%E5%9B%BE%E7%89%87%E4%B8%8A%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。 欢迎转载、使用、重新发布,但务必保留文章署名 林德熙 (包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我 联系