Show image in Full screen

问题:

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 ?

回答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);
}

回答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.