UI

Detecting when the On-screen Keyboard is Active

When your Windows 8/8.1 app is running on a tablet and accepting keyboard input there is a fair chance that the software on-screen keyboard is being used. This is all well and good, except that the on-screen keyboard can take up a huge amount of screen real estate, especially in landscape mode (around 50% of the screen!).

So to make sure your app still works well with half of the screen taken up by a keyboard you should detect the on-screen keyboard just as you would check for other ways your app’s size on screen could change (e.g. snapping, switching between portrait and landscape, etc.).

It’s very easy to do. You just add handlers to detect when the keyboard goes up and down:


AddHandler InputPane.GetForCurrentView.Showing, AddressOf KeyboardUp
AddHandler InputPane.GetForCurrentView.Hiding, AddressOf KeyboardDown

Now when the keyboard is raised the KeyboardUp method will be called, and when the keyboard goes down your KeyboardDown method will be called. In these methods you can make any necessary changes to the UI to suit the different screen layout, e.g.:


Private Sub KeyboardUp()
 ' make the main grid row shorter
 LayoutRoot.MainGridRow.Height = New GridLength(100)
End Sub

Private Sub KeyboardDown()
 ' return the main grid row to full height
 LayoutRoot.MainGridRow.Height = New Gridlength(300)
End Sub

And if you make full use of view states you can of course trigger a completely different view for when the keyboard is up!

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.