New Controls in Windows 8.1

Windows 8.1 Preview introduces these new controls and features:

• AppBar controls
• CommandBar
• DatePicker
• Flyout
• Hub
• Hyperlink
• MenuFlyout
• SettingsFlyout
• TimePicker

Windows 8.1 Preview includes updates for these existing controls:

• FlipView updates
• Headers for ComboBox, DatePicker, TimePicker, Slider, Edit controls
• Placeholder text
• Other control updates

AppBar controls

Windows 8.1 Preview introduces new controls for XAML that let you more easily create app bar command buttons that reflect the proper design guidelines and behaviors: the AppBarButton, AppBarToggleButton, andAppBarSeparatorcontrols.

App bar buttons differ from standard buttons in several ways:

• Their default appearance is a circle instead of a rectangle.

• You use the Label and Icon properties to set the content instead of the Content property. The Contentproperty is ignored.

• The button’s IsCompact property controls its size.

 

CommandBar

 

Windows 8.1 Preview introduces a new control for XAML that lets you easily create properly designed app bars: theCommandBar control.

The CommandBar simplifies the creation of basic app bars by providing:

• Automatic layout of commands, with primary commands on the left and secondary commands on the right.

• Automatic resizing of app bar commands when the app size changes.

 

DatePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user set a localized date in your app: theDatePickercontrol.

 

TimePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user pick a time value in your app: theTimePickercontrol.

 

 

Flyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show UI related to what the user is currently doing: the Flyout control.

 

 

Hub

Windows 8.1 Preview introduces a new control for XAML that lets you easily create the hub design pattern that reflects the proper design guidelines and behaviors: the Hub control.

Hub pages are the user’s entry point to your app. They display content in a rich, panning view that lets users get a glimpse of what’s new and exciting, and then dig deeper into your app’s content. The hub displays different categories of content, each of which maps to your app’s section pages. Each section should bubble up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app.

The XAML Hub control provides elements to help you more easily implement the hub design pattern for your app. Unlike a GridView or ListView control that displays data from a single source, each hub section can display data from a different source. Any XAML content can be used to create a visually rich hub page. To get started quickly creating an app with aHub page, use the Hub App template in Microsoft Visual Studio 2013 Preview.

Add a header to the Hub to let users know the context of your hub. This is often the name of your app. You can use a simple text Header, or define a HeaderTemplate that uses any XAML content. It’s important to remember that, although you can use arbitrary content in the header, the height of the header will affect the amount of vertical space available for your hub section content. The header remains fixed in position and doesn’t scroll with the hub sections.

 

Hyperlink

Windows 8.1 Preview adds the Hyperlink element to the XAML text object model in theWindows.UI.Xaml.Documents namespace.

The Hyperlink element lets you add a hyperlink to a run of text. The hyperlink is treated like the rest of the text and participates in line breaking. When marked as a hyperlink, the text is shown in a specific color and, when tapped, goes to the Uniform Resource Identifier (URI) specified in the NavigateUri property.

Here’s a block of text with a Hyperlink element embedded in it.

 

MenuFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show a list of commands or options related to what the user is currently doing: the MenuFlyout control.

 

SettingsFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you easily create app settings flyouts that reflect the proper design guidelines and behaviors: the SettingsFlyout control.

Like a Page control, a SettingsFlyout control can be declared in XAML as a root element of a document, with anx:Class attribute specified to subclass from SettingsFlyout. You can set the width of the Settings flyout, but the height is always the full height of the screen.

 

 

Complete details of the new controls introduced in Windows 8.1 can be found at http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx