Introduction

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

Requirements

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

AppBar

Step 3

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

AppBar

Step 4

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

AppBar

Step 5

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

AppBar



AppBar

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Appbarbutton" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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>
AppBar



Step 7

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

AppBar

Step 8

Now, we can see the output, given below.

AppBar