AppBar Control for Windows 10

In the following blog I will show you how to work with AppBar control in Universal Windows Apps.

AppBar represents the container control that holds app UI components for commanding and experiences.

Step 1: Open a blank app and copy the following XAML code into your page which have a AppBar and Corresponding icons.

<Page.BottomAppBar>
    <AppBar>
        <StackPanel Orientation="Horizontal">
            <AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
            <AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
            <AppBarSeparator/>
            <AppBarButton Icon="Back" Label="Back" />
            <AppBarButton Icon="Stop" Label="Stop" />
            <AppBarButton Icon="Play" Label="Play" />
            <AppBarButton Icon="Forward" Label="Forward" />
        </StackPanel>
    </AppBar>
</Page.BottomAppBar>

An app bar is a UI element that's typically used to present commands and tools to the user, but can also be used for navigation. An app bar can appear at the top of the page, at the bottom of the page, or both. By default, its shown in a minimal state. Its content is shown or hidden when the user presses the ellipsis [•••], or performs a right-click that is not otherwise handled by the app.

You Can assign individual Click event for each icon.

Step 2: Run your application and test yourself.