0

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.

2 Answers 2

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

0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.