Windows Dev Center: New HTML and XAML controls in Windows 8.1

  • Article

Kristi Rasmussen here from the Windows Developer Content team. As you likely know, we released Windows 8.1 for general availability last month, and I want to tell you about some exciting new features for developers. Over the course of a few posts, I’ll dive in a little deeper from what was started here about the great things developers can do in Windows 8.1 with new and updated controls in HTML and XAML, how to craft your first Windows Store app, new ways to build a cool UI for your app, and more. For now, let’s have a look at new HTML and XAML controls.

With Windows 8.1, you can offer users a richer experience in your Windows Store app using new controls in HTML and JavaScript:

  • AppBarCommand:   With the new AppBarCommand, you can create custom app bar commands in your Windows Store apps. Additionally, you can use built-in support for custom content in app bar commands, including keyboarding, command alignment, and animations for dynamically showing and hiding commands.
  • BackButton, Hub, and NavBar:   All designed with better app navigation in mind. BackButton provides a simple way to add backward navigation to your app. It automatically checks to see if there’s a place to go back to, and if there isn’t, the button disables itself. With the Hub control, you can create a Hub page for your app, where you might include lots of detail about related information in a hierarchical pattern. Using the Hub control, you might create a Hub page similar to what the Bing travel app uses:

clip_image002

The NavBar control is like an AppBar, but it’s dedicated to navigation commands. It can contain a simple list of links, or links divided into different levels and organized into categories. The NavBar supports vertical layouts and split navigation items and is highly customizable.

  • ItemContainer:   Using the ItemContainer control, you can create flexible interactive elements that give your app swipe, drag-and-drop, and hover capabilities. You can use ItemContainer to create rich check box groups, navigation buttons, and shopping cart visuals.
  • Repeater:   Use this simple WinJS control that uses a template to generate HTML markup from a set of data. For example, if you’re creating a weather app that shows the report at different intervals throughout the day, use Repeater to set up the markup template where you’ll then add the interval specifics.
  • WebView:   To host web-based content in your app, use the WebView control rather than an iframe to display it. For displaying content, WebView gives you support for HTML5, improved support for navigation, and support for sites that don’t work inside frames. For more on WebView in Windows 8.1, check out What’s new in WebView in Windows 8.1.

XAML developers can offer similar great experiences with new controls in Windows 8.1.

  • AppBar controls:   The AppBarButton, AppBarToggleButton, and AppBarSeparator controls give you an easy way to create app bar command buttons.
  • CommandBar:   With CommandBar you can lay out commands automatically and have a consistent structure with primary commands on the right and secondary ones on the left. And app bar commands automatically change sizes when the app changes size.
  • DatePicker and TimePicker:   With DatePicker you get a standardized way for users to pick a localized date using mouse, touch, or keyboard input methods. The TimePicker works the same for picking time.
  • Flyout:   You can use the flyout control to give users info about a UI item, to confirm a user’s action, or to get input from the user. Flyouts are displayed temporarily and are easily dismissed by clicking or tapping outside of them.

clip_image004

A MenuFlyout lets you temporarily show a list of options or commands related to what the user is currently doing. And the SettingsFlyout lets you create a flyout that gives users an easy way to adjust app settings.

  • Hub:   With the XAML Hub control, you can create hub design patterns for your app. As the entry point into an app, the hub page shows users different categories of your app’s content and gives them a glimpse of what’s new and exciting.
  • Hyperlink:   Within your app, you might want to include a link within a block of text. You can create that functionality using the hyperlink element. Your text block might look like this:

clip_image006

 

This is just a taste of great new capabilities you have with Windows 8.1. If you’re a developer, or if you’re interested in learning how to develop cool apps for Windows 8.1, check out the Windows Dev Center for lots more great stuff!