Panorama control in Windows Phone

Introduction:
Windows Phone comes with a number of controls for display. Among them the Panorama Control is one the new controls for user interaction and display.

Description:
Panorama Control spans beyond the screen and helps user to chose from a number of panorama items. Each panorama item can consists of Grids, Stack Panels and other Phone controls. Image applied to Panorama as background spans across all the panorama items. Only one panorama item is visible at a time and user can make selection from it. A swipe gesture gives the next or previous Panorama item.

Below is a code snippet for creating a Panorama item:

<phone:PhoneApplicationPage
    x:Class="PanormaExample.MainPage"
    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"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <phone:Panorama Title="my application" >
            <phone:Panorama.Background>
                <ImageBrush Stretch="Fill"
                            ImageSource="/Assets/Background.jpg" />
            </phone:Panorama.Background>
            <!--Panorama item one-->
            <phone:PanoramaItem Header="First Item">
                <Grid>
                    <TextBlock FontSize="25" Foreground="Bisque" FontWeight="ExtraBold"  VerticalAlignment="Center" HorizontalAlignment="Center">
                        Swipe for second Panorma Item
                    </TextBlock>
                </Grid>
            </phone:PanoramaItem>
            <!--Panorama item two-->
            <phone:PanoramaItem Header="Second Item">
                <Grid>
                    <TextBlock FontSize="25" Foreground="Yellow" FontWeight="ExtraBold"  VerticalAlignment="Center"
                               HorizontalAlignment="Center">
                        Swipe for Third Panorma Item
                    </TextBlock>
                </Grid>
            </phone:PanoramaItem>
            <!--Panorama item three-->
            <phone:PanoramaItem Header="Third item">
                <Grid>
                    <TextBlock FontSize="25" Foreground="Lime" FontWeight="ExtraBold"   VerticalAlignment="Center"
                               HorizontalAlignment="Center">
                        Swipe for First Panorma Item
                    </TextBlock>
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>        
    </Grid>
</phone:PhoneApplicationPage>

Below is the snap shot of the output:

Panorama

Conclusion:
With Panorama you can create controls with multiple pages and available only with just a swipe on the screen. The most common example is the Music application of Windows Phone were one can select from Albums, Artists, Recently Played and a number of other options.

Written By: Anobik Dey, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s