A preliminary study on the Silverlight framework-View

Viewmodel and riaservice are implemented in the previous sections. Next let's take a look at the binding of viewmodel and view, as shown below:

The code for productionview. XAML is as follows:

<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">
<! -- Add productionviewmodel reference -->
<Usercontrol. Resources>
<VM: productionviewmodel X: Name = "productionviewmodel"/>
</Usercontrol. Resources>
<! -- Bind to grid through datacontext -->
<Grid X: Name = "layoutroot" datacontext = "{binding source = {staticresource productionviewmodel}" minheight = "100">
<! -- Add the gdatagrid and datapager controls -->
<Data: DataGrid autogeneratecolumns = "true" name = "datagrid1" minheight = "20" minwidth = "100" grid. Row = "4"/>
<Data: datapager grid. Row = "5" name = "datapager1"/>
</GRID>
</Usercontrol>

Here, the control is bound to the data source in its *. CS file, which makes it easier for us to perform related operations. The Code is as follows:

 

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;
}
}
}

In this way, we can associate the view with the viewmodel.

Designing and developing Silverlight in mvvm mode truly achieves the goal of separating pages from logic. In the above example, our view can also be implemented using WPF.