AppBar : TopAppBar / BottomAppBar บน Windows Store Apps (C#)
รู้จักกับ AppBar : TopAppBar / BottomAppBar บน Windows Store Apps (C#) สำหรับ AppBar บน Windows Store Apps คือ Application Bar ของโปรแกรมซึ่งจะไว้สร้างเป็น Navigation หรือ Command ซึ่ง AppBar เราจะเห็นมีอยู่ 2 ส่วนด้วยกันคือ TopAppBar (แสดงด้านบนหน้าจอ App) และ BottomAppBar (แสดงด้านล่างของ Apps) โดยการทำงาของ AppBar สามารถเรียกให้โชว์และแสดงได้ตลอดเวลา เหมาะสำหรับสร้างเป็น Navigation และเมนู Function คำสั่ง Command ต่าง ๆ ซึ่งฟีเจอร์นี้เราจะได้พบเจอมันบน Windows 8
โดยใน Windows Store Apps เราไม่จำเป็นจะต้องหา Icons ต่าง ๆ เหล่านี้มาแสดงผลเหมือนบน Windows Phone เพราะใน Windows Store Apps ได้เตรียม Icon เหล่านี้มาให้หลายตัว เช่น Icon="Refresh" แสดงปุ่ม Refresh , Icon="Help" แสดงปุ่ม Help และปุ่มอื่น ๆ อีกมากมาย ที่สามารถเรียกใช้งานได้ทันที
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;
}
}
}
}
Screenshot
แสดงหน้าจอซึ่งเราจะให้คลิกที่ Button และแสดง App Bat
แสดง App Bar ทั้ง TopAppBar และ BottomAppBar
เมื่อทดสอบการคลิกที่ App Bar บน Icon ต่าง ๆ ก็จะเกิด Event ตามที่เรากำนดไว้
Example 2 สร้าง AppBar แบบ BottomAppBar ด้วย CommandBar รูปแบบอื่น ๆ