Tips, tricks, and guides for developing on modern Windows platforms
Windows 8.1 has a new model for how much screen real estate apps can use. In Windows 8.0 your app could be in one of four states (landscape full screen, landscape ‘filled’, landscape snapped, and portrait full screen).
In Windows 8.1, app size can be changed to any size the user chooses (though the developer can set the minimum size), so your apps need to cope with unexpectedly having their size (specifically width) changed at any time.
All you need to be able to do to manage your app’s layout is detect whenever your app’s on-screen width changes, and then adjust the layout in whatever ways you need to in order to fit your app into its new size.
currentScreenWidth = Me.Frame.ActualWidth
Me.Frame.ActualWidth gives you the current width of your app on the screen. It's that easy!
Once you have the current screen width you can make any needed adjustments to your UI based on that information. The specific changes depend on your app, but a method like the following is what you need:
Private Sub ChangeScreenLayout(newWidth As Integer)
If (newWidth <= 600) Then
LeftMargin.Width = New GridLength(25)
RightMargin.Width = New GridLength(25)
LeftMargin.Width = New GridLength(120)
RightMargin.Width = New GridLength(120)
The above code is just the tip of the iceberg - you can of course run all kinds of modifications on your UI to suit the new screen size, and you can have as many different layouts as your app needs. In this example we will just change the margins in the app page so that when the app is less than 600 pixels wide the margins get a bit slimmer to ensure enough content fits on the page.
Your pages need to know when to adjust their layout to match the screen width. You need to use two different approaches:
As you may have figured out from the code already mentioned, the first approach simply calls the ChangeScreenLayout method using the current screen width as the newWidth value. Just place the following method into your page to run the ChangeScreenSize method whenever the page is loaded:
Public Sub Page_Loaded() Handles Me.Loaded
The other approach is to detect when the screen width changes. To achieve this add an event handler to detect the Window.Current.SizeChanged event, and within the event handler run the ChangeScreenLayout method. Add the following code to the OnNavigatedTo method:
AddHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged
then add a method to call when the event is detected:
Private Sub Current_SizeChanged(sender As Object, e As Windows.UI.Core.WindowSizeChangedEventArgs)
Because you added a handler (to detect the screen size change) when the page is navigated to, you need to remove that handler when the page is navigated from. Add the following method to your page:
Protected Overrides Sub OnNavigatedFrom(e As NavigationEventArgs)
RemoveHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged
That's everything. Add the above code to your page(s), then customise the code for rearranging your own UI.