Show image in Full screen

Question

I am working on Windows Phone 8 app and have a Image view like this in XAML:

<Image Name="Image"
       Grid.Row="0"
       Visibility="Collapsed"
       Width="Auto"
       Height="Auto"
       Tap="Image_tap"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Margin="1,1,1,1"/>

Now i have this event called Tap="Image_tap", when i tap on the image i want to show the same image in full screen without any bar on top and bottom, how to acheive this ?

Answer 1

Bottom bar is ApplicationBar and top bar is SystemTray. If you create a new page without the ApplicationBar and with SystemTray.IsVisible to false, you have a fullscreen page. Now, instead of having a Grid at the root, place just one Image and you can use that page as a fullscreen viewer.

<phone:PhoneApplicationPage
    x:Class="SimpleApp.FullScreenPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="False">

    <Image Name="myImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
         Stretch="Uniform"/>

</phone:PhoneApplicationPage>

In MainPage where you tap image:

private void myImg_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   string context = ((sender as Image).Source as BitmapImage).UriSource.ToString();
   NavigationService.Navigate(new Uri(String.Concat("/Page1.xaml?context=", context), UriKind.RelativeOrAbsolute));
}

In Fullscreenpage:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   string context = this.NavigationContext.QueryString["context"];
   myImage.Source = new BitmapImage(new Uri(context, UriKind.RelativeOrAbsolute));
   base.OnNavigatedTo(e);
}

Answer 2

An alternative approach, without passing the image details between pages, is to display a Popup:

private void HandleTapImage(object sender, GestureEventArgs e)
{
    var myPopup = new Popup
    {
        Child = new Image
        {
            Source = ((Image) sender).Source,
            Stretch = Stretch.UniformToFill,
            Height = Application.Current.Host.Content.ActualHeight,
            Width = Application.Current.Host.Content.ActualWidth
        }
    };
    myPopup.IsOpen = true; 
}

(Select Strech value best suited for your needs). With this approach however you have to manually hide ApplicationBar and SystemTray, if present, in the HandleTapImage method. You also have to take care of hiding the Popup and showing the bars again.