Post
Ask Question

A Different Panoramic Effect in WP7 - Inverted Panorama

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:

Panorama-Project-in-Blend.jpg

Then choose LayoutRoot and spin it to left or right:

  LayoutRoot-Panorama-Project-in-Blend.jpg


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.

goal for-inverted-panorama.jpg

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!


Similar Articles