Prerequisites
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.