Selecting image from StackPanel C# UWP (Adding action listener to UIElement and Image to UIElement)

Question

I am using C# and I am creating UWP app. I am using Windons.Ui.Xaml.Controls.Image and I have created follwoing code which lists my images

UxHelpers.DispatchToASTAThread(
async () =>
{
    imageIndex++;
    StackPanel stackPanel = new StackPanel();
    stackPanel.Children.Add(image);           
}
this.Results.Children.Add(stackPanel);
 }).Forget();

This is in for loop, and I want when user clicks on certain image to be able to save it.

I have code for saving, I just don't know how to add mouse listener to each image, so that it is marked when I move mouse over it (So user knows that by clicking on it something will happen) and when he clicks I want it to call my function with this pictures index....

I have looked at UIElement but i still can't figure it out.

Thanks!!

Answer 1

We can add the PointerEntered event to the Image control that when the user move mouse over it then we can change the UI. Then we can add the Tapped event to the Image control, if the user click on it, it will be fired.

To get the index of the Image, we can set the index to the Name property of the Image.

For example:

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    StackPanel stackPanel = new StackPanel();
    for (int i = 0; i < 3; i++)
    {
        Windows.Storage.Streams.IRandomAccessStream random = await Windows.Storage.Streams.RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/sun2set.jpg")).OpenReadAsync();
        Image image = new Image();
        BitmapImage bitmapImage = new BitmapImage();
        StackPanel mystackPanel = new StackPanel();
        image.Name = i.ToString();
        bitmapImage.SetSource(random);
        image.Source = bitmapImage;
        mystackPanel.Children.Add(image);
        image.PointerEntered += Image_PointerEntered;
        image.PointerExited += Image_PointerExited;
        stackPanel.Children.Add(mystackPanel);
    }
    this.Results.Children.Add(stackPanel);
}

private void Image_PointerExited(object sender, PointerRoutedEventArgs e)
{
    var image = sender as Image;

    var parent = VisualTreeHelper.GetParent(image) as StackPanel;
    parent.BorderBrush = new SolidColorBrush(Colors.Red);
    parent.BorderThickness = new Thickness(0);
    image.Tapped -= Image_Tapped;
}

private void Image_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    var image = sender as Image;
    Debug.WriteLine("The" + image.Name + "is Selected!");
    var parent = VisualTreeHelper.GetParent(image) as StackPanel;
    parent.BorderBrush = new SolidColorBrush(Colors.Red);
    parent.BorderThickness = new Thickness(5);
    image.Tapped += Image_Tapped;
}

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    var image = sender as Image;
    //download the image
}