Add App Bar in Windows 8.1 XAML Applications

IC671114

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" Icon="Read">
                
                </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 The AppBar has one more 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>

appbar2

With the appbar added we now dont need to add extra buttons on the UI thus giving more space to content. It helps users organise the tasks they are doing.

Similarly you can also add a top appbar.

  <Page.TopAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <!-- These commands appear on the right -->
                <AppBarButton Icon="Play" Label="Play"/>
                <AppBarSeparator />
                <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>
            </CommandBar.PrimaryCommands>

            <CommandBar.SecondaryCommands>
                <!-- These commands appear on the left -->
                <AppBarButton Label="Edit">
                    <AppBarButton.Icon>
                        <SymbolIcon Symbol="Edit" />
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Label="Rss" Icon="Read">

                </AppBarButton>
                <AppBarButton Icon="Globe" Label="Website"></AppBarButton>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.TopAppBar>

You can find a list of all default icons here and you can add custom icons as well.

  <AppBarButton Label="Rss">
                        <AppBarButton.Icon>
                            <BitmapIcon UriSource="/Assets/appbar.rss.png" />
                        </AppBarButton.Icon>
                    </AppBarButton>

 

So have  fun and add app bar to your application

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s