Developing for Modern Windows

Tips, tricks, and guides for developing on modern Windows platforms

Adjust your Windows 8.1 App’s Layout when the Screen Size Changes

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.

Detecting a Screen Layout Change

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.

To detect when your app’s on-screen size changes you need to add a handler to notify your app. But this isn’t enough, because if you change the screen size and then navigate to a new page the new page will not detect the change in width because it happened while you were on the previous page. So you also need to check the screen size when your app navigates to a page.
So the things we need to add to our pages are:
  • A way to detect the current screen width
  • A method to alter the page UI layout to suit the current width
  • A way to detect when the screen width changes.

Detect the Current Screen Width

currentScreenWidth = Me.Frame.ActualWidth

Me.Frame.ActualWidth gives you the current width of your app on the screen. It's that easy!

Alter the Page Layout to Suit the Current Width

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)
Else
LeftMargin.Width = New GridLength(120)
RightMargin.Width = New GridLength(120)
End If
End Sub

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.

Detect when the Screen Width Changes

Your pages need to know when to adjust their layout to match the screen width. You need to use two different approaches:

  • Detect the screen size when a page is first navigated to
  • Detect when the current page size changes.

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
ChangeScreenLayout(Me.Frame.ActualWidth)
End Sub

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)
ChangeScreenLayout(e.Size.Width)
End Sub

One More Thing

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)
MyBase.OnNavigatedFrom(e)
RemoveHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged
End Sub

That's everything. Add the above code to your page(s), then customise the code for rearranging your own UI.

Tags: , , ,

One Response to “Adjust your Windows 8.1 App’s Layout when the Screen Size Changes”

  1. […] Adjust your Windows 8.1 App’s UI when the Screen Size Changes […]

Leave a Reply

Your email address will not be published.