Reader Level:
ARTICLE

A Different Panoramic Effect in WP7 - Inverted Panorama

Posted by Ibrahim Ersoy Articles | Windows Phone September 08, 2012
You already know that Panorama works horizontally. What about the opposite? I'm here to prove it is possible.
  • 0
  • 0
  • 3326
Download Files:
 

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!

COMMENT USING

Trending up