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:
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
