SilverLight框架初探-View

前面分别实现了ViewModel与Riaservice，接下来让我们看看如果实现与View的绑定，如下：



ProductionView.xaml的代码如下：

<UserControl x:Class="Mvvm.Client.Views.ProductionView"
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:vm="clr-namespace:Mvvm.Client.ViewModels.ViewModels;assembly=Mvvm.Client.ViewModels"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<!--添加ProductionViewModel引用-->
<UserControl.Resources>
<vm:ProductionViewModel x:Name="productionViewModel"/>
</UserControl.Resources>
<!--通过DataContext与Grid绑定-->
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource productionViewModel}}" MinHeight="100">
<!--添加GdataGrid与DataPager控件-->
<data:DataGrid AutoGenerateColumns="True" Name="dataGrid1" MinHeight="20" MinWidth="100" Grid.Row="4" />
<data:DataPager Grid.Row="5" Name="dataPager1" />
</Grid>
</UserControl>

在这里，控件与数据源的绑定放在了其*.cs文件中，这样更方便于我们进行相关操作，代码如下：

public partial class ProductionView : UserControl
{
public ProductionView()
{
InitializeComponent();
BindingGrid();
}

void BindingGrid()
{
this.productionViewModel = new ViewModels.ViewModels.ProductionViewModel();
base.DataContext = this.productionViewModel;
this.productionViewModel.QueryCommand.Execute(null);

// Wrap the itemList in a PagedCollectionView for paging functionality
PagedCollectionView itemListView = new PagedCollectionView(this.productionViewModel.ListProduction);
if (itemListView != null)
{
dataGrid1.ItemsSource = itemListView;
dataPager1.Source = itemListView;
dataPager1.PageSize = 20;
dataPager1.DataContext = this.dataPager1;
}
}
}

这样，我们就能够将View与ViewModel关联起来。

以MVVM这么模式来设计开发Silverlight，真正意义上达到了我们要实现页面与逻辑分离的目的。上面例子中，我们的View也可以用WPF来实现。