Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Windows Phone 8 : Orientation and the PhoneApplicationPage Class (part 4) - Animating Page Elements When the Page Orientation Changes

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
4/28/2014 1:34:08 AM

Animating Page Elements When the Page Orientation Changes

The VisualStateManager can be used to animate UIElements when the page orientation changes. This can be done by defining a set of VisualStateGroups corresponding to the PageOrientation values.

Each VisualStateGroup contains a collection of VisualState objects, each containing a collection of Storyboard objects that specify how an element’s properties change when the control is placed in a particular visual state.

In Listing 3, you see how the LandscapeRight VisualState includes a set of DoubleAnimations, which move various TextBlocks on the page to new positions when the page orientation changes.

LISTING 3. OrientationView.xaml (excerpt)


<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationStates">
            <!--Portrait up is the default state-->
            <VisualState x:Name="PortraitUp">
                <Storyboard />
            </VisualState>

            <VisualState x:Name="LandscapeRight">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="topLeft"
                        Storyboard.TargetProperty="
                            (UIElement.RenderTransform).(TranslateTransform.X)"
                        To="650" />
                    <!-- Content omitted. -->
                </Storyboard>
            </VisualState>
            <!-- Content omitted. -->
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <!-- Content omitted. -->

    <Grid x:Name="ContentGrid" Grid.Row="1">
        <TextBlock Text="Top-left corner" x:Name="topLeft"
                HorizontalAlignment="Left" VerticalAlignment="Top">
        <TextBlock.RenderTransform>
            <TranslateTransform/>
        </TextBlock.RenderTransform>
        </TextBlock>
        <!-- Content omitted. -->
    </Grid>
</Grid>


We subscribe to OrientationChanged event within the view’s constructor, as shown in the following excerpt:

OrientationChanged += (sender, args) => VisualStateManager.GoToState(
                                    this, args.Orientation.ToString(), true);

When the OrientationChanged event is raised, the VisualStateManager is directed to the state identified by the Orientation property of the OrientationChangedEventArgs (see Figure 3).

Image

FIGURE 3 TextBlocks are animated into position when page orientation changes.

Other -----------------
- Windows Phone 8 : Working with the Windows Phone Software (part 9) - Copying Phone Content to Your PC or Tablet
- Windows Phone 8 : Working with the Windows Phone Software (part 8) - Removing Multimedia Content - Removing Pictures from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 7) - Removing Multimedia Content - Removing a Video from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 6) - Removing Multimedia Content - Removing Music from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 5) - Using the Photo Interface
- Windows Phone 8 : Working with the Windows Phone Software (part 4) - Adding Content from Nonstandard Locations
- Windows Phone 8 : Working with the Windows Phone Software (part 3) - Adding an Album to Your Phone,Adding a Musical Artist to Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 2) - Adding Videos to Your Phone,Adding a Song to Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 1) - Adding Photos to Your Phone
- Windows Phone 8 : Configuring Basic Device Settings - Phone Storage
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer