在上一篇文章中，我們實(shí)現(xiàn)了如何讓Silverlight4中的DataPager控件實(shí)現(xiàn)服務(wù)器端分頁而不是客戶端分頁，我們?cè)诜?wù)器端的WCF Ria Service實(shí)現(xiàn)了一個(gè)取得總頁數(shù)的函數(shù)和一個(gè)按頁碼取得數(shù)據(jù)的函數(shù)。今天補(bǔ)充一下，把上文的前臺(tái)部分用MVVM的模式實(shí)現(xiàn)。也比較簡(jiǎn)單的。

　　先看一下Xaml代碼，我們實(shí)現(xiàn)一個(gè)DataGrid和一個(gè)DataPager，有一個(gè)BusyIndicator，當(dāng)DataGrid加載數(shù)據(jù)的時(shí)候自動(dòng)顯示一個(gè)進(jìn)度條并灰掉后面的控件，這個(gè)是和ViewModel的IsBusy綁定的，具體實(shí)現(xiàn)看我的另外一篇文章。代碼：

<UserControl x:Class="MySilverlightApplication"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="//schemas.microsoft.com/expression/blend/2008"
xmlns:i="//schemas.microsoft.com/expression/2010/interactivity"
xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:Height="Auto" d:Width="Auto" xmlns:sdk=
"//schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit=

"//schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:HeaderedContentControl Name=
"headeredContentControl1" Width="Auto">
<toolkit:BusyIndicator Name="busyIndicator1" IsBusy=
"{Binding IsBusy}" DisplayAfter="0" BusyContent="Fetching data...">
<sdk:DataGrid AutoGenerateColumns="False"
GridLinesVisibility="None" Width="Auto"
HorizontalAlignment="Stretch" VerticalAlignment=
"Stretch" BorderThickness="0,0,0,0" SelectionMode="Single"
Name="dgvRecentUpdated" IsReadOnly="True">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="ProductID" Binding=
"{Binding ProductID}" Visibility="Collapsed" />
<sdk:DataGridTextColumn Header="Product Name"
Binding="{Binding Name}" Width="120" />
<sdk:DataGridTextColumn Header="Product Desc&quot;

Binding="{Binding Desc}" Width="120"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</toolkit:BusyIndicator>
</toolkit:HeaderedContentControl>
<sdk:DataPager Height="25" HorizontalAlignment=
"Stretch" Name="dataPager1" Source="{Binding PagerContext}"
VerticalAlignment="Bottom" Width="Auto" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="PageIndexChanged">
<i:InvokeCommandAction Command=
"{Binding SetResultsByPagerCommand}" CommandParameter="
{Binding PageIndex, ElementName=dataPager1, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</sdk:DataPager>
</Grid>
</UserControl>

　　注意DataPager的Source綁定，PageIndexChanged事件綁定到Command，綁定的事件的參數(shù)是PageIndex - 請(qǐng)求的頁碼。

　　先來實(shí)現(xiàn)PageIndexChanged事件綁定的SetResultsByPagerCommand ：

//在ViewModel構(gòu)造函數(shù)中
SetResultsByPagerCommand = new DelegateCommand
(SetResultsByPager, CanSetResultsByPager);

//....

private int _PageSize = 10;

public ICommand SetResultsByPagerCommand { get; set; }

public void SetResultsByPager(object param)
{
//調(diào)用WCF Ria Service得到當(dāng)前頁碼的數(shù)據(jù)
PerformQuery<MyEntity>(
MyDomainContext.GetDataQuery("234", _PageSize,
Convert.ToInt32(param) + 1), //這個(gè)是當(dāng)前的頁碼
GetMyDataComplete); //在這個(gè)事件中更新DataGrid模型，自動(dòng)通知界面
}

private bool CanSetResultsByPager(object param)
{
return true;
}

再來實(shí)現(xiàn)DataPager綁定的Source - PagerContext：

private List<int> pagerItemsCount;
private PagedCollectionView _PagerContext;

public PagedCollectionView PagerContext
{
get
{
if (pagerItemsCount == null)
pagerItemsCount = new List<int>();

if (_PagerContext == null)
{
PagedCollectionView pcv = new PagedCollectionView(pagerItemsCount);
pcv.PageSize = 1;

_PagerContext = pcv;
}
return _PagerContext;
}
set
{
if (PagerContext == value)
return;

_PagerContext = value;
NotifyPropertyChanged("PagerContext"); //會(huì)自動(dòng)通知刷新DataPager
}
}

　　最后就是初始化DataPager，或者在你需要數(shù)據(jù)的地方去從服務(wù)器端獲得總頁數(shù)并load這個(gè)DataPager的Source了，比如這樣：

MyDomainContext.GetTotalPages("123",
_PageSize, s =>
{
if (!s.HasError)
{
if (pagerItemsCount != null)
pagerItemsCount.Clear();

for (int i = 1; i <= s.Value; i++)
pagerItemsCount.Add(i);

PagedCollectionView pcv = new PagedCollectionView(pagerItemsCount);
pcv.PageSize = 1;

PagerContext = pcv; //刷新DataPager綁定的Source
SetResultsByPager(0); //強(qiáng)制跳轉(zhuǎn)到第一頁，這一步也可以省略，如果你是初始化就加載這個(gè)視圖的話。
}
else
{
// 通知發(fā)生了錯(cuò)誤
//if (LoadingCompleteFailed != null)
// LoadingCompleteFailed(this, new ResultsArgs(s.Error));
}

}, null);

　　整個(gè)邏輯就是：從服務(wù)器獲得總頁數(shù) >> 異步完成的時(shí)候綁定到DataPager的Source >> 自動(dòng)觸發(fā)IndexChanged >> 從服務(wù)器端加載指定頁的數(shù)據(jù)并顯示 >;> 用戶可以任意導(dǎo)航上一頁下一頁....

　　這樣我們?cè)?.Xaml.cs里面沒有任何代碼，非常清爽的MVVM模式實(shí)現(xiàn)！

　?。?strong>注意：有人還畫蛇添足綁定了DataPager的PageSize屬性和CurrentIndex屬性到ViewModel，根本沒有必要，這些DataPager的PageIndex會(huì)自動(dòng)管理當(dāng)前的頁碼數(shù)。PageSize也沒有必要設(shè)，因?yàn)槲覀兪窃诜?wù)器端計(jì)算分頁數(shù)的?。?/p>
標(biāo)簽：MVVM