Posted by : Sudhir Chekuri Monday, 16 June 2014

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>

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Followers

Total Pageviews

Powered by Blogger.

- Copyright © 2013 DevStudent - Metrominimalist - Powered by Blogger - Designed by Johanes Djogan -