A Different Panoramic Effect in WP7 - Inverted Panorama

You already know that Panorama works horizontally. What about the opposite? I'm here to prove it is possible.

In this article I will present an alternative for Panorama, instead of the classic way. I call this: Inverted Panorama.

Inverted Panorama 

The Inverted Panorama works vertically, the opposite of how the classic Panorama works (horizontally). This type of app can be made very easily using the Blend tool. If you trust your XAML knowledge you can do it in Visual Studio 2010.

Let's start!

Create a new Panorama Project in Blend:



Then choose LayoutRoot and spin it to left or right:

 

Here you have an Inverted Panorama but you need to edit some other settings such as removing Panorama headers and scaling the sizes of the Panorama according to the PhonePage. You can use Textblocks instead of using Panorama Headers and by adding Grids to the Panorama Items you've achieved your goal for an Inverted Panorama.



The Panorama works just like a classic Panorama but in the other direction.
 

<phone:PhoneApplicationPage           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"           xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"           xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"           xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"           xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"           mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"           x:Class="TersPanorama.MainPage"           d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"           FontFamily="{StaticResource PhoneFontFamilyNormal}"           FontSize="{StaticResource PhoneFontSizeNormal}"           Foreground="{StaticResource PhoneForegroundBrush}"           SupportedOrientations="Portrait" Orientation="Portrait"           shell:SystemTray.IsVisible="False">             <!--LayoutRoot is the root grid where all page content is placed-->           <Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5"            Margin="-17.009,17.021,17.009,16.997" UseLayoutRounding="False"d:LayoutRounding="Auto">                    <Grid.RenderTransform>                              <CompositeTransform Rotation="-89.841"/>                    </Grid.RenderTransform>                      <!--Panorama control-->                    <controls:Panorama Title="" Margin="-154.007,163.986,-156.015,-163.986"                              RenderTransformOrigin="0.5,0.5">                              <controls:Panorama.RenderTransform>                                       <CompositeTransform Rotation="-0.096"/>                              </controls:Panorama.RenderTransform>                              <controls:Panorama.Background>                                       <ImageBrush ImageSource="PanoramaBackground.png"/>                              </controls:Panorama.Background>                                <!--Panorama item one-->                              <controls:PanoramaItem Header="" RenderTransformOrigin="0.5,0.5">                                                                             <Grid Margin="0,-114,0,0">                                                 <Button Content="Click" HorizontalAlignment="Right"   Margin="0,150.654,101.323,0" VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5"Width="158.179">                                                           <Button.RenderTransform>                                                                    <CompositeTransform Rotation="89.891"/>                                                           </Button.RenderTransform>                                                 </Button>                                                 <TextBlock HorizontalAlignment="Right" Margin="0,193.876,-78.937,0"  TextWrapping="Wrap" Text="First Item" VerticalAlignment="Top" FontSize="64" RenderTransformOrigin="0.5,0.5">                                                           <TextBlock.RenderTransform>                                                                    <CompositeTransform Rotation="89.767"/>                                                           </TextBlock.RenderTransform>                                                 </TextBlock>                                                                                       </Grid>                              </controls:PanoramaItem>                                <controls:PanoramaItem Header="" RenderTransformOrigin="0.5,0.5">                                       <Grid Margin="0,-113.993,0,0">                                                 <TextBlock HorizontalAlignment="Right" Margin="0,241.821,-128.49,0"  TextWrapping="Wrap" Text="Second Item" VerticalAlignment="Top" FontSize="64" RenderTransformOrigin="0.5,0.5">                                                           <TextBlock.RenderTransform>                                                                    <CompositeTransform Rotation="89.767"/>                                                           </TextBlock.RenderTransform>                                                 </TextBlock>                                                                                                 <es:RegularPolygon InnerRadius="1" Margin="216.752,174.93,188.933,393.919"  PointCount="3" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">                                                           <es:RegularPolygon.Fill>                                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">                                                                              <GradientStop Color="White" Offset="0"/>                                                                              <GradientStop Color="#FF0079FF" Offset="1"/>                                                                    </LinearGradientBrush>                                                           </es:RegularPolygon.Fill>                                                           <es:RegularPolygon.RenderTransform>                                                                    <CompositeTransform Rotation="90.385"/>                                                           </es:RegularPolygon.RenderTransform>                                                 </es:RegularPolygon>                                                                                       </Grid>                              </controls:PanoramaItem>                    </controls:Panorama>           </Grid> </phone:PhoneApplicationPage>

I am quite sure that a Vertical, or Inverted Panorama, would be great for you to use!