AppBar in UWP

In this article you will learn how to create a Simple AppBar Control in your Universal Windows Project.

Step 1: First of all we've to create a Blank Universal Windows Platform Project in Visual Studio 2015.

Step 2: The next thing we'll do is to add the following code.It should be kept in mind that the AppBar code goes after the Grid.

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="webcamera" Icon="WebCam" Label="Camera" />
            <AppBarButton Name="user" Icon="AddFriend" Label="Add User" />

        </CommandBar.PrimaryCommands>

        <CommandBar.SecondaryCommands>
            <AppBarButton Name="webcamera" Icon="WebCam" Label="Camera" />
            </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Notice that there're two types of commands Primary Command and Secondary Command.

Primary Command is for our buttons and secondary command is for Menu.

Following diagram makes the concept clear.

Primary Commands

Secondary Command

Step 3:

Now Run your Project by simply pressing F5 simply enjoying AppBar Control in your application.