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

Question

On Dashboard i have an image e.g - ManageUser.png. so on mouse over i want to change image(replace image to MnageUserBright.png) in UWP
<Image Source="manage_user.png" Height="120" Width="120" Tapped="ManageUserPage" Margin="176,31,534,84" Grid.Row="1" />
i have just image code.

Answer 1

Thank #Rafeal and I suggest that use all the xaml code to do it.
The first thing is installing a Microsoft.Xaml.Behaviors.Uwp.Managed. How to install see: https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/
This way is using the Storyboard to change the Image source when the user mouse enter.
Define two storyboards.
<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>
And put the image to the Border.
<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>
Using the event trigger.
<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>
The code is all write in xaml. And you should replace the source.
<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>
The code in github https://github.com/lindexi/lindexi_gd/tree/7f0dcf62f38eda513b3455658b9dffd6c4974847/PernemtanowsearDeerawkurkosa

Answer 2

You can use the PointerEntered event on that <Image> element so when the user moves their mouse pointer or finger over the image, you can trigger some code to replace the 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);
}
When the user moves their pointer out of your image, you will need to do the opposite by handling the PointerExited event to set the original image back.