接着上一篇開發日誌繼續探討。
上一篇日誌講到在一個PhonePage裏綁定一個數據集，用的是如下的方法：
d:DataContext="{d:DesignData TestDataViewModel.xaml}"一個xmal文件表示一個數據集，在上面代碼裏的d:DataContenxt裏研究了半天，實在沒有辦法讓一個DataContenxt綁定第二個xaml的數據集，玩過Linq的人都知道，一個DataContenxt下面卻可以定義多個集合的，接下來的思路就是怎麼在一個xmal里加入兩個數據集。
自己設計了兩個除了類名外其他都一樣的數據類（TestDataItem.cs及TestDataItem2.cs），如下圖的文件目錄所示，爲了顯示方便將其放到兩個不同的文件夾裏，這時就要注意namespace的問題啦。
上面的TestDataCollection.cs、TestDataCollection2、TestDataViewModel.xaml、TestDataViewModel2.xaml是個人作單獨顯示時用的，想將兩個數據集放到同一個DataContext裏不需要動用這幾個文件。而TotalTestDataCollection.cs是關鍵的所在，在此定義了一個含有兩個數據集合的大集合，其代碼如下所示：
//TotalTestDataCollection.cs
using MvTest.TestDataViewModel1;
using MvTest.TestDataViewModel2;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MvcTest.TotalDataViewModel
{
public class TotalTestDataCollection : INotifyPropertyChanged
{
/// <summary>
/// 數據集合1
/// </summary>
public ObservableCollection<TestDataItem> TestDataItems1 { get; private set; }
/// <summary>
/// 數據集合2
/// </summary>
public ObservableCollection<TestDataItem2> TestDataItems2 { get; private set; }
/// <summary>
/// 屬性更改事件回調
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// 構造函數
/// </summary>
public TotalTestDataCollection()
{
this.TestDataItems1 = new ObservableCollection<TestDataItem>();
this.TestDataItems2 = new ObservableCollection<TestDataItem2>();
}
/// <summary>
/// INotifyPropertyChanged接口的實現
/// </summary>
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}如前一篇筆記強調的，要想讓VS認出你的ViewModel，必須要繼承INotifyPropertyChanged的接口。然後再新建一個xaml來設計兩個數據集的例子（方法見上一篇博文吧），其代碼如下所示：
//TotalDataViewModel.xaml
<!-- 這對應的是數據集的類名，表示一組數據-->
<vm:TotalTestDataCollection
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MvcTest.TotalDataViewModel"
xmlns:c1="clr-namespace:MvTest.TestDataViewModel1"
xmlns:c2="clr-namespace:MvTest.TestDataViewModel2">
<!--clr-namespace:MvcTest這是數據集的命名空間，帶文件夾的要注意啦-->
<vm:TotalTestDataCollection.TestDataItems1>
<c1:TestDataItem Index="0" Name="name0" Flag="True"></c1:TestDataItem>
<c1:TestDataItem Index="1" Name="name1" Flag="True"></c1:TestDataItem>
<c1:TestDataItem Index="2" Name="name2" Flag="True"></c1:TestDataItem>
</vm:TotalTestDataCollection.TestDataItems1>
<vm:TotalTestDataCollection.TestDataItems2>
<c2:TestDataItem2 Index="3" Name="name3" Flag="True"></c2:TestDataItem2>
<c2:TestDataItem2 Index="4" Name="name4" Flag="True"></c2:TestDataItem2>
<c2:TestDataItem2 Index="5" Name="name5" Flag="True"></c2:TestDataItem2>
</vm:TotalTestDataCollection.TestDataItems2>
</vm:TotalTestDataCollection>注意代碼裏的c1、c2的命名空間，否則會無法識別TestDataItem，當然，省事的方法就是將所有的文件放到一個目錄下面，好吧，個人是有強迫症的。就這樣將兩個數據集拼在一個xaml裏面了，下面就是在MainPage裏呈現出這些數據，爲此我設計了兩個LongListSelector,分別顯示不同的數據，爲了區分起見，我設計了兩個DataItemTemplate，如下面代碼所示：
//MainPage.xaml
<phone:PhoneApplicationPage
x:Class="MvcTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DataContext="{d:DesignData TotalDataViewModel/TotalDataViewModel.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--單條數據顯示的樣式-->
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="TestDataItemTemplate">
<StackPanel Margin="0,0,0,0">
<TextBlock Text="{Binding Index}"/>
<TextBlock Text="{Binding Name}" />
<!--TextBlock Text="{Binding Flag}" /-->
<StackPanel Height="1" Background="AliceBlue"></StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TestDataItemTemplate2">
<StackPanel Margin="0,0,0,0">
<TextBlock Foreground="Red" Text="{Binding Index}"/>
<TextBlock Foreground="Yellow" Text="{Binding Name}" />
<TextBlock Foreground="Green" Text="{Binding Flag}" />
<StackPanel Height="1" Background="RoyalBlue"></StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="我的應用程序" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="頁面名稱" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!--用一個LongListSelector來顯示數據集-->
<StackPanel>
<phone:LongListSelector Margin="0,0,0,0" ItemTemplate="{StaticResource ResourceKey=TestDataItemTemplate}" ItemsSource="{Binding TestDataItems1}"/>
<phone:LongListSelector Margin="0,0,0,0" ItemTemplate="{StaticResource ResourceKey=TestDataItemTemplate2}" ItemsSource="{Binding TestDataItems2}"/>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>只要d:DataContext關聯到TotalDataViewModel.xaml裏，編譯器倒可以自動感知內容，只要在LongListSelector裏綁定好指定的數據集就可以啦，其顯示效果如下圖所示：
最後總結一下，（1）先設計好你要顯示的數據類（TestDataItem.cs）；（2）設計好數據集的集合類（TotalTestDataCollection.cs）；（3）設計好數據集的內容（TestDataViewModel.xaml）；（4）在PhonePage裏呈現你的數據。步驟不多，四步而已，雖說如此，但要弄出這個效果可是花了我一個下午的時間，我真是Low爆啦。
末啦，同樣附上工程例子，for vs2013。