注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

姑射道人的博客

博客新地址:nixuchen.com

 
 
 

日志

 
 

在多个页面复用Application Bar  

2013-06-01 16:56:51|  分类: windows phone |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

In this article we are gong to see how to reuse the application bar effectively in multiple pages. Application bar is specific to particular page which we design while designing the page, but we have option to use it across the pages to have some unique navigation flow or also to make code reusable to avoid junk of repeated code in each and every page. To get more information on the application bar I would suggest to read this article which gives clear idea on how to use the application bar effectively (Article). So in this article we will take a step further on using the application bar unique across the different pages with a single code base by making the application bar publicly available across all the pages of the application.     

Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below. 

image

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

image

Normally we will add the application bar code directly in the Mainpage.xaml if we want to trigger the application bar from the xaml code or we will write our dynamic code in the code behind to trigger the application bar. Since in this tutorial we are going to make the application bar reusable across the pages we have few steps to be done. Open App.xaml file from the list of available files in the solution explorer, this file is use to apply all the global settings with respect to the application. Open the file and add the Application bar code in the Application.resource element as shown in the code below.

XAML Code:

<shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True"> 
            <shell:ApplicationBarIconButton IconUri="/Images/appbarImg1.png" Text="Close" Click="Close_Click" /> 
            <shell:ApplicationBarIconButton IconUri="/Images/appbarImg2.png" Text="Open" Click="Open_Click" /> 
            <shell:ApplicationBar.MenuItems> 
                <shell:ApplicationBarMenuItem Text="About" Click="Menu1_Click" /> 
                <shell:ApplicationBarMenuItem Text="News" Click="Menu2_Click" /> 
            </shell:ApplicationBar.MenuItems> 
        </shell:ApplicationBar>

image


Now the application bar can be instantiated across the pages, so where we need to provide the action. As usual place the event action in the code behind of the App.xaml.cs file as shown in the code below.

C# Code:

private void Close_Click(object sender, EventArgs e) 

    MessageBox.Show("Clicked Close Button"); 
}

private void Open_Click(object sender, EventArgs e) 

    MessageBox.Show("Clicked Open Button"); 
}

private void Menu1_Click(object sender, EventArgs e) 

    MessageBox.Show("Clicked Menu1"); 
}

private void Menu2_Click(object sender, EventArgs e) 

    MessageBox.Show("Clicked Menu2"); 

image


Now run the application and we can see the application bar will not be available to the Mainpage.xaml page. We need to tell the page to use the application bar, so we need to add the below code in the xaml page which tells the application to load the application bar in the Mainpage.xaml load as shown in the screen below.

XAML Code:

ApplicationBar = "{StaticResource GlobalAppBar}"

image

Now we are done with our configuration, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

image

  评论这张
 
阅读(398)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017