Developers, There Are UI Updates for You in Windows 8.1

  • Article

bg182409_8_1_Preview_hero_1366x400(en-us,MSDN_10)With the RTM bits now available for MSDN subscribers, as you would have read in Jonathan Rozenblit’s editorial in the latest MSDN eNews newsletter, Windows 8.1 is here and should not be ignored.

For those of you who already have some experience developing Windows 8 apps, I compiled a (partial) list of changes that I find notable on the UI side. For those that haven’t, the below are things that you should absolutely not think twice about implementing in your apps.

The best part about these changes - Visual Studio 2013 now includes new and updated controls for XAML/C# and HTML/JavaScript to make these UI updates simple to implement. So let’s to through them:

Tiles

  • Tiles now have two new sizes, while older ones has been renamed. The new sizes : “Small” and “Large”, while “Normal” was renamed to “Medium”.
  • This does not mean that your old code would stop working, as the older names are still mapped to new ones in the enums for backward compatibility, but if you want to support the newer tile types, you would have to update your code.
  • The only restriction is that in order to support the Large tiles, you will also have to support Wide tiles in you app.

Multiple windows/No more snap-view

  • Snap view was replaced by a variable size window mechanism allowing the user to have multiple apps and windows running on the screen at the same time, with different widths, while an app may also spawn other apps and share the available space with it.
  • On the code side, this means that the older code dealing with snap-view will now render obsolete, such as: snap-view visual elements in XAML which are not required anymore, and ApplicationView.Value property, ApplicationView.TryUnsnap method and ApplicationViewState enum references becoming obsolete in your C#/JavaScript.
  • You now have to the following new properties in the ApplicationView class: AdjacentToLeftDisplayEdge and AdjacentToRightDisplayEdge used to determine if your app window is adjacent to one of the edges, IsFullscreen and Orientation.

Search

  • The Search charm, while still there, will now act more of a global (computer-wide and/or web) search, and less of an in-app search. Visual Studio 2013 now offers new SearchBox control to be included in the apps themselves and used for in-app searches. Older, search-ready Windows 8 apps will still work with the search charm as they did before, but in order to search within the app the user would have to run it first and select it as target on the search target combobox. Not as intuitive as it used to be, or as using the in-app SearchBox control.

New/Improved Controls

  • Flyout: No need to use third party vendors’ flyout controls anymore. The Flyout control allows you to display a floating window which is not a dialog (unlike MessageDialog). Deriving from the Flyout control, you now also have the MenuFlyout and the SettingsFlyout controls.
  • Hub: New navigation control allowing you to to aggregate different types of information controls within one content control, therefore controlling the width of your app’s main screen. For example: Displaying a GridView of images in one hub section, a ListView of detailed information in another, and a form on a third section.
  • AppBar: Windows 8 already allowed you to include various controls in the app-bar, but Windows 8.1 offers the AppBarButton, AppBarToggleButton, and AppBarSeperator controls right out of the box to be used as part of the new CommandBar control within your app-bars. So, what is the difference? It’s all about styles and conventions. Using the new controls allows you to have your app-bars look and behave in a more conventional way while the CommandBar control automatically lays out the commands on the bar,
  • NavBar (HTML5/JavaScript only): A navigation list, similar to the AppBar, displaying hierarchical links at the top of each page.
  • BackButton (HTML5/JavaScript only): Similar to the back button that was already available in Windows 8 XAML code as part of the LayoutAware pages created by the wizard, this control allows the user to browse back through the page history up to the first page.
  • WebView: (HTML5/JavaScript only): Similar to the WebView control that was available in Windows 8 XAML, this control can be used to replace the use of iFrames to display external pages. The main advantage is in the content and browse history isolation.

As you can see, developing for Windows 8.1 is definitely not different than developing for Windows 8. It is actually easier. Migrating your apps to Windows 8.1 is mostly performed automatically, and you can make the required changes to support the new features in a fraction of the time it took you to develop your app originally. I would definitely suggest migrating your apps to allow your users to benefit from these improved UI capabilities.

While I did not cover all of the changes in Windows 8.1, and not even all of the changes to the UI, what you do have here are the ones that will make your development easier, while, and most importantly, enhancing the experience of your app for your users.