Working With The AppBar And Command Bar Control In Universal Window App

 Prerequisites

•   Visual Studio 2015

Now, let's get started with the steps, given below-

Step 1- Create Windows Universal Project

Open Visual Studio 2015, click File -> New -> Project Option for New Universal app.



Step 2- Giving the Project Name

New Project Window will open, you can select an Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank app (Universal Windows).

Type Project Name AppBar and click OK button.

Step 3- Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows Application. Click OK button.



Step 4- Choose Designer Window

Now, we go to the Solution Explorer and select MainPage.xaml.

Step 5- Designing the App

Drag the Command Bar Control from the tool box.

Next, click Accept button and go the Property Window. Choose the symbol and change the icon to Home.



Change the name as AppHome and label to Home.



Click Cancel button and go the Property Window. Choose the Symbol and change the icon to Contact.



Change the name to AppContact and label to Contact.



Now, drag the app bar button control from the tool box. Click Accept button and go the Property Window. Choose the symbol and change the icon to cancel.



Next, change the name to AppCancel and label to cancel.

 

The following XAML code is generated, while we are designing the app.

 

<Page
    x:Class="AppBarControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar Height="78" VerticalAlignment="Stretch">
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton x:Name="AppHome" Icon="Home" Label="Home" Click="AppHome_Click"/>
            <AppBarButton x:Name="AppContact" Icon="Contact" Label="Contact" Click="AppContact_Click">

            </AppBarButton>

            <AppBarButton x:Name="AppCancel" HorizontalAlignment="Stretch" Icon="Cancel" Label="Cancel" Margin="0,4,0,0" Width="68" Height="45" Click="AppCancel_Click"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="Home" Padding="25 25 25 25"></TextBlock>
        </StackPanel>
    </Grid>
</Page>

Step 6- Add the Coding

Double click on the Home button and add the code, given below. Likewise, add the coding (given below) to the contact button and cancel button.

private void AppHome_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(MainPage));
        }

        private void AppContact_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Contact));
        }



        private void AppCancel_Click(object sender, RoutedEventArgs e)
        {
            CommandBar cb = sender as CommandBar;
            if (cb != null) cb.Background.Opacity = 0.5;
        }

Step 7- Run the Application

Now, we are ready to run our project. Thus, click Local Machine to run the Application.



Output

 

 

Conclusion

I hope you understood App Bar control and Command Bar control in Universal Window and how to run it.