Home > C#, WinRT > The new AppBar in Windows 8.1 XAML Store apps

The new AppBar in Windows 8.1 XAML Store apps

25/07/2013

Windows 8.1 simplifies a lot the creation of AppBars. We no longer need to use buttons with a particular style, because now the built-in AppBarButton control is available. The following example shows the main characteristics of the new AppBar:

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <!-- These commands appear on the right -->
            <AppBarButton Icon="Play" Label="Play"/>
            <AppBarSeparator />
            <AppBarButton Icon="Add" Label="Add item" />
        </CommandBar.PrimaryCommands>

        <CommandBar.SecondaryCommands>
            <!-- These commands appear on the left -->
            <AppBarButton Label="Edit">                   
                <AppBarButton.Icon>
                    <SymbolIcon Symbol="Edit" />
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Rss">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="/Assets/appbar.rss.png" />
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Icon="Globe" Label="Website"></AppBarButton>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

As we can see, everything is simpler. Instead of Grid and StackPanel, we have a CommandBar object that exposes two properties, PrimaryCommands and SecondaryCommands, that respectively contain buttons that appear on the right and on the left of the bar:

AppBar

There are many ways to define an AppBarButton. The simplest is shown at line 5: we specify the Icon name and the Label of the button. On lines 12-16, instead, we see the verbose declaration: the Icon is specified using a SymbolIcon object. This approach is convenient because IntelliSense is available on the Symbol property, so it’s easy to choose the right icon to use.

We can also use a custom image, as shown on line 17-21. The BitmapIcon follows the same pattern used in Windows Phone: all color information is stripped out and the resulting color on the button is automatically inverted on pressed state.

Moreover, we can create a FontIcon if we want to use a custom font, or PathIcon to define an icon that uses a Path as its content.

Finally, we can separate commands on the bar using the AppBarSeparator control, as shown on line 6.

The new AppBar has another important feature that helps us adhere to UI design guidelines. When screen size gets smaller, Windows 8.1 automatically drops margins and labels to make buttons fit the available space. If this isn’t sufficient, Secondary commands are dropped at all.

In the previous post, we talked about Menus and Flyouts. We can use them with AppBarButton too, because it inherits from Button:

<AppBarButton Icon="Add" Label="Add item">
    <AppBarButton.Flyout>
        <Flyout>
            <StackPanel Width="406">
                <TextBlock Text="Insert the value and tap the Send button:" FontSize="16"
                   FontWeight="SemiLight" FontFamily="Segoe UI"
                   Margin="0,0,0,10"  />
                <TextBox x:Name="ValueTextBox" />
                <Button Content="Send" HorizontalAlignment="Right"
                    FontSize="16" Margin="0,10,0,0" />
            </StackPanel>
        </Flyout>
    </AppBarButton.Flyout>
</AppBarButton>

In this way, the flyout will automatically appear when the user taps on the Add button. Of course, the same thing is valid using a Menu flyout.

Categories: C#, WinRT
%d bloggers like this: