New controls for XAML with C# or C++ in Windows 8.1 for dummies

Good morning all, yesterday (26th June 2013) in Build conf, Microsoft has released Windows 8.1, Visual studio 2012.3, Visual Studio 2013 and 5000 new APIs. I have just went through the API page and was reading Controls (XAML with C# or C++) because I mainly code in C# with XAML. In that page they said, that they have modified one control, that is AppBar, and those folks have added AppBarToggleButton and AppBarSeparator along with the previous AppBarButton.

In this image you can see the “Shuttle” button is a toggle button, and the Separator is also very clearly visible.

Another improvement for AppBar is, its now supporting “compact state”, which is controlled by IsCompact property.If it is set to true, the text label is hidden and the padding around the buttons is reduced. In my openion, this is what most UI experts would prefer. Because, its meaningsless to put a very clear button and put explaing text under it.

This is how “compact state” AppBar gives the display.

You can use app bar buttons outside of an app bar. A common example is to use an app bar button as a back button in a page header. When a button is used outside of an app bar, Windows guidelines indicate that it should always be in its compact state.

Four kinds of icon elements are provided:

  1. FontIcon—The icon is based on a glyph from the specified font family.
  2. BitmapIcon—The icon is based on a bitmap image file with the specified Uri. 
  3. PathIcon—The icon is based on Path data.
  4. SymbolIcon—The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.

Code [XAML]

<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
        <FontIcon FontFamily="Candara" Glyph="Σ"/>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>

This is the out put of the above code

Other new controls

Other controls are very new for Windows store development and are much waited. Those are

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


CommandBar is a new control for XAML that lets you easily create properly designed app bars. Command bar simplifies the creation of app bars, and provides two impotent features.

  1. Automatic layout of commands, with primary commands on the left and secondary commands on the right.
  2. Automatic resizing of app bar commands when the app size changes.

I am 100% sure this CommandBar will kill AppBar as soon as possible, may be with the next version of Windows, we might get a news “AppBar is depricated.”

This is Commandbar and you can see some commands in left and others on right as I said earlier.

Code [XAML]

        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>   
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>


The date picker gives you a standardized way to let users to pick a localized date using touch, mouse, or keyboard input methods.

Code [XAML]

<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s