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

Question

在仪表板上我有一个图像，例如ManageUser.png。所以在鼠标上我想在UWP中更改图像（将图像替换为MnageUserBright.png）

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

我只有图像代码。

Answer 1

您可以在PointerEntered元素上使用<Image>事件，因此当用户将鼠标指针或手指移动到图像上时，您可以触发一些代码来替换图像：

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

public void OnPointerOverImage(Object sender, PointerRoutedEventArgs e)
{
    MyImage.Source = new BitmapImage("PathToYourNewImageFile", UriKind.Absolute);
}

当用户将指针移出图像时，您需要通过处理PointerExited事件来反向设置原始图像。

Answer 2

感谢@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中的代码