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