Create An AppBarButton In UWP


In this blog, you will learn how to develop AppBarButton, using Universal Windows Application.


  • Visual Studio 2015 Update 3.

Step 1

Open Visual Studio 2015, open the file and new project, which is using shortcut keys Ctrl+Shift+N.

Step 2

Now, we can choose Visual C# (sharp) and you can select the Universal platform. Afterwards, we can choose Blank app (Universal Window) and you can change the Application name. Click "OK" button.


Step 3

Here, we can select the target minimum, maximum version and click OK button.


Step 4

Now, we can go to MainPage.XAML and afterwards, open the design Window.


Step 5

Here, you can go to View, select toolbox and open the toolbox. Afterwards, you can choose AppBarButton and click the button.



Step 6

Now, we can go to XAML page, write the code and save the code. Follow the shortcut keys Ctrl+S.

  1. <Page x:Class="Appbarbutton.MainPage" xmlns="" xmlns:x="" xmlns:local="using:Appbarbutton" xmlns:d="" xmlns:mc="" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <AppBarButton x:Name="contact" HorizontalAlignment="Left" Icon="Contact" Label="contact" Margin="72,254,0,0" VerticalAlignment="Top">  
  4.             <AppBarButton.Background>  
  5.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  6.                     <GradientStop Color="Black" Offset="0" />  
  7.                     <GradientStop Color="#FF00FF6F" Offset="1" />  
  8.                 </LinearGradientBrush>  
  9.             </AppBarButton.Background>  
  10.             <AppBarButton x:Name="appBarButton" Height="100" Icon="Accept" Label="appbarbutton" Width="100" />  
  11.         </AppBarButton>  
  12.         <AppBarButton x:Name="Like" HorizontalAlignment="Left" Icon="Like" Label="Like" Margin="186,254,0,0" VerticalAlignment="Top">  
  13.             <AppBarButton.Background>  
  14.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  15.                     <GradientStop Color="Black" Offset="0" />  
  16.                     <GradientStop Color="#FF00E2FF" Offset="1" />  
  17.                 </LinearGradientBrush>  
  18.             </AppBarButton.Background>  
  19.         </AppBarButton>  
  20.         <AppBarButton x:Name="Comment" HorizontalAlignment="Left" Icon="Comment" Label="Comment" Margin="324,254,0,0" VerticalAlignment="Top" Background="#FFFFF800" />  
  21.         <AppBarButton x:Name="view" HorizontalAlignment="Left" Icon="View" Label="view" Margin="450,254,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.559,1.183">  
  22.             <AppBarButton.Background>  
  23.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  24.                     <GradientStop Color="Black" Offset="0" />  
  25.                     <GradientStop Color="White" Offset="1" />  
  26.                 </LinearGradientBrush>  
  27.             </AppBarButton.Background>  
  28.         </AppBarButton>  
  29.     </Grid>  
  30. </Page>  

Step 7

Here, we can run the machine. It should be like the Local Machine, Remote Machine, device and so on.


Step 8

Now, we can see the output, given below.