Controls: AppBar / CommandBar TopAppBar / BottomAppBar trên Windows Store Apps (C #).

Example 1

MainPage.xaml

Windows Store 2017

<Page
    x:Class="DemoRes.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DemoRes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar IsOpen="True" Background="Green">
            <StackPanel Orientation="Horizontal">
                <AppBarButton Icon="Page" Name="btnHRS" Label="Heigher Resource" ></AppBarButton>
                <AppBarButton Icon="Page" Name="btnRDS" Label="Resource Dictionary"></AppBarButton>
                <AppBarButton Icon="Page" Name="btnUserControl" Label="UserControl" ></AppBarButton>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <CommandBar Background="#FF1C6BA2" Foreground="#FFA66262">
            <AppBarButton Icon="Refresh" Label="Refresh"/>
            <AppBarButton Icon="Help" Label="Help"></AppBarButton>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="Add" Label="Add"/>
                <AppBarButton Icon="Edit" Label="Edit"/>
                <AppBarButton Icon="Delete" Label="Delete"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>

    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

Example 2

- Đầu tiên tạo ButtomAppBar như hình dưới

- Hình dung

<Page.TopAppBar>
    <AppBar>
        <!-- AppBar content Bar phía trên đỉnh-->
    </AppBar>
</Page.TopAppBar>

<Page.BottomAppBar>
    <CommandBar>
        <!-- CommandBar content Bar dưới cùng ta bắt đầu thực hiện nó!-->
    </CommandBar>
</Page.BottomAppBar>

- Đây là phần BottomAppBar như hình phía trên

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
        <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
            <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
            <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

- Để sử dụng được sự kiện chúng ta Click Double vào icon Edit 

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
   //Thực hiện show Dialog message!
}

- Example 1: Tạo Button click hiển thị AppBar từ AppBar click tới Icon show ra MessageDialog

MainPage.xaml

Windows Store 2017

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreApps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="WindowsStoreApps.MainPage"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>

            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btnShow" Content="Show Bar" HorizontalAlignment="Left" Margin="549,351,0,0" VerticalAlignment="Top" FontSize="48" Click="btnShow_Click" FontFamily="Global User Interface"/>
    </Grid>

</Page>

MainPage.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Popups;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace WindowsStoreApps
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    /// 

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void AppBarButton_Click(object sender, RoutedEventArgs e)
        {
            MessageDialog msgDialog = new MessageDialog("AppBar Clicked", "Hi");
            msgDialog.ShowAsync();

        }

        private void btnShow_Click(object sender, RoutedEventArgs e)
        {
            if (this.TopAppBar != null)
            {
                this.TopAppBar.IsOpen = true;
            }

            if (this.BottomAppBar != null)
            {
                this.BottomAppBar.IsOpen = true;
            }
        }

    }
}

- Chạy chương trình với Simulator
Click Show Bar

 - Click Icon trên AppBar

 - Hiển thị MessageDialog

- Example 2: Sử dụng AppBarSeparator ngăn cách các Icon

MainPage.xaml

Windows Store 2017

<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

- Example 3: Tạo icon ButtomAppBar ở giữa

<Page.BottomAppBar>
        <AppBar>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <AppBarButton x:Name="Pause" Icon="Pause" Label="Pause" Click="Pause_Click"/>
                <AppBarButton x:Name="Play" Icon="Play" Label="Play" Click="Play_Click"/>
                <AppBarButton x:Name="Stop" Icon="Stop" Label="Stop" Click="Stop_Click"/>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>