Quick tips for porting a XAML Split App to Windows 8.1

If you have an app in the Windows Store already, and you used the Split App (XAML) template as the basis of your app, you’ll notice that the VS2013 compiler complains when you retarget the project to Windows 8.1 and build it:

Warning: 'Windows.ApplicationModel.DataTransfer.DataPackage.SetUri(System.Uri)' is obsolete: 'SetUri may be altered or unavailable for releases after Windows 8.1. Instead, use SetWebLink or SetApplicationLink.'

Fix: This one’s easy. The share API has been expanded to handle app links and web links, which means the SetUri method has been split into SetApplicationLink and SetWebLink.

For my app, it’s a one-line fix, so

 request.Data.SetUri( selectedItem.url );

becomes

 request.Data.SetWebLink( selectedItem.url );

Warning: The other warnings are caused by ApplicationView:

'Windows.UI.ViewManagement.ApplicationViewState' is obsolete: 'ApplicationViewState may be altered or unavailable for releases after Windows 8.1. Instead, query for window layout sizes directly.'

'Windows.UI.ViewManagement.ApplicationView.Value' is obsolete: 'Value may be altered or unavailable for releases after Windows 8.1. Instead, query for window layout sizes directly.'

ApplicationView is deprecated, because in Windows 8.1, snap view has been replaced with the 50-50 view, which lets you slide the “gutter” that divides two apps continuously across the screen. This gives you greater freedom to adapt your layout to different app window sizes, but it means you need to update the layout logic in LayoutAwarePage.cs and SplitPage.xaml.

Fix: An easy approach is to modify the LayoutAwarePage.DetermineVisualState method so its output is compatible with the VisualStateGroup elements in SplitPage.xaml.

 protected virtual string DetermineVisualState() 
  { 
     string visualState = "FullScreenLandscape"; 
     var windowWidth = Window.Current.Bounds.Width; 
     var windowHeight = Window.Current.Bounds.Height;
  
     if( windowWidth <= 500 ) 
     { 
         visualState = "Snapped" + "_Detail"; 
     } 
     else if( windowWidth <= 1366 ) 
     { 
          if( windowWidth < windowHeight ) 
         { 
             visualState = "FullScreenPortrait" + "_Detail"; 
         } 
         else 
         { 
             visualState = "FilledOrNarrow"; 
          }
     }
  
     return visualState;
 }

The SplitPage.xaml visual states add to the default values in the ApplicationViewState enum: Snapped_Detail, FullScreenPortrait_Detail, and FilledOrNarrow, so the modified DetermineVisualState method returns those values.

This approach lets you re-use the layout you defined in SplitPage.xaml, but you’ll need to tweak at least the Snapped_Detail VisualState element to set the primary column’s width to 500 from 320, which was the snapped value:

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width"> 
     < DiscreteObjectKeyFrame KeyTime="0" Value="500"/> 
 </ObjectAnimationUsingKeyFrames>

You’ll probably need to adjust the other VisualState elements for the specific layout of your app, but these quick changes should get you in the driver’s seat.

Technorati Tags: Windows,Windows SDK,Windows 8,XAML,Windows Store app,C#