This walkthrough shows how to change the data source from within the ViewModel which is triggered from toolbar buttons that are bound to a DelegateCommand in the ViewModel class. 

In this walkthrough, you perform the following tasks:

• Create ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template
• Create the Model class that represents the Todo data entity
• Create the View page that represents the user interface of the application
• Create the ViewModel class that describes the View and provides the commands to change the data source which is bound to the list box that defined in the View
• Bind the properties of UI controls in the View, such as the Command property of the tool bar buttons and the ItemsSource property of the list box to the ViewModel

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 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. Copy ValidationViewModelBase.cs file from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.ClientUIFramework\ViewModels\ into ViewModels folder
4. 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 folder with name SampleData.
2. In SampleData folder, insert the data source from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Data\TodoDataSource.xml.
3. Click on the ToDataSource.xml file and press F4 to open the Property Window. Change the Build Action property to Resources. 

Creating Model Class

This section shows how to create the Todo model class that represents the data entity used in this walkthrough. The Todo model class contains constructors to easily parse data from XML.

To create the Todo Model Class

1. Create a model class that inherits ModelBase class under the Models folder. You can name it Todo.cs.
2. Add Title property to the Todo 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#	Copy Code
   private string _title; public string Title { get { return _title; } set { if (_title != value) { _title = value; OnPropertyChanged("Title"); } } }

3. Also add Notes, Category, Tags, Created, Due and  IsCompleted property to the Todo model class by repeating step number 2.
   Add constructor to parse the the data from xml.
   

   C#

   Copy Code

   public class Todo : ModelBase { private string _title; private string _notes; private string _category; private string _tags; private DateTime? _created; private DateTime? _due; private bool _isCompleted; public string Title { get { return _title; } set { if (_title != value) { _title = value; OnPropertyChanged("Title"); } } } public string Notes { get { return _notes; } set { if (_notes != value) { _notes = value; OnPropertyChanged("Notes"); } } } public string Category { get { return _category; } set { if (_category != value) { _category = value; OnPropertyChanged("Category"); } } } public string Tags { get { return _tags; } set { if (_tags != value) { _tags = value; OnPropertyChanged("Tags"); } } } public DateTime? Created { get { return _created; } set { if (_created != value) { _created = value; OnPropertyChanged("Created"); } } } public DateTime? Due { get { return _due; } set { if (_due != value) { _due = value; OnPropertyChanged("Due"); } } } public bool IsCompleted { get { return _isCompleted; } set { if (_isCompleted != value) { _isCompleted = value; OnPropertyChanged("IsCompleted"); } } } public Todo() { } public Todo(XElement x) { _title = !String.IsNullOrEmpty(x.Element("Title").Value.Trim()) ? x.Element("Title").Value.Trim() : ""; _notes = !String.IsNullOrEmpty(x.Element("Notes").Value.Trim()) ? x.Element("Notes").Value.Trim() : ""; _category = !String.IsNullOrEmpty(x.Element("Category").Value.Trim()) ? x.Element("Category").Value.Trim() : ""; _tags = !String.IsNullOrEmpty(x.Element("Tags").Value.Trim()) ? x.Element("Tags").Value.Trim() : ""; _created = !String.IsNullOrEmpty(x.Element("Created").Value.Trim()) ? DateTime.Parse(x.Element("Created").Value.Trim()) : (Nullable<DateTime>)null; _due = !String.IsNullOrEmpty(x.Element("Due").Value.Trim()) ? DateTime.Parse(x.Element("Due").Value.Trim()) : (Nullable<DateTime>)null; _isCompleted = bool.Parse(x.Element("IsCompleted").Value.Trim()); } }

Creating The View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as UXListBox, UXToolBar, and UXToolBarButton. The UXListBox is used to display a collection of Todo data, while the UXToolBarButton is used to execute the command which change the data source of the UXListBox.

To create the View

1. Add a new Intersoft UXPage to the Views folder in your Silverlight project and name it TodoList.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 newly created TodoList.xaml page and clear the content inside the LayoutRoot.
3. Create a Grid inside the LayoutRoot and set the Width property to 500 and the Height property to 300.
4. Add Intersoft DockPanel control to the Grid and set its FillChildMode property to Last.
5. Add UXToolBar control to the DockPanel and set the following properties to the control.
   

   OverflowHandleVisibility	AsNeeded
   GripHandleVisibility	Collapsed
   Intersoft:DockPanel.Dock	Top
   FillChildMode	Custom

   
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid Width="500" Height="300"> <Intersoft:DockPanel FillChildMode="Last"> <Intersoft:UXToolBar OverflowHandleVisibility="AsNeeded" GripHandleVisibility="Collapsed" Intersoft:DockPanel.Dock="Top" FillChildMode="Custom"> </Intersoft:UXToolBar> </Intersoft:DockPanel> </Grid> </Grid>

    
6. Add UXToolGroup control to the UXToolBar and set the following properties to the control.
   

   ButtonAppearance	ThreeD
   ItemSpacing	0
   CornerRadius	4
   Height	25
   BorderThickness	1
   BorderBrush	#FFB3B3B3

   
   

   XAML	Copy Code
   <Intersoft:UXToolGroup ButtonAppearance="ThreeD" ItemSpacing="0" CornerRadius="4" Height="25" BorderThickness="1" BorderBrush="#FFB3B3B3"> </Intersoft:UXToolGroup>

7. Add two UXToolBarButton controls to the UXToolGroup control and set the properties such as shown in the following code.
   

   XAML	Copy Code
   <Intersoft:UXToolBarButton Content="Today" Width="60" HorizontalContentAlignment="Center" IsToggleButton="True" GroupName="DateGroup" IsChecked="True" ToolTipService.ToolTip="View today's todo list" /> <Intersoft:UXToolBarButton Content="Next" Width="60" HorizontalContentAlignment="Center" IsToggleButton="True" GroupName="DateGroup" ToolTipService.ToolTip="View the next todo list" />

8. Add UXToolGroup control to the UXToolBar control and set the property for following properties to the control.
   

   Intersoft:DockPanel.IsFillElement	True
   HorizontalAlignment	Center
   Margin	-96,0,0,0
   CornerRadius	4

   
   

   XAML	Copy Code
   <Intersoft:UXToolGroup Intersoft:DockPanel.IsFillElement="True" HorizontalAlignment="Center" Margin="-96,0,0,0" CornerRadius="4"> </Intersoft:UXToolGroup>

9. Add StylishLabel control to the UXToolGroup control and set the following properties to the control.
   

   Content	To Do's
   Background	{x:Null}
   BorderBrush	{x:Null}
   FontSize	14

   
   

   XAML	Copy Code
   <Intersoft:StylishLabel Content="To Do's" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="14"/>

10. Add UXListBox control to the DockPanel control.
    

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 previous section. The ViewModel defines the ToDoCollection to represent an observable collection of ToDoViewModel and a DelegateCommand to represent the view command and logic which changes the ToDo data source dynamically at runtime.

To create the TodoViewModel

1. Add a new class to the ViewModels folder in your Silverlight project and name it TodoViewModel.
2. Open TodoViewModel.cs and inherit the class from ViewModelBase class.
3. Create an empty constructor and add the Todo and DueDateVisibility property, such as shown in the following example.
   

   C#	Copy Code
   private Todo _todo; public TodoViewModel(Todo todo) { this._todo = todo; } public Todo Todo { get { return this._todo; } } public Visibility DueDateVisibility { get { return this.Todo.Due == null ? Visibility.Collapsed : Visibility.Visible ; } }

To create the TodoListViewModel

1. Add a new class to the ViewModels folder in your Silverlight project and name it TodoListViewModel.cs.
2. Open TodoListViewModel.cs and inherit the class from ViewModelBase class.
   

   C#	Copy Code
   public class TodoListViewModel : ViewModelBase { }

3. In this view mode, you add the ToDoCollection and FilterToDo properties which represent a collection of TodoViewModel. You also add DelegateCommand such as ViewCommand that will be bound to the toolbar buttons in the view, such as shown in the following code listing.
   

   C#

   Copy Code

   private ObservableCollection<TodoViewModel> _todoCollection; private ObservableCollection<TodoViewModel> _filterTodo; private DelegateCommand _viewCommand; private string _todoListOption; public TodoListViewModel() { this.LoadToDo(); _viewCommand = new DelegateCommand(ExecuteViewCommand); ExecuteViewCommand("Today"); } public ObservableCollection<TodoViewModel> FilterToDo { get { return _filterTodo; } set { if (_filterTodo != value) { _filterTodo = value; OnPropertyChanged("FilterToDo"); } } } public DelegateCommand ViewCommand { get { return _viewCommand; } set { if (_viewCommand != value) { _viewCommand = value; OnPropertyChanged("ViewCommand"); } } } public string TodoListOption { get { return _todoListOption; } set { if (this._todoListOption != value) { _todoListOption = value; OnPropertyChanged("TodoListOption"); } } } public void ExecuteViewCommand(object parameter) { TodoListOption = parameter.ToString(); if (TodoListOption.Equals("Today")){ var list = this._todoCollection.Where(a => a.Todo.Due == new DateTime(2010, 8, 9) || a.Todo.Due == null).OrderBy(a => a.Todo.IsCompleted).ToList(); this.FilterToDo = new ObservableCollection<TodoViewModel>(list); }else { var list = this._todoCollection.Where(a => a.Todo.Due > new DateTime(2010, 8, 9) && !a.Todo.IsCompleted).OrderBy(a => a.Todo.IsCompleted).ToList(); this.FilterToDo = new ObservableCollection<TodoViewModel>(list); } } public ObservableCollection<TodoViewModel> TodoCollection { get { return _todoCollection; } set { if (_todoCollection != value) { _todoCollection = value; OnPropertyChanged("TodoCollection"); } } } public void LoadToDo() { this._todoCollection = new ObservableCollection<TodoViewModel>(); StreamResourceInfo source = System.Windows.Application.GetResourceStream(new Uri("/ChangeDataSourceFromVMUsingDelegateCommand;component/SampleData/TodoDataSource.xml", UriKind.Relative)); XDocument doc = XDocument.Load(source.Stream); var todos = from x in doc.Descendants("Todo") select new Todo(x); foreach (var dt in todos) { this._todoCollection.Add(new TodoViewModel(dt)); } source.Stream.Close(); }

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 TodoList View to the TodoListViewModel class

1. Declare the namespace that maps to the TodoListViewModel class in the TodoList page.
   

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

2. Instantiate a new instance of the TodoListViewModel class in the UXPage resources and name it TodoListViewModel.
   

   XAML	Copy Code
   <Intersoft:UXPage...> <Intersoft:UXPage.Resources> <ViewModels:TodoListViewModel x:Key="TodoListViewModel" /> ... </Intersoft:UXPage.Resources> </Intersoft:UXPage>

3. Bind the DataContext property of the LayoutRoot to the TodoListViewModel through the static resource extension markup.
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot" DataContext="{StaticResource TodoListViewModel}"> </Grid>

4. Bind the command property of the UXToolBarButton to the ViewCommand that defined in the ViewModel.
   

   XAML

   Copy Code

   <Intersoft:UXToolGroup... > <Intersoft:UXToolBarButton Content="Today" Width="60" HorizontalContentAlignment="Center" IsToggleButton="True" GroupName="DateGroup" IsChecked="True" ToolTipService.ToolTip="View today's todo list" CommandParameter="Today" Command="{Binding ViewCommand}" /> <Intersoft:UXToolBarButton Content="Next" Width="60" HorizontalContentAlignment="Center" IsToggleButton="True" GroupName="DateGroup" ToolTipService.ToolTip="View the next todo list" Command="{Binding ViewCommand}" CommandParameter="Next" /> </Intersoft:UXToolGroup>

5. Create a DataTemplate to define the item template for the UXListBox. Add the necessary controls such as UXCheckBox, TextBlock and StylishLabel that represents the user interface to display the Todo information, and bind these controls to the ViewModel through the provided properties, such as shown in the following example.
   

   XAML

   Copy Code

   <Intersoft:UXPage...> <Intersoft:UXPage.Resources> ... <DataTemplate x:Key="listToDoItemTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="25" /> <ColumnDefinition Width="380" /> <ColumnDefinition Width="60" /> </Grid.ColumnDefinitions> <Intersoft:UXCheckBox IsChecked="{Binding Todo.IsCompleted}" /> <StackPanel Grid.Column="1"> <TextBlock TextWrapping="Wrap" Text="{Binding Todo.Category}" /> <TextBlock TextWrapping="Wrap" Text="{Binding Todo.Title}" /> <TextBlock Text="{Binding Todo.Notes}" /> <TextBlock TextWrapping="Wrap" Text="{Binding Todo.Tags}" /> </StackPanel> <Intersoft:StylishLabel Content="{Binding Todo.Due, StringFormat=\{0:MM/dd/yy\}}" Visibility="{Binding DueDateVisibility}" Grid.Column="2" VerticalAlignment="Center" MinWidth="50" CornerRadius="4" /> </Grid> </DataTemplate> </Intersoft:UXPage.Resources> </Intersoft:UXPage>

6. Set the ItemTemplate of the UXListBox to the data template that created in the previous step, then bind its ItemSource property to the FilterToDo property that existed in the ViewModel.
   

   XAML	Copy Code
   <Intersoft:UXListBox ItemTemplate="{StaticResource listToDoItemTemplate}" ItemsSource="{Binding FilterToDo}" />

7. Finally, save and run the project.
8. After the application is running in the browser, you can try to click on the toolbar buttons to change the data source of the list box, such as shown in the following figure.

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, and the UXToolBarButton to a DelegateCommand in the ViewModel which performs data source changes that automatically reflect the data presented in UXListBox.

To learn more about UI development using MVVM pattern, see MVVM Pattern Overview. To learn more about commanding, see Commanding Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Todo.cs

TodoViewModel.cs

TodoListViewModel.cs

TodoList.xaml

TodoList.xaml.cs

See Also