IT Bytes

I was having a chat about how Universal Apps work and how you might use the Visual State Manager to support both Win8 and Phone layouts in a single page.  Here goes;

1. Create a new Universal App
2. Cut MainPage.xaml from Windows 8.1 and paste it into Shared
3. Delete MainPage.xaml from Phone
4. Add a few simple Visual States to represent the screen sizes/orientations you want. In this case I have; MinimalOrPhonePortrailLayout, PortraitLayout, DefaultLayout

       <Grid>
           <VisualStateManager.VisualStateGroups>
               <VisualStateGroup>
                   <VisualState x:Name="DefaultLayout">
                   </VisualState>
                   <VisualState x:Name="MinimalOrPhonePortrailLayout">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Text" Storyboard.TargetName="SimpleMessage">
                               <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Phone Layout" />
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
                   <VisualState x:Name="PortraitLayout">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Text" Storyboard.TargetName="SimpleMessage">
                               <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Big Device Portrait" />
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
               </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <Grid>
               <TextBlock Name="SimpleMessage" Text="Hello Default World" TextTrimming="WordEllipsis" Foreground="Blue" FontSize="60"/>
           </Grid>
       </Grid>
   

5. Add a SizeChanged event to the page, this will be used to select the state

           public MainPage()
           {
               this.InitializeComponent();
   
               this.NavigationCacheMode = NavigationCacheMode.Required;
               this.SizeChanged += Page_SizeChanged;
           }
   
           void Page_SizeChanged(object sender, SizeChangedEventArgs e)
           {
               if (e.NewSize.Width < 520)
               {
                   VisualStateManager.GoToState(this, "MinimalOrPhonePortrailLayout", true);
               }
               else if (e.NewSize.Width < e.NewSize.Height)
               {
                   VisualStateManager.GoToState(this, "PortraitLayout", true);
               }
               else
               {
                   VisualStateManager.GoToState(this, "DefaultLayout", true);
               }
           }
   

6. Add changes to the StoryBoards of the Visual States, in this quick example the text in a TextBlock will be changed.

Here’s the results;

Hopefully you can see that it is possible to share a single page…although I’m not saying you should 😉