This walkthrough shows you how to display detail information of SelectedItem from UXFlow using UXDialogBox with MVVM pattern. This walkthrough demonstrates the following concept:

• Create a new MVVM application using Intersoft ClientUI MVVM Application project template.
• Create the Model class that represents the Font 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 SelectedItem property of the UXFlow, to the ViewModel.  
• Handle the click event to show a UXDialogBox programatically.

Prerequisites

You need the following components to complete this walkthrough:

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

You also need the following resources to complete this walkthrough:

• Intersoft.ClientUI.Samples.Assets assembly
  Available in: [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Bin\Debug

Creating a New Intersoft ClientUI MVVM Application Project

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

To create the ClientUI MVVM Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Application Template.
3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform LINQ query to xml data.
4. Also add reference to Intersoft.ClientUI.Samples.Assets assembly, the assembly is available from the provided ClientUI sample.

Creating The Model Class

This section shows how to create a Model class in Book.cs. The model will map each information in the data entity to a property.

To create the Book model class

1. Create a new Book.cs under the Models folder and inherit the ModelBase class.
2. Create a private variable and a public property for Author node with a String data type. In the setter property, OnPropertyChanged method must be called after the property is assigned a new value.
   

   C#	Copy Code
   private string _author; public string Author { get { return _author; } set { if (_author != value) { _author = value; OnPropertyChanged("Author"); } } }

3. Repeat the process for ID, Title, Category, Price, and Image node. String data type is used for ID, Title, and Category. Double is used for Price. Uri is used for Image.
4. Create a ShortTitle property to return formatted title if character length is more than or equal to 80.
   

   C#	Copy Code
   public string ShortTitle { get { if (this.Title.Length < 80) return this.Title; else return this.Title.Substring(0, 80) + "..."; } }

5. Create a constructor which accept XElement parameter. The constructor maps information in the data entity to each property in the class.
   

   C#

   Copy Code

   public Book(XElement x) : this() { this._author = x.Element("Author").Value.Trim(); this._title = x.Element("Title").Value.Trim(); this._category = x.Element("Category").Value.Trim(); this._ID = x.Element("ID").Value.Trim(); this._price = double.Parse(x.Element("Price").Value.Trim()); this._image = new Uri("/Intersoft.ClientUI.Samples.Assets;component/Images/Books/" + x.Element("Image").Value.Trim(), UriKind.RelativeOrAbsolute); }

Creating the ViewModel

This section shows how to create a ViewModel to hold the collection of Book object and selected Book object.

1. Create a new BookFlowViewModel.cs under the ViewModels folder and inherit the ViewModelBase class.
2. Create a public property to hold the collection of Book object.
   

   C#	Copy Code
   public ObservableCollection<Book> FilteredBooks{ get; set; }

3. Create a private variable and a public property to hold the selected Book object. In the setter property, OnPropertyChanged method must be called after the property is assigned a new value.
   

   C#	Copy Code
   private Book _selectedItem = null; public Book SelectedItem { get { return _selectedItem; } set { if (_selectedItem != value) { _selectedItem = value; OnPropertyChanged("SelectedItem"); } } }

4. Create a LoadBooks method which will be called in the constructor to load the Book object from the XML file to the Book collection variable. In this scenario only books with specific category is loaded.
   

   C#

   Copy Code

   public BookFlowViewModel() { this.LoadBooks(); } private void LoadBooks() { // loads book data from xml file StreamResourceInfo resource = System.Windows.Application.GetResourceStream( new Uri("Intersoft.ClientUI.Samples.Assets;component/Data/BookDataSource.xml", UriKind.Relative)); XDocument doc = XDocument.Load(resource.Stream); var filteredBooks = (from x in doc.Descendants("Book") where x.Element("Category").Value.Trim() == "Science and Nature" select new Book(x)).Take(8); FilteredBooks = new ObservableCollection<Book>(filteredBooks); }

Creating the View

This sections shows how to create two view. BookFlow.xaml display Book collection using UXFlow while BookDetail.xaml display the Book detail information.

To create the BookFlow view

This section shows how to create a page which hosts the UXFlow and UXButton. The page is using BookFlow.xaml.

1. Add a new UXPage to the Views folder in your Silverlight project and name it BookFlow.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. Declare the namespace that maps to the BookFlowViewModel class.
   

   XAML	Copy Code
   <Intersoft:UXPage ... xmlns:ViewModels="clr-namespace:DialogBoxFlowItemMVVM.ViewModels" ... > ... </Intersoft:UXPage>

3. Reference the BookFlowViewModel as the page DataContext.
   

   XAML	Copy Code
   <Intersoft:UXPage.DataContext> <ViewModels:BookFlowViewModel /> </Intersoft:UXPage.DataContext>

4. Add a new UXFlow control. Set the following properties:
   Locate the ItemsSource property.
   1. Click the ellipsis button in the header property column, a context menu will appear
   2. Select the Apply DataBinding Options...
   3. From the Tab Path, select FilteredBooks
   Locate the SelectedItem property.
   1. Click the ellipsis button in the header property column, a context menu will appear
   2. Select the Apply DataBinding Options...
   3. From the Tab Path, select SelectedItem
   4. From the Tab Options, set Mode to TwoWay

   Property	Value
   Margin	0,24,0,0
   ImageMemberPath	Image
   SubTitleMemberPath	Author
   TitleMemberPath	ShortTitle

   XAML	Copy Code
   <Intersoft:UXFlow x:Name="uXFlow1" Margin="0,24,0,0" ItemsSource="{Binding Path=FilteredBooks}" ImageMemberPath="Image" SubTitleMemberPath="Author" TitleMemberPath="ShortTitle" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" />

5. Add a new UXButton. Set the following properties:
   

   Property	Value
   Content	Detail
   HorizontalAlignment	Center
   VerticalAlignment	Top
   Width	150
   Height	24

   XAML	Copy Code
   <Intersoft:UXButton Content="Detail" HorizontalAlignment="Center" Name="uXButton1" VerticalAlignment="Top" Width="150" Height="24" Click="uXButton1_Click" />

   

To create the BookDetail view

This section shows how to create a UXDialogBox to show detail information for the SelectedItem in the UXFlow from the BookFlow view.

1. Add a new UXDialogBox to the Views folder in your Silverlight project and name it BookDetail.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. Remove the default Cancel UXButton.
   
3. Add a new DockPanel.
4. Add an Image control in the DockPanel which docked to the Left. Set the following properties:
   Width: 200
   Source: {Binding Path=Image}
5. Add a StackPanel in the DockPanel with IsFillElement property set to True and Orientation property to Vertical.
6. Add four FieldLabel with TextBlock as its Content.
7. Set the following properties for each of the FieldLabel:
   

   Property	Value
   HeaderWidth	70
   Header	ID:
   	Author:
   	Category:
   	Price:

   One of the FieldLabel XAML snippet:
   

   XAML	Copy Code
   <Intersoft:FieldLabel Header="ID: " HeaderWidth="70"> ... </Intersoft:FieldLabel>

8. Set the following properties for each of the TextBlock in the FieldLabel:
   

   Property	Value
   TextWrapping	Wrap
   Text	{Binding Path=ID}
   	{Binding Path=Author}
   	{Binding Path=Category}
   	{Binding Path=Price}

   One of the TextBlock XAML snippet:
   

   XAML	Copy Code
   <TextBlock Text="{Binding Path=ID}" TextWrapping="Wrap" />

9. Set the UXDialogBox Header to use TextBlock and bind the Text property to Title.
   

   XAML	Copy Code
   <Intersoft:UXDialogBox.Header> <TextBlock Text="{Binding Path=Title}" TextWrapping="Wrap" HorizontalAlignment="Center" /> </Intersoft:UXDialogBox.Header>

   
   

To show the UXDialogBox

This section shows how to show a UXDialogBox using UXButton Click event handler.

1. Open BookFlow.xaml.
2. Add a new Click event handler for the UXButton.
3. Open the code file, during the event handler set the DataContext of UXDialogBox  to the BookFlowViewModel SelectedItem property.
4. Call the ShowDialog method.
   

   C#	Copy Code
   private void uXButton1_Click(object sender, RoutedEventArgs e) { BookFlowViewModel bookVM = (BookFlowViewModel)this.DataContext; BookDetail dlgBox = new BookDetail(); dlgBox.DataContext = bookVM.SelectedItem; dlgBox.ShowDialog(null, (DialogResult) => { }); }

Viewing the Result

In order to view the result, you will need to build the Silverlight project and run the test page in browser.

To view the result

1. Clicking the Detail UXButton will show UXDialogBox.
2. The UXDialogBox will display detail information of the UXFlow SelectedItem.
   

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template, and create classes and page based on the MVVM pattern. You also learned how to bind UXFlow to a collection of data and how to utilize UXButton Click event handler to programatically show UXDialogBox with UXFlow SelectedItem object.

For more information about application development using MVVM pattern, see MVVM Pattern Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Book.cs

BookFlowViewModel.cs

BookFlow.xaml

BookFlow.xaml.cs

BookDetail.xaml

See Also