locked
Metro Apps - Screen Snapping RRS feed

  • Question

  • So i am almost complete with my metro app. What is left is the snap.

    How do i start the coding part of this?

    Does the code go in the XAML part or the XAML.CS part?

    How do i know when the app has been snapped,?

    Sunday, June 17, 2012 8:44 PM

Answers

  • Well if you are planning to make UI changes, I strongly suggest to implement the snapped state for your grid in your xaml as a visual state.

    You can use the ApplicationView to check for the snapped view and disable some functionality as well.

    ApplicationView.Value == ApplicationViewState.Snapped
    And the event to attach can be WindowSizeChanged to start your layout updates.

    Can Bilgin
    Blog CompuSight

    • Marked as answer by Min ZhuMember Tuesday, July 3, 2012 1:26 AM
    Sunday, June 17, 2012 9:53 PM
  • @Deci Studios,

    I suggest that you take a look at the Grid App application template that you can access by going File|New Project.  The LayoutAwarePage has fully implemented support for snapping by visual state as Can talks about.

    ...Stefan


    Sunday, June 17, 2012 10:02 PM
  • I found this:

    Tutorial: Create your first Metro style app using C++

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465045.aspx#adapting_to_different_layouts

    I know it is for C++, but it's section "Adapting to different layouts" is a good Reading on how to use visual states.


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

    Friday, June 22, 2012 10:07 AM
    Moderator

All replies

  • So i am almost complete with my metro app. What is left is the snap.

    How do i start the coding part of this?

    Does the code go in the XAML part or the XAML.CS part?

    How do i know when the app has been snapped,?

    Saturday, June 16, 2012 2:13 AM
  • Well if you are planning to make UI changes, I strongly suggest to implement the snapped state for your grid in your xaml as a visual state.

    You can use the ApplicationView to check for the snapped view and disable some functionality as well.

    ApplicationView.Value == ApplicationViewState.Snapped
    And the event to attach can be WindowSizeChanged to start your layout updates.

    Can Bilgin
    Blog CompuSight

    • Marked as answer by Min ZhuMember Tuesday, July 3, 2012 1:26 AM
    Sunday, June 17, 2012 9:53 PM
  • @Deci Studios,

    I suggest that you take a look at the Grid App application template that you can access by going File|New Project.  The LayoutAwarePage has fully implemented support for snapping by visual state as Can talks about.

    ...Stefan


    Sunday, June 17, 2012 10:02 PM
  • So if you were to actually do this, can you give me an example on how to implement that code in the XAML of a page?

    - Sorry, i am still learning about metro apps.

    Monday, June 18, 2012 12:00 PM
  • Here from the GrouppedItemsPage from the GridApp as Stefan was suggesting.

    <common:LayoutAwarePage>

    ....

    <Grid>

    ..... <VisualStateManager.VisualStateGroups> <!-- Visual states reflect the application's view state --> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <!-- The entire page respects the narrower 100-pixel margin convention for portrait --> <VisualState x:Name="FullScreenPortrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,90,0"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- The back button and title have different styles when snapped, and the list representation is substituted for the grid displayed in all other view states --> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogo" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageSubtitle" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnAppBarNew" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </common:LayoutAwarePage>



    Can Bilgin
    Blog CompuSight

    Monday, June 18, 2012 5:02 PM
  • I suggest you create a Grid App (XAML) project with Visual Studio 2012. Its GroupedItemsPage.xaml file is a good example on how to deal with snapping.


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

     
    Tuesday, June 19, 2012 1:06 PM
    Moderator
  • I don't understand why are we replicating the thread... you can simply post a new reply if you want your thread to appear as latest.

    (If a moderator maybe can combine these threads:  http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/f6203118-c93b-4729-b4a6-519fc5e5ae88)


    Can Bilgin
    Blog CompuSight

    Tuesday, June 19, 2012 1:21 PM
  • Is there a tutorial for this? I can't seem to get a handle on how the codes connects.

    I've seen this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx

    but i need more help.

    Thank You

    Thursday, June 21, 2012 5:37 AM
  • I found this:

    Tutorial: Create your first Metro style app using C++

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465045.aspx#adapting_to_different_layouts

    I know it is for C++, but it's section "Adapting to different layouts" is a good Reading on how to use visual states.


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

    Friday, June 22, 2012 10:07 AM
    Moderator