Silverlight实用窍门系列：18.DataGrid内绑定ComboBox和ListBox以及取值【附带源码实例】

   本章主要解决如何在DataGrid的行内绑定ComboBox和ListBox。在数据集方面，先建立一个城市实体类，这个实体类有3个属性，分别是城市名、城市区号、城市区县集合。城市区县集合是很多个区县的集合，所以区县类也是一个实体类包括2个属性分别为区县名和区县值。在这里城市类集合绑定到DataGrid中，区县类集合绑定到ComboBox和ListBox中。

        首先我们建立城市实体类和区县实体类集合：

/// <summary>
/// 城市实体类
/// </summary>
public class City
{
private string cityName;
private string cityNum;
private List < Combo > comboboxList;
/// <summary>
/// 城市名
/// </summary>
public string CityName
{
get { return cityName; }
set { cityName = value; }
}
/// <summary>
/// 城市电话区号
/// </summary>
public string CityNum
{
get { return cityNum; }
set { cityNum = value; }
}
/// <summary>
/// 城市区县类集合
/// </summary>
public List < Combo > ComboboxList
{
get { return comboboxList; }
set { comboboxList = value; }
}
}
/// <summary>
/// ComboBox需要绑定的类
/// </summary>
public class Combo
{
private string name;
private string value;
/// <summary>
/// 区县名
/// </summary>
public string Name
{
get { return name; }
set { name = value; }
}
/// <summary>
/// 区县值
/// </summary>
public string Value
{
get { return this .value; }
set { this .value = value; }
}
}

        然后我们在初始化城市类的集合List<>代码如下：

// 实例化City类集合
List < City > cityList = new List < City > ()
{
new City()
{
CityName = " 成都 " ,
CityNum = " 028 " ,
ComboboxList = new List < Combo > ()
{
new Combo(){ Name = " 武侯区 " , Value = " 28 " },
new Combo(){ Name = " 青羊区 " , Value = " 281 " },
new Combo(){ Name = " 成华区 " , Value = " 283 " },
new Combo(){ Name = " 高新区 " , Value = " 282 " },
new Combo(){ Name = " 金牛区 " , Value = " 284 " }

}
},
new City()
{
CityName = " 北京 " ,
CityNum = " 010 " ,
ComboboxList = new List < Combo > ()
{
new Combo(){ Name = " 朝阳区 " , Value = " 10 " },
new Combo(){ Name = " 海淀区 " , Value = " 103 " },
new Combo(){ Name = " 崇文区 " , Value = " 104 " },
new Combo(){ Name = " 丰台区 " , Value = " 105 " },
new Combo(){ Name = " 东城区 " , Value = " 120 " }

}
}
};

         最后  this.ShowCityList.ItemsSource = cityList;将城市类集合绑定到DataGrid的ItemsSource上面。下面我们来观看DataGrid的XAML代码，在这里主要是在DataGrid的DataGridTemplateColumn.CellTemplate模板下面添加DataTemplate数据模板，在这个模板下面添加一个ComboBox或者ListBox控件，ComboBox和ListBox的ItemsSource绑定区县类集合的ComboboxList属性（ ItemsSource="{Binding ComboboxList}"）。当然这样绑定下来显示的名称是不正确的。所以ComboBox控件还需要添加ComboBox.ItemTemplate模板，此模板内部在绑定一个TextBlock控件，此控件的Text属性绑定区县类的Name属性（Text="{Binding Name}"）。

< sdk:DataGrid HorizontalAlignment = " Left " AutoGenerateColumns = " False " Margin = " 28,71,0,0 " Name = " ShowCityList " VerticalAlignment = " Top " Height = " 271 " Width = " 324 " >
< sdk:DataGrid.Columns >
< sdk:DataGridTextColumn Header = " 城市 " Binding = " {Binding CityName} " IsReadOnly = " True " Width = " 108 " />
< sdk:DataGridTemplateColumn Header = " 区县 " >
< sdk:DataGridTemplateColumn.CellTemplate >
< DataTemplate >
< ComboBox Width = " 80 " Height = " 24 " ItemsSource = " {Binding ComboboxList} " SelectionChanged = " ComboBox_SelectionChanged " >
< ComboBox.ItemTemplate >
< DataTemplate >
< TextBlock Width = " 80 " Text = " {Binding Name} " ></ TextBlock >
</ DataTemplate >
</ ComboBox.ItemTemplate >
</ ComboBox >
</ DataTemplate >
</ sdk:DataGridTemplateColumn.CellTemplate >
</ sdk:DataGridTemplateColumn >
< sdk:DataGridTemplateColumn Header = " 区县级别 " >
< sdk:DataGridTemplateColumn.CellTemplate >
< DataTemplate >
< ListBox Width = " 80 " ItemsSource = " {Binding ComboboxList} " >
< ListBox.ItemTemplate >
< DataTemplate >
< TextBlock Width = " 80 " Text = " {Binding Name} " ></ TextBlock >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ DataTemplate >
</ sdk:DataGridTemplateColumn.CellTemplate >
</ sdk:DataGridTemplateColumn >
</ sdk:DataGrid.Columns >
</ sdk:DataGrid >

        在ComboBox中，我添加了一个事件SelectionChanged="ComboBox_SelectionChanged"来捕捉当ComboBox改变选项之后获取ComboBox的值。下面请看ComboBox_SelectionChanged的事件处理代码：

private void ComboBox_SelectionChanged( object sender, SelectionChangedEventArgs e)
{
ComboBox combobox = sender as ComboBox;
// 选择到的项转化为类Combo。
Combo combo = combobox.SelectedValue as Combo;
MessageBox.Show(combo.Name + " 的区号是： " + combo.Value);
}

        注意：使用ComboBox.SelectedValue获取到的是实体类Combo。

        本例采用VS2010+Silverlight4.0编写，点击 SLDataTemplate.rar 下载实例源码，下面大家看效果图：

    本文转自程兴亮博客园博客，原文链接：http://www.cnblogs.com/chengxingliang/archive/2011/03/03/1969824.html，如需转载请自行联系原作者