Enlarge image after click C# UWP

Question

How can I enlarge image in C# (exactly in UWP) after clicking on it? I tried few things:

1) I tried to add button, with image content, what I want to enlarge, and then I added event Click. But I don't know what I should to add into that code.

2) i also tried to add image directly to my XAML page, and I wanted to create Tapped event, but again, I don't know what I should to add into that code.

I just want to create a small photogallery, so after clicking on image thumbnail will be opened larger image.

Or if there is any possibility to add pdf files, you can write it too. That's another solution of my problem.

Answer 1

You could enlarge the Image by settings its RenderTransform property to a ScaleTransform:

 private void Image_Tapped(object sender, TappedRoutedEventArgs e)
 {
     Image image = sender as Image;
     image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
 }

---

<Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />

The ScaleX and ScaleY properties gets or sets the scaling factor. Please refer to the MSDN documentation for more information: https://msdn.microsoft.com/library/windows/apps/br242940?f=255&MSPPError=-2147217396

Looks good, but there is a problem. When I add more images, like into GridView, they are overlapping, and highlighted. Images can overlap, but image, which I click should be always on top...

You could put the tapped Image in a Popup then and then for example add it back to its original Panel when it is tapped again. I put together an example that should give you the idea and something to build on:

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    Image image = sender as Image;

    Panel parent = image.Parent as Panel;
    if (parent != null)
    {
        image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
        parent.Children.Remove(image);
        parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag = parent });
    }
    else
    {
        Popup popup = image.Parent as Popup;
        popup.Child = null;
        Panel panel = popup.Tag as Panel;
        image.RenderTransform = null;
        panel.Children.Add(image);
    }
}

---

<GridView SelectionMode="None" isItemClickEnabled="True">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>