- Back to Home »
- Windows store apps C#/XAML »
- windows store apps xaml global app bar button styles in resource dictionary with custom image
This code is used to add an app bar in a xaml page.
That app contains 3 buttons.
Appbar button inside secondary commands tag are known as global commands and are displayed on the right side of the appbar.
For this three buttons styles are written in sepearate resource dictionary file.
label property is used to give the name below the appbar button and icon is used to mention the image icon to be displayed in the appbar button.
3 rd button style contains content template with image source to display custom image in appbar button.
To use global style written in seperate resourcedictionary page in every page of your application you have to include the below xaml tags in app.xaml page.
Code in App.xaml page
<Application
x:Class="BSNFRailway.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BSNFRailway">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="BSNFResources.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
XAML Code for app bar in MainPage.xaml
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Style="{StaticResource AppBarRefreshButtonStyle}" />
<CommandBar.SecondaryCommands>
<AppBarButton Style="{StaticResource AppBarFilterButtonStyle}" />
<AppBarButton Label="Asset Tree" Style="{StaticResource AppBarAssetTreeButtonStyle}" >
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
Code in ResourceDictionary.xaml page
<Style x:Key="AppBarFilterButtonStyle" TargetType="AppBarButton" >
<Setter Property="Label" Value="Filter" ></Setter>
<Setter Property="Icon" Value="Filter" ></Setter>
</Style>
<Style x:Key="AppBarRefreshButtonStyle" TargetType="AppBarButton" >
<Setter Property="Label" Value="Refresh" ></Setter>
<Setter Property="Icon" Value="Refresh" ></Setter>
</Style>
<Style x:Key="AppBarAssetTreeButtonStyle" TargetType="AppBarButton">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="/Images/TreeLogo.png" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Label" Value="Tree" />
</Style>