如何在 UWP 中更改图像鼠标悬停上的图像

Posted

技术标签:

【中文标题】如何在 UWP 中更改图像鼠标悬停上的图像【英文标题】:How do I change an image on image Mouse over in UWP 【发布时间】:2019-08-06 12:28:20 【问题描述】:

在仪表板上我有一个图像,例如 - ManageUser.png。所以鼠标悬停我想在 UWP 中更改图像(将图像替换为 MnageUserBright.png)

<Image Source="manage_user.png" Height="120" Width="120"  Tapped="ManageUserPage"  Margin="176,31,534,84" Grid.Row="1"  />

我只有图像代码。

【问题讨论】:

【参考方案1】:

感谢@Rafeal,我建议使用所有 xaml 代码来完成。

首先是安装 Microsoft.Xaml.Behaviors.Uwp.Managed。安装方法见:https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/

这种方式是在用户鼠标进入时使用 Storyboard 来改变图像源。

定义两个故事板。

       <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"></DiscreteObjectKeyFrame>
                    </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"></DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames.KeyFrames>
               </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>

并将图像放到边框上。

    <Border>
        <Border.Resources>
            <Storyboard x:Key="EnterStoryboard">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                Value="manage_user.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/normal.png" />
                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>
        <Image x:Name="Image"
               Source="manage_user.png"
               Height="120" Width="120" Margin="176,31,534,84" />
    </Border>

使用事件触发器。

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

代码都是用xaml编写的。你应该替换源。

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

github中的代码https://github.com/lindexi/lindexi_gd/tree/7f0dcf62f38eda513b3455658b9dffd6c4974847/PernemtanowsearDeerawkurkosa

【讨论】:

【参考方案2】:

您可以在&lt;Image&gt; 元素上使用PointerEntered 事件,这样当用户将鼠标指针或手指移到图像上时,您可以触发一些代码来替换图像:

&lt;Image x:Name="MyImage" Source="manage_user.png" Height="120" Width="120" Tapped="ManageUserPage" Margin="176,31,534,84" Grid.Row="1" PointerEntered="OnPointerOverImage" /&gt;

public void OnPointerOverImage(Object sender, PointerRoutedEventArgs e)

    MyImage.Source = new BitmapImage("PathToYourNewImageFile", UriKind.Absolute);

当用户将他们的指针移出您的图像时,您需要通过处理PointerExited 事件来执行相反的操作以将原始图像设置回来。

【讨论】:

以上是关于如何在 UWP 中更改图像鼠标悬停上的图像的主要内容,如果未能解决你的问题,请参考以下文章

使用CSS - ExtJs进行鼠标悬停时如何更改面板上的图像?

将鼠标悬停在图像上时如何更改 SVG 的颜色?

鼠标悬停更改图像位置和大小

使用css将鼠标悬停在按钮上时如何更改站点背景图像?

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

Bootstrap - 在鼠标悬停时更改图标图像[重复]