Skip to end of metadata
Go to start of metadata

This walkthrough shows you how to create an application that shows a number of business scenarios such as navigation, data list presentation, selection, and item details, which is implemented using MVVM pattern.

In this walkthrough, you perform the following tasks:

  • Create a ClientUI MVVM Project using Intersoft ClientUI Advanced Navigation project template.
  • Create the Model class that represents the Product data entity.
  • Create the View page that represents the user interface of the application.
  • Create the ViewModel class that describes the View.
  • Bind the properties of UI controls in the View, such as the ItemsSource property of the UXListBox, to the ViewModel.
  • Use UXNavigationButton to navigate between pages.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010
  • Silverlight 4 Tools for Visual Studio 2010
  • Intersoft ClientUI  

Creating a new ClientUI MVVM Business Application Project

The first step is to create a new ClientUI MVVM Business Application using Intersoft ClientUI MVVM Business Application project template in Visual Studio.

To create the ClientUI Business Navigation Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI Advanced Navigation Application project named LOB-NavMVVM using Intersoft ClientUI MVVM Business Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Business Application Template.
  3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform linq query to xml data.

To add the data file

  1. In your project, create new folders and name it SampleData.
  2. Right click in SampleData folder and add new xml, name it ProductDataSource.xml.
  3. Open ProductDataSource.xml and insert content as below.

     

    XML
  4. Click on the ProductDataSource.xml file and press F4 to open the Property Window. Change the Build Action property to Resources.

To add the resources file

  1. In your project, create two new folders and name it Assets\ToolBar and Assets\Images\Products.
  2. In Assets\Images\Products folder, copy all product images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid\images\products].
  3. In Assets\ToolBar folder, copy Save.png file from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Desktop Application\ClientUI_Desktop_Application\Assets\ToolBar].
  4. In Assets\Images folder, copy Information.png file from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Commands].

Creating Model Class

This section shows how to create the Product model class that represents the data entity used in this walkthrough. The Product model class contains constructors to easily parse data from XML, and also contains methods such as Validate which is used to validate the data entity.

To create the Product Model Class

  1. Create a model class that inherits ModelBase class under the Models folder. You can name it Product.cs.
  2. Add ProductId property to the Product model class by defining the backing field along with complete getter and setter in the property. In the setter property, you need to call the OnPropertyChanged method after the backing field is assigned to the new value.

     

    C#
  3. Also add ProductName, Category, Brand, ProductImage, Price, ProductDescription and NavigateUri property to the Product model class by repeating step number 2. Add constructor and Validate method.

     

    C#

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as UXListBox, UXNavigationButton, and UXFrame. The UXListBox is used to display a collection of product data, while the UXNavigationButton in UXListBox is used for navigate to the product detail page which shows details of a product.

To create the product view

  1. First we will remove the default Products.xaml in our project then we will create a new UXPage with the same name. This default page actually still can be used for navigate but in this walkthrough we want to show you how easy to create a new page using Intersoft ClientUI Framework so we will delete this default and create a new one. For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010.
  2. Then open the Products.xaml.
  3. Add Intersoft:DockPanel to the LayoutRoot and set the FillChildMode property to Custom and Margin property to 10.
  4. Add StylishLabel control to the Intersoft:DockPane land set the Content property to Products Page, the Intersoft:DockPanel.Dock property to Top and the Style property to {StaticResource PageHeaderStyle}.
  5. Add UXListBox control to the Intersoft:DockPanel and set the Intersoft:DockPanel.Dock property to Left and the MinWidth property to 150.

     

    XAML

     




  6. Add UXFrame control and set the following properties to the control.
     

    PropertyValue
    NameProductFrame
    DisplayFragmentInBrowserTrue
    EnablePageTransitionTrue
    DefaultTransitionEffectSlideRight
    BorderThickness0
    Intersoft:DockPanel.IsFillElementTrue

     

     

    XAML
  7. Add Intersoft:UXFrame.UriMapper to the UXFrame control for navigation.

     

    XAML

To create the product details view

  1. Add a new UXPage to the Views folder in your Sirlverlight project and name it ProductDetails.xaml. For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010.
  2. Open the ProductDetails.xaml page and clear the content inside the LayoutRoot.
  3. Add StylishLabel control to the LayoutRoot and set the following properties to the control.

    PropertyValue
    NameInfoLabel
    ContentPlease select a product from the list in the left to see its details.
    HorizontalAlignmentCenter
    VerticalAlignmentCenter
    Style{StaticResource SimpleLabelStyle}
    ContentTypeContentAndImage
    ImageSource../Assets/Images/Information.png
  4. Add DockPanel to the LayoutRoot and set the Name property to DetailPanel and the FillChildMode property to Custom.
  5. Add UXToolBar control to the DockPanel and set the following properties to the control.

  6. Add UXToolGroup control to the UXToolBar control. Add UXToolBarButton control to the UXToolBar and set the Content Property to Save, the DisplayMode property to ContentAndImage and the Icon property to ../Assets/ToolBar/Save.png.
  7. Add UXToolGroup control to the UXToolBar control and set the Placement property to RightOrBottom
  8. Add UXCallOut control to the UXToolGroup control and set the DisplayAnimation property to Fly, the PreferredPosition property to Bottom, the MouseLeaveAction property to HidePopup and the VerticalContentAlignment property to Center.
  9. Add TextBlock to the UXCallOut control and set TextWrapping property to Wrap, the Margin property to 4, the Width property to 200 and the Text property to This page uses MVVM pattern and navigation.

     

    XAML

     




  10. Add ContentReflector control to the DockPanel and set the following properties to the control.

    PropertyValue
    HorizontalAlignmentLeft
    Intersoft:DockPanel.DockLeft
    Width160
    VerticalContentAlignmentBottom
    Margin12
  11. Add Image control to the ContentReflector control.
  12. Add ExpandableGroupBox control to the DockPanel and set Header property to General Information, the Intersoft:DockPanel.IsFillElement property to True and the VerticalAlignment property to Top.

     

    XAML

     




  13. Add UXItemsControl control to the ExpandableGroupBox control and set the ItemContainerStyle property to {StaticResource FieldLabelStyle}.
  14. Add five FieldLabel to the UXItemsControl.

     

    XAML

     


Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section. The ViewModel defines the ProductCollection to represent an observable collection of Product and NavigateUri properties used to indicate the Uri you want to navigate.

To create the ProductsViewModel

  1. Add a new class to the ViewModels folder in your Silverlight project and name it ProductsViewModel.cs.
  2. Open ProductsViewModel.cs and inherit the class from ViewModelBase class.
  3. Add the ProductCollection property, such as shown in the following example.

     

    C#
  4. Add System.Linq to used Select method.

     

    C#
  5. Create a LoadProducts method to fill the product collection based on the data from ProductDataSource.xml and call the method during object construction.

     

    C#

To create the ProductDetailsViewModel

  1. Add a new class to the ViewModels folder in your Silverlight project and name it ProductDetailsViewModel.cs.
  2. Open ProductDetailsViewModel.cs and inherit the class from ViewModelBase class.
  3. In this view model, you add the Product properties which represent a Product data and _productViews to get ProductViewModel data. You also add DelegateCommand such as SaveCommand that will be bound to the toolbar buttons in the View, such as shown in the following code listing.

     

    C#
  4. Create a constructor that receives two parameters and two methods for the SaveCommand.

     

    C#

Binding the View to the ViewModel

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel such as the data context, selection and command.

To bind the Products View to the ProductViewModel

  1. Declare the namespace that maps to the ProductsViewModel class in the Products page.

     

    XAML
  2. Instantiate a new instance of the ProductsViewModel class in the UXPage resources and name it ProductsViewModel. Bind the DataContext property of the LayoutRoot to the ProductsViewModel through the static resource extension markup.

     

    XAML
  3. Bind ItemsSource property of UXListBox with the ProductCollection property that existed in the ViewModel.

     

    XAML
  4. Create a DataTemplate to define the item template for the UXListBox. Add the necessary controls such as UXNavigationButton and UXSeparator that represents the user interface to display the Product information, and bind these controls to the ViewModel through the provided properties and we  to add style for UXListBoxItem, such as shown in the following example.

     

    XAML
  5. Set the ItemTemplate and Style of the UXListBox to the data template and style that created in the previous step.

     

    XAML

To bind the ProductDetails View to the ProductDetailsViewModel

  1. Open ProductDetails.xaml.cs and the DataContext properties in OnNavigateTo method.

     

    C#
  2. Bind UXToolBarButton Command property to the SaveCommand that existed in the ProductDetailsViewModel.

     

    XAML
  3. Bind the Source property of Image control to the ProductImage property of the ProductDetailsViewModel.

     

    XAML
  4. Bind the Text property of all UXTextBox controls inside UXItemsControl control to their respective data.

     

    XAML

Creating a New Navigation Button

This section shows how to create a new navigation button using UXNavigationButton and set the NavigationUri to Products.xaml page you just created in the previous section.

To create the Products navigation button

  1. Open MainPage.xaml.
  2. Then remove the default UXNavigationButton that used to navigate to Products.xaml. We remove the default UXNavigationButton just to how simple we can create a navigation button in the next step.
  3. Add new UXNavigationButton after Customers button.
    Set the following properties:

    PropertyValue
    ContentProducts
    NavigateUri/Products
    IconAssets/Images/Products.png
    XAML
  4. Insert a view code in UXFrame control which will be used to navigate into the product page.

     

    XAML
  5. Save, build and run the project.
    Click on the Products button to navigate to the Products page.

After the application is running in the browser, you can try to click on the navigation button it will shows product page. Then click one of the list box item it will show the selected product details, such as shown in the following figure.


You also can try to change RequiresAuthentication property in your view to true and run your project and try to click again in your products button you will see a login page. This login page shows because you need to authenticate first to be able to see this view. If you want only users with certain roles can view the page, set the RequiresRole property with certain role that allow to access the page.

 

C#

 

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM project using project template, and create the classes and page based on the Model, View and ViewModel pattern. You also learned how to bind UXListBox to a collection of data, how to navigate using UXNavigationButton and then bind the UXToolBarButton to a DelegateCommand in the ViewModel.

For more information about application development using MVVM pattern, see MVVM Pattern Overview. For more information about navigation framework and its concepts, see Navigation Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

ProductDataSource.xml

 

XML

 

Product.cs

 

C#

 

MainPage.xaml

 

XAML

 

Products.xaml

 

XAML

 

ProductDetails.xaml

 

XAML

 

ProductsViewModel.cs

 

C#

 

ProductDetailsViewModel.cs

 

C#

 

ProductDetails.xaml.cs

 

C#