一般我們在開發Windows Phone的時候會希望畫面上保持整潔,並保留重要的功能就可以了,但是還是會有偶而會使用到的功能,或是我們想要將某些功能放在APP下方的選單列(AppBar)中,等到AppBar展開後,才顯示給使用者觀看,但是要如何做到AppBar呢?!

首先我們先參考官方的說明文件,可以透過Xaml來製作

How to create an app bar using XAML for Windows Phone

裡面提到我們可以這樣做

在Xaml中放置以下的程式碼 :

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

會看起來像這樣子

 

1

 

說明一下

有圓圈圈的叫做ApplicationBarIconButton

而下方的清單呈現方式的叫做ApplicationBarMenuItem

2

 

在Xaml中編輯AppBar有個好處,就是可以快速新增內建的一下圖是來使用,

AppBar上的物件後,打開【屬性】的視窗

3

 

我們可以透過這個方式來使用系統內建的小圖示當作AppBar Button的圖示,

至於在按鈕按下後要做什麼事情呢,我們只要【事件】中新增【Click】的事件,

 

先選取您的ApplicationBarIconButton或ApplicationBarMenuItem控制項,

之後再【事件】的視窗中找到Click,

快速擊點兩次會Visual Studio 會自動幫你創建Click的事件

4

 

就會自動幫你創建好程式碼了!

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    //當ApplicationBarIconButton 按下後要做的事情
}

 

然而其他的按鈕以及選項也是一樣的方法來創建按下去的事件,

如此一來我們可以輕鬆地透過Xaml編寫的方式來創建AppBar

 

但是在Xaml中編輯AppBar也是有缺點的,就是不能夠將Text文字的屬性,

連繫到AppResource的檔案,也就是說無法在Xaml中製作多國語系的AppBar

 

多國語系請參閱 :

windows Phone 8 多語系製作速成 WP8 Localize

 

但若您不信邪的話可以在Text屬性下加入 :

 

Text="{Binding Path=LocalizedResources.Test, Source={StaticResource LocalizedStrings}}"
這邊的Test指的是,在多國語系的資源檔中對應的Key,

這邊的Test指的是,在多國語系的資源檔中對應的Key,

 

VS會告訴您,你的Xaml中有錯誤,無法讓您編譯!

5

 

所以如果Xaml中無法製作多國語系的AppBar的話,我們可以透過C#程式碼來製作

說明一並在程式碼內附上了 :

 

//宣告一個新的AppBar
ApplicationBar appBar = new ApplicationBar();
//設定appBar的背景色,可以是半透明!
appBar.BackgroundColor = Color.FromArgb(128,0,0,0);
//宣告一個新的AppBar Button
ApplicationBarIconButton AppBar_Button1 = new ApplicationBarIconButton(new Uri("/Assets/AppBar/check.png", UriKind.Relative));
//將AppBar Button的文字對應到AppResource的檔案中"Test"的字串
AppBar_Button1.Text = AppResources.Test;
//新增AppBar_Button1按下的事件
AppBar_Button1.Click += (sender, e) =>
{
    //當AppBar_Button1按下時要做的工作
};
//宣告一個新的AppBarItem
ApplicationBarMenuItem AppBar_Item1 = new ApplicationBarMenuItem();
//將AppBar_Item1的文字對應到AppResource的檔案中"Test"的字串
AppBar_Item1.Text = AppResources.Test;
//新增AppBar_Item1按下時的事件
AppBar_Item1.Click += (sender, e) =>
{
    //當AppBar_Item1按下時要做的工作
};
 
//將AppBar_Item1新增到AppBar中
appBar.MenuItems.Add(AppBar_Item1);
//將AppBar_Button1新增到AppBar中
appBar.Buttons.Add(AppBar_Button1);
//設定本頁面的ApplicationBar指向我們剛剛自己創建的appBar
ApplicationBar = appBar;

 

其實利用C#程式碼來創建AppBar比較有彈性,

小技巧是我們可以先透過Xaml中來編輯AppBar並獲得系統內建的圖示,

它會自動幫你把圖示加入到專案底下的Assets的資料夾中(因為自己懶得做圖示…),

 

這樣我們就可以透過C#程式碼來創建AppBar了。

 

 

References : How to create an app bar using code for Windows Phone

 

文章中的敘述如有觀念不正確錯誤的部分,歡迎告知指正 謝謝
http://www.sukitech.com/?p=1176
轉載請註明出處,並且附上本篇文章網址 !  感謝。

9 Thoughts on “C# Windows Phone App 開發,透過【C#程式碼】或【Xaml】製作【AppBar】,並支援多國語系。

  1. This is one awesome article post.Much thanks again. Really Great.

  2. Thanks again for the blog.Thanks Again. Awesome.

  3. A round of applause for your blog post.Really thank you! Really Cool.

  4. Awesome blog.Really thank you! Keep writing.

  5. A big thank you for your blog.Thanks Again. Will read on…

  6. Great, thanks for sharing this article. Want more.

  7. I loved your blog article.Really thank you! Keep writing.

  8. I value the post.Really thank you! Awesome.

  9. This is one awesome article.Really thank you! Great.

發表迴響

你的電子郵件位址並不會被公開。

Post Navigation