locked
Blank app Implementation of snapped view RRS feed

  • Question

  • Hi,

    I want to implement snapped view in a blank application project, can anyone give me the steps to implement it in the same?

    Friday, February 8, 2013 1:50 AM

Answers

  • For a blank application project you have to add some VisualState Management to your page.

    You can do this by replacing the MainPage with a Basic Page which adds a bunch of other helper files that include VisualState management

    or

    you can add VisualState management yourself easily by:

    1. Add the following to your MainPage Xaml file at the bottom of the outer grid.

            <!--Change layout according to visual state-->
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="Full"/>
                    <VisualState x:Name="Filled"/>
                    <VisualState x:Name="Portrait"/>                  
                    <VisualState x:Name="Snapped"/>               
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

    2. Add the following event handler to your MainPage cs file.

            //Handle view state changes here
            void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
            {
                switch (Windows.UI.ViewManagement.ApplicationView.Value)
                {
                    case Windows.UI.ViewManagement.ApplicationViewState.Filled:
                        VisualStateManager.GoToState(this, "Filled", false);
                        break;
                    case Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape:
                        VisualStateManager.GoToState(this, "Full", false);
                        break;
                    case Windows.UI.ViewManagement.ApplicationViewState.Snapped:
                        VisualStateManager.GoToState(this, "Snapped", false);
                        break;
                    case Windows.UI.ViewManagement.ApplicationViewState.FullScreenPortrait:
                        VisualStateManager.GoToState(this, "Portrait", false);
                        break;
                    default:
                        break;
                }
            }

    3. Save the changes and open your project in Blend

    4. In the upper left corner find and select the States tab

    5. Click on Snapped.  Notice that the designer shows that you are now in Record mode.  Any changes you make to the layout will be recorded and added to the Xaml VisualState for Snapped.  You can select and grab objects on the designer or select objects you want to change in the Objects and Timeline window and make changes in the Properties window.

    6. After making the changes, turn recording off by clicking the little red button to the left of 'Snapped' or in the upper left corner of the designer.

    7. Check the Xaml to see the exact changes as animations.

    8. Look at your changes by selecting the Device tab and clicking on the appropriate view.

    Here is a Xaml of a blank page with a text block in which the text size is reduced when in Snapped view.

    <Page
        x:Class="HelpWithViewState.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelpWithViewState"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            
            <TextBlock x:Name="textBlock" FontSize="20">Hello World</TextBlock>
            
            <!--Change layout according to visual state-->
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="Full"/>
                    <VisualState x:Name="Filled"/>
                    <VisualState x:Name="Portrait"/>                  
                    <VisualState x:Name="Snapped">
                    	<Storyboard>
                    		<DoubleAnimation Duration="0" To="12" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                    	</Storyboard>
                    </VisualState>               
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>

    • Proposed as answer by jrboddie Friday, February 8, 2013 2:51 AM
    • Marked as answer by Min ZhuMember Monday, February 18, 2013 7:39 AM
    Friday, February 8, 2013 2:48 AM