其实写ApplicationBar的文章不少了
我在啰嗦一下吧
Microsoft.Phone.Shell..::..ApplicationBar
Namespace:
程序集: Microsoft.Phone(位于 Microsoft.Phone.dll 中)
XMLNS for XAML:未映射到 xmlns。
| 名称 | 说明 |
| | 获取或设置应用程序栏的背景颜色。 |
| | 获取应用程序栏上显示的图标按钮列表。 |
| | 获取当 属性设置为 时应用程序扩展到页面的距离。 |
| | 获取或设置应用程序栏的前景颜色。 |
| | 获取或设置一个值,该值指示当用户单击省略号以展开应用程序栏时用户是否看到(可选)菜单项。 |
| | 获取或设置一个值,该值指示应用程序栏是否可见。 |
| | 获取应用程序栏上显示的菜单项列表。 |
| | 获取当 属性设置为 时应用程序扩展到页面的距离。 |
| | 获取或设置应用程序栏的大小。 |
| | 获取或设置应用程序栏的不透明度。 |
创建ApplicationBar有在xaml和通过code 两种方法
ApplicationBar中包含ApplicationBarIconButton和ApplicationBarMenuItem
其中ApplicationBarIconButton最多只能有4个ApplicationBarMenuItem有10多个都可以,不过建议还是不要太多(会出滚动条)
ApplicationBarIconButton有Icon,根据MSDN的:
-
图标图像大小应该为 48 x 48 像素。按钮的前景图形应该适合在图像中心 26 x 26 的区域中,以便它不会与圆形重叠。
-
每个按钮上显示的圆形都由应用程序栏绘制,因此不应该包含在源图像中。
-
图标图像应该在使用 Alpha 通道的透明背景上使用白色前景。Windows Phone 会自动根据所选的主题(浅色或深色)对图标进行涂色,涂色后的图标可能会导致该效果显示不适当。
-
不要在页面堆栈中创建向后导航的按钮。所有 Windows Phones 都有一个专用的硬件“返回”按键,该按键应该用于向后导航。
-
尽可能使图标按钮的标签简短一些。如果设备的语言是英文,则标签应仅在一行显示,必要时可以截断。
-
当手机旋转时,选择具有明确含义的图标。当手机处于横向时,应用程序栏会垂直出现在屏幕的一侧。图标按钮进行旋转,以便它们正对用户进行显示。发生这种情况时,有可能会混淆图标的含义,尤其是两个图标的图像互为镜像(如 << 和 >>)时。
xaml创建ApplicationBar
其实最简单的还是通过Blend:
XAML:
1 < phone:PhoneApplicationPage.ApplicationBar > 2 < shell:ApplicationBar > 3 < shell:ApplicationBar.MenuItems > 4 < shell:ApplicationBarMenuItem x:Name = " menu1 " Text = " menu item " Click = " menu1_Click " / > 5 < shell:ApplicationBarMenuItem Text = " menu item " / > 6 < shell:ApplicationBarMenuItem Text = " menu item " / > 7 < shell:ApplicationBarMenuItem Text = " menu item " / > 8 < shell:ApplicationBarMenuItem Text = " menu item " / > 9 < shell:ApplicationBarMenuItem Text = " menu item " / > 10 < shell:ApplicationBarMenuItem Text = " menu item " / > 11 < shell:ApplicationBarMenuItem Text = " menu item " / > 12 < shell:ApplicationBarMenuItem Text = " menu item " / > 13 < shell:ApplicationBarMenuItem Text = " menu item " / > 14 < /shell:ApplicationBar.MenuItems > 15 < shell:ApplicationBarIconButton x:Name = " b1 " IconUri = " /icons/appbar.cancel.rest.png " Text = " button " Click = " b1_Click " / > 16 < shell:ApplicationBarIconButton x:Name = " b2 " IconUri = " /icons/appbar.add.rest.png " Text = " button " Click = " b2_Click " / > 17 < shell:ApplicationBarIconButton x:Name = " b3 " IconUri = " /icons/appbar.favs.addto.rest.png " Text = " button " Click = " b3_Click " / > 18 < shell:ApplicationBarIconButton x:Name = " b4 " IconUri = " /icons/appbar.delete.rest.png " Text = " button " / > 19 < /shell:ApplicationBar > 20 < /phone:PhoneApplicationPage.ApplicationBar >
Code创建ApplicationBar
添加引用:
using Microsoft . Phone . Shell;
然后:
1 ApplicationBar =
new ApplicationBar ( ) ;
2 3 ApplicationBar . Mode = ApplicationBarMode . Default;
4 ApplicationBar . Opacity =
1 .
0 ;
5 ApplicationBar . IsVisible =
true ;
6 ApplicationBar . IsMenuEnabled =
true ;
7 8 ApplicationBarIconButton button1 =
new ApplicationBarIconButton ( ) ;
9 button1 . IconUri =
new Uri (
" /icons/appbar.add.rest.png " , UriKind . Relative ) ;
10 button1 . Text =
" button 1 " ;
11 button1 . Click + =
new EventHandler ( button1_Click ) ;
12 ApplicationBar . Buttons . Add ( button1 ) ;
13 14 ApplicationBarMenuItem menuItem1 =
new ApplicationBarMenuItem ( ) ;
15 menuItem1 . Text =
" menu item 1 " ;
16 menuItem1 . Click + =
new EventHandler ( menuItem1_Click ) ;
17 ApplicationBar . MenuItems . Add ( menuItem1 ) ;
修改ApplicationBarIconButton内容或属性:
1 ApplicationBarIconButton btn = ( ApplicationBarIconButton ) ApplicationBar . Buttons [
1 ] ;
2 3 if ( btn . Text = =
" button " )
4 {
5 btn . Text =
" Hi " ;
6 btn . IconUri =
new Uri (
" /icons/appbar.edit.rest.png " , UriKind . Relative ) ;
7 }
8 else if ( btn . Text = =
" Hi " )
9 {
10 btn . Text =
" button " ;
11 btn . IconUri =
new Uri (
" /icons/appbar.add.rest.png " , UriKind . Relative ) ;
12 }
修改ApplicationBarMenuItem内容或属性:
1 ApplicationBarMenuItem mi = ( ApplicationBarMenuItem ) ApplicationBar . MenuItems [
0 ] ;
2 if ( mi . Text = =
" menu item " )
3 {
4 mi . Text =
" Hello " ;
5 }
6 else if ( mi . Text = =
" Hello " )
7 {
8 mi . Text =
" menu item " ;
9 }
ApplicationBar的切换
最后我们说下ApplicationBar的切换吧,我们经常见到在Panorama或Pivot控件中切换Item时ApplicationBar也随之切换。当然,我们在code里去用代码生成ApplicationBar,很容易可以实现这个效果,这里我们来讲一个更简单的方法,把ApplicationBar放到Resources中。
在Application.Resources中添加ApplicationBar:
在app.xaml中加入:
1 < Application.Resources > 2 < shell:ApplicationBar x:Key = " AppBar1 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Default " > 3 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.next.rest.png " Text = " item1 " Click = " ApplicationBarIconButton_Click " / > 4 < /shell:ApplicationBar > 5 < shell:ApplicationBar x:Key = " AppBar2 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Minimized " > 6 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.edit.rest.png " Text = " item2 " Click = " ApplicationBarIconButton_Click_1 " / > 7 < /shell:ApplicationBar > 8 < shell:ApplicationBar x:Key = " AppBar3 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Minimized " > 9 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.cancel.rest.png " Text = " item3 " Click = " ApplicationBarIconButton_Click_2 " / > 10 < /shell:ApplicationBar > 11 < /Application.Resources >
然后在Panorama控件的SelectionChanged事件中加入:
1 private void Panorama_SelectionChanged (
object sender, SelectionChangedEventArgs e )
2 {
3 switch ( ( ( Panorama ) sender ) . SelectedIndex )
4 {
5 case 0 :
6 ApplicationBar = ( ( ApplicationBar ) Application . Current . Resources [
" AppBar1 " ] ) ;
7 break ;
8 case 1 :
9 ApplicationBar = ( ( ApplicationBar ) Application . Current . Resources [
" AppBar2 " ] ) ;
10 break ;
11 case 2 :
12 ApplicationBar = ( ( ApplicationBar ) Application . Current . Resources [
" AppBar3 " ] ) ;
13 break ;
14 }
15 }
在PhoneApplicationPage.Resources中添加ApplicationBar
在xaml中:
1 < phone:PhoneApplicationPage.Resources > 2 < shell:ApplicationBar x:Key = " AppBar1 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Default " > 3 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.next.rest.png " Text = " item1 " Click = " ApplicationBarIconButton_Click " / > 4 < /shell:ApplicationBar > 5 < shell:ApplicationBar x:Key = " AppBar2 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Minimized " > 6 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.edit.rest.png " Text = " item2 " Click = " ApplicationBarIconButton_Click_1 " / > 7 < /shell:ApplicationBar > 8 < shell:ApplicationBar x:Key = " AppBar3 " IsVisible = " True " IsMenuEnabled = " True " Mode = " Default " > 9 < shell:ApplicationBarIconButton IconUri = " /icons/appbar.cancel.rest.png " Text = " item3 " Click = " ApplicationBarIconButton_Click_2 " / > 10 < /shell:ApplicationBar > 11 < /phone:PhoneApplicationPage.Resources >
在Pivot_SelectionChanged事件中:
1 private void Pivot_SelectionChanged (
object sender, SelectionChangedEventArgs e )
2 {
3 switch ( ( ( Pivot ) sender ) . SelectedIndex )
4 {
5 case 0 :
6 ApplicationBar = ( ( ApplicationBar )
this . Resources [
" AppBar1 " ] ) ;
7 break ;
8 case 1 :
9 ApplicationBar = ( ( ApplicationBar )
this . Resources [
" AppBar2 " ] ) ;
10 break ;
11 case 2 :
12 ApplicationBar = ( ( ApplicationBar )
this . Resources [
" AppBar3 " ] ) ;
13 break ;
14 }
15 }
参考:
源码:
本文转自 sun8134 博客园博客,原文链接: http://www.cnblogs.com/sun8134/archive/2012/05/16/2504289.html ,如需转载请自行联系原作者