How to popup Image using codes UWP

Question

I have an app load pictures from the internet I want to add a popup event to the image so the user can view the image by click on it ! I've try a lot of things to do that all that I can found is to resize the image or just view a content dialog with a text on it ! Here's my code :

    private static void view_tapped(object sender, TappedRoutedEventArgs e)
    {
        Viewbox image = sender as Viewbox;

        Panel parent = image.Parent as Panel;
        if (parent != null)
        {
            image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
            parent.Children.Remove(image);
            parent.HorizontalAlignment = HorizontalAlignment.Stretch;
            parent.VerticalAlignment = VerticalAlignment.Stretch;
            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);
        }
    }

I want it to look like that I want to keep my old image in the same place and create a new grid that have the same image like this image you can view it here

I can't use the xaml file because my image load from the web by code using a dll file !

Answer 1

The reason why the image doesn't display is because you don't add an Image control into the ViewBox to display the image content, you can try the following code to display an image in the popup.

private void Viewbox_Tapped(object sender, TappedRoutedEventArgs e)
{
    Viewbox image = sender as Viewbox;
    Image imageControl = new Image() { Width = 500, Height = 500 };
    Uri uri = new Uri("Your image URL");
    BitmapImage source = new BitmapImage(uri);
    imageControl.Source = source;
    image.Child = imageControl;
    Panel parent = image.Parent as Panel;
    if (parent != null)
    {
        image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
        parent.Children.Remove(image);
        parent.HorizontalAlignment = HorizontalAlignment.Stretch;
        parent.VerticalAlignment = VerticalAlignment.Stretch;
        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);
    }
}

By the way, please notice that the Popup is a control that displays content on top of existing content, within the bounds of the application window, and pay attention to the Remarks part,

Do not use a Popup if a Flyout, MenuFlyout, ToolTip or ContentDialog (MessageDialog for a Windows 8 app) is more appropriate.