Windows phone8 基础篇（三）常用控件（四）

首先道个歉，这两天家里断网，一直没办法更新。

10. 列表框

Listbox是指包含可选项列表。在xaml语法中如下：

<Listbox .../>

Listbox是一个现实项集合的控件，一次可以显示多个listbox中的多个项，可以使用selectionMode互相指定listbox是否允许多选，listbox是itemsControl的子类，可以使用items或者是itemssource属性设置其内容，可以直接填充listbox控件，也可以将空间绑定到项集合，listbox上显示数据有两种：

直接在listbox控件xaml页面上添加子控件元素。

通过数据保定的方式来显示。将listbox控件的itemsource属性设置为一个集合，在设置itemTemplate以自定义每个listboxitem的显示方式。Listbox的常用属性：

selectedItems 获取listbox控件的当前选定项的列表

selectionMode 获取或者设置listbox控件的选择行为

Datacontext 获取或者设置参与数据绑定的是上下文

Items 获取用于生成控件内容的集合

ItemsPanel 获取或者设置模板，它定义了控制项的布局的面板。

ItemsSource 获取或者设置用于生成ietemsControl的内容的集合

ItemTemplate 获取或者设置用于显示每个项的datatemplate

示例代码

使用listbox控件绑定客户列表

Customer.cs文件代码：客户类相当于一个实体类，存储了用户的姓名地址

using System;

namespace ListBoxDemo

{

/***

客户类

**/

public class Customer

{

public String FirstName { get; set; }

public String LastName { get; set; }

public String Address { get; set; }

public Customer(String firstName, String lastName, String address)

{

this.FirstName = firstName;

this.LastName = lastName;

this.Address = address;

}

}

}

Customers.cs 初始化客户类，为客户类封装一些数据

using System.Collections.ObjectModel;

namespace ListBoxDemo

{

public class Customers : ObservableCollection<Customer>

{

public Customers()

{

Add(new Customer("李", "小明",

"北京市金山路89号"));

Add(new Customer("林", "关关",

"广东省深圳市深南大道77号"));

Add(new Customer("张", "三三",

"广东省广州市天河路80号"));

Add(new Customer("李", "思思",

"上海市中心街9好"));

}

}

}

MainPage.xaml主要代码：

<phone:PhoneApplicationPage

x:Class="ListBoxDemo.MainPage"

.................>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<ListBox ItemsSource="{StaticResource customers}" Margin="0,5,-12,10">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Vertical">

<TextBlock Text="客户姓名：" Foreground="Blue"/>

<TextBlock Padding="5,0,5,0" Text="{Binding FirstName}" />

<TextBlock Text="{Binding LastName}" />

<TextBlock Text="客户地址：" Foreground="Blue" />

<TextBlock Text="{Binding Address}" />

<TextBlock Text="---------------------------" />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

11. 菜单栏

Applicationbar，这个就是所谓的菜单栏控件，包括iconbutton和Menu两种类型。Iconbutton就相当于菜单栏里的工具栏，可以带图标，Menu就是菜单栏，但是没有二级菜单。在创建之前一定要再Reference里加入Microsoft.Phone.shell,并且在xaml页面中添加如下代码：

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

它最多可以显示4个图标按钮。他们会自动从左到右进行排列。如果有额外的可以通过菜单项进行添加，这些菜单默认是不显示。只有单击右侧的省略号才会显示。按钮中的图标应该是48*48像素

下边一起看一下这段代码：

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar

IsVisible="True" IsMenuEnabled="True" Opacity="0.5"

StateChanged="ApplicationBar_StateChanged">

<shell:ApplicationBarIconButton IconUri="icon\ie.png" Text="浏览器" Click="ApplicationBarIconButton_Click"/>

<shell:ApplicationBarIconButton IconUri="icon\phone.png" Text="电话" Click="ApplicationBarIconButton_Click_1"/>

<shell:ApplicationBarIconButton IconUri="icon\about.png" Text="关于" Click="ApplicationBarIconButton_Click_2"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>

<shell:ApplicationBarMenuItem Text="MenuItem 2" Click="ApplicationBarMenuItem_Click_1"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

创建菜单的时候要注意：

1.xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"为applicationBar定义字首使用，引入Microsoft.Phone.Shell中的主要元素，提供元素的事件，元件使用；

2.Shell:ApplicationBar 负责设定applicationbar是否要显示，是否须有menu选项或者是按钮的出现。具有statechanged的事件可以监听。

3.Shell:ApplicationBarIconButton.用于applicationBar集合中，创建按钮选择。注意图标的build Action属性需要设置为 content 才能显示，否则会出现一个错误图片，并且图标的大小必须严格控制在48*48像素上。

4.Shell:ApplicationBar.MenuItems：指定applicationBar要出现的menu项目，内部包含多个item来显示，纯显示文字也可以加入ApplicationBarIconButton项目，但是只能显示其text属性。Icon不会被显示。Menus采用的是垂直排列。最多可以放50个项目

以上简单说明了applicationBar常见的Tag，蛋事实上可以分为两种：

a) Local Applibation bar

是指特定页面的菜单栏。项目中mainpage.xaml中默认的菜单栏就是这个。它属于xaml专用。需要注意的是如果.xaml文件在<phone:PhoneApplicationPage>中设定了applicationBar= ”{StaticResourceglobalApplicationBar}“,记得要先删除，否则会报错。

b) Globl Application Bar

这个是指全局的菜单栏。如果想要支持不同的.xaml文件也能存在相同的applicationbar，可以到APP.xaml文件中，在<Application.Resiurces>集合中加入<shell:ApplicationBar/>另外记得要设定x:Key属性。这样其他的.xaml文件才有办法使用全局统一的菜单栏，设定好后，可以在其他的.xaml文件中加入以下语法:

<phone:PhoneApplicationPage>设定applicationBar= ”{StaticResourceglobalApplicationBar}“

示例代码

测试菜单栏的各种事件

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar

IsVisible="True" IsMenuEnabled="True" Opacity="0.5"

StateChanged="ApplicationBar_StateChanged">

<shell:ApplicationBarIconButton IconUri="icon\ie.png" Text="浏览器" Click="ApplicationBarIconButton_Click"/>

<shell:ApplicationBarIconButton IconUri="icon\phone.png" Text="电话" Click="ApplicationBarIconButton_Click_1"/>

<shell:ApplicationBarIconButton IconUri="icon\about.png" Text="关于" Click="ApplicationBarIconButton_Click_2"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="MenuItem 1" Click="ApplicationBarMenuItem_Click"/>

<shell:ApplicationBarMenuItem Text="MenuItem 2" Click="ApplicationBarMenuItem_Click_1"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

.cs文件：

private void ApplicationBarIconButton_Click(object sender, EventArgs e)

{

textBlock1.Text = "你单击了浏览器菜单";

}

private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)

{

textBlock1.Text = "你单击了电话菜单";

}

private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)

{

textBlock1.Text = "你单击了关于菜单";

}

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)

{

textBlock1.Text = "你单击了MenuItem 1菜单";

}

private void ApplicationBarMenuItem_Click_1(object sender, EventArgs e)

{

textBlock1.Text = "你单击了MenuItem 2菜单";

}

private void ApplicationBar_StateChanged(object sender, Microsoft.Phone.Shell.ApplicationBarStateChangedEventArgs e)

{

textBlock1.Text = "你打开了Menu菜单列表";

}