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 下载实例源码，下面大家看效果图：

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/821957