Silverlight DataGrid内多个数据源绑定的实现办法

我们在Silverlight开发过程中，很常见的情形是已经做好绑定的DataGrid内需要绑定不同数据源的数据，比如一个来自不同数据源的ComboBox。

下面举个简单的例子：

 

 

我们最终要显示的结果如上图所示，其中姓名，年龄来自 MainData 数据源，籍贯来自 BindingJG 数据源。

 

先简单把这两个数据源建好：

 

MainData:

using System.Collections.ObjectModel; namespace SilverlightBinding { public class People { public string Name { get; set; }//姓名 public int Age { get; set; }//年龄 public People(string name,int age) { Name = name; Age = age; } } public class MainData { private ObservableCollection<People> _myPeople; public MainData() { _myPeople = new ObservableCollection<People>(); _myPeople.Add(new People("张三", 17)); _myPeople.Add(new People("李四", 18)); _myPeople.Add(new People("王五", 19)); _myPeople.Add(new People("赵六", 20)); } public ObservableCollection<People> myPeople { get { return _myPeople; } private set { } } } }

 

BindingJG :

 

using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Collections.ObjectModel; namespace SilverlightBinding { public class BindingJG { private ObservableCollection<string> _jiguan; public BindingJG() { _jiguan = new ObservableCollection<string>(); _jiguan.Add("北京"); _jiguan.Add("上海"); _jiguan.Add("广州"); _jiguan.Add("海南"); } public ObservableCollection<string> JiGuan { get { return new ObservableCollection<string>(_jiguan); } private set { } } } }

 

现在要把这两个数据源同时绑定到MainPage.xaml 里的 dataGrid上，

要先添加对籍贯数据类的引用：

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SilverlightBinding.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:comJG="clr-namespace:SilverlightBinding"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

 

 然后就可以在dataGrid里引用籍贯数据，以下是dataGrid的完整代码：

<sdk:DataGrid x:Name="dataGrid" Width="300" Height="200" AutoGenerateColumns="False" ItemsSource="{Binding}"> <sdk:DataGrid.Resources> <comJG:BindingJG x:Key="iJG"/> </sdk:DataGrid.Resources> <sdk:DataGrid.Columns> <sdk:DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="Auto"/> <sdk:DataGridTextColumn Binding="{Binding Age}" Header="年龄" Width="Auto"/> <sdk:DataGridTemplateColumn Header="籍贯" Width="Auto"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <ComboBox x:Name="JGCombo" DataContext="{Binding Source={StaticResource iJG}}"> <ItemsControl ItemsSource="{Binding JiGuan}"> <ItemsControl.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ComboBox> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> </sdk:DataGrid.Columns> </sdk:DataGrid>

 

其中的关键代码：

                            <ComboBox x:Name="JGCombo" DataContext="{Binding Source={StaticResource iJG}}">
                                <ItemsControl ItemsSource="{Binding JiGuan}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding}"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </ComboBox>

 再把MainData数据赋值给dataGrid就可以了

public MainPage() { InitializeComponent(); MainData md = new MainData (); this.dataGrid.ItemsSource = md.myPeople; }

 

完整代码下载： Silverlight 4