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

感谢@Rafeal，我建议使用所有xaml代码来实现。

第一件事是安装Microsoft.Xaml.Behaviors.Uwp.Managed。如何安装，请参见：https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/

这种方法是在用户鼠标进入时使用情节提要来更改图像源。

定义两个情节提要。

       <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

中的代码

Answer 2

您可以在该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事件来将原始图像放回原处。

如何在UWP中将图像悬停在图像上

2 个答案: