Как изменить изображение на изображении Наведите курсор мыши в UWP - PullRequest
Новая
       11

Как изменить изображение на изображении Наведите курсор мыши в UWP

0 голосов
/ 15 марта 2019

На панели инструментов у меня есть изображение, например - ManageUser.png.поэтому при наведении курсора мыши я хочу изменить изображение (замените изображение на MnageUserBright.png) в UWP 

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

У меня есть только код изображения.

Ответы [ 2 ]

1 голос
/ 16 марта 2019

Спасибо @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

0 голосов
/ 16 марта 2019

Вы можете использовать событие 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, чтобы вернуть исходное изображение обратно.

...