Right-click the project and select Add New Folder (Figure 15-5). Name the folder BusinessObjects.

Figure 15.5. Add New Folder.

Right-click the BusinessObjects folder and again add a new class item. Name it User (Figure 15-6).

Figure 15.6. Add new class the name is User.

The User.cs file should open automatically; if it doesn't, double-click the file to open it.

Following is the code for the User object. Here we can see an implementation of the INotifyPropertyChanged interface. By implementing the interface we agree to provide code that implements the event.

public event  PropertyChangedEventHandler PropertyChanged;

What this event does is tell the binding system where to say, "Hey, notify me if you change any part of your object." We do this in the NotifyPropertyChanged event where we first check to see if we have any subscribers to be notified and then fire off the EventHandler.

if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }

Notice anytime we set a property we call our NotifyPropertyChanged event. Now anytime the properties of our object are changed, the UI will automatically update. We also need to add the following properties to our object: Name, Active, and Birthday.

Here is a complete listing of the code:

public class User : INotifyPropertyChanged
        {
            public User()
            {

// Insert code required on object creation below this point.
            }
        private string _Name;
        public string Name
        {
            get { return _Name; }
            set
            {
                _Name = value;
                NotifyPropertyChanged("Name");
            }
        }
        private bool _Active;
        public bool Active
        {
            get { return _Active; }
            set
            {
                _Active = value;
                NotifyPropertyChanged("Active");
            }
        }
        private string _Birthday;
        public string Birthday
        {
            get { return _Birthday; }
            set
            {
                _Birthday = value;
                NotifyPropertyChanged("Birthday");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }

Add another new folder called Model. We will use this folder to supply sample data at runtime.

We can simulate getting data from some type of service by populating the model with some static data. We'll create a model class that will return an ObservableCollection of User objects.

What is an ObservableCollection? It is a list that implements the INotifyPropertyChanged under the hood. What does this do? Well, put simply it allows the collection to notify the UI anytime there are changes so that the UI can update the visual elements to reflect those changes. So anytime our list changes the UI will re-bind all the items in the list to our ItemsControl or ListBox.

Right-click the Model folder and add a new Class Item (choose Add New Item

using System.Collections.ObjectModel;

      public class UserModel
        {
    public UserModel()
            {
                // Insert code required on object creation below this point.
            }
            public static ObservableCollection<User> GetUserList()
            {
List<User> _Users = new List<User>();
_Users.Add(new User() { Name = "Bill Moore", Birthday = "06/22/1978", Active = true

 });
_Users.Add(new User() { Name = "Victor Gad", Birthday = "10/22/1999", Active = true

 });
_Users.Add(new User() { Name = "Paul Gebo", Birthday = "08/15/1935", Active = true });
_Users.Add(new User() { Name = "Jason Rain", Birthday = "02/10/1979", Active = true

 });
_Users.Add(new User() { Name = "Thomas Train", Birthday = "05/19/1967", Active =

 true });
return _Users;
        }
        }

Double-click MainView.xaml and then select the Data tab. By default, it is next to the Properties and Resources tabs on the right-hand side (Figure 15-7).

Figure 15.7. The Data tab.

Right-click the MainViewModelSampleData Source and select "Delete data source."

Make sure your project builds by pressing Ctrl+Shift+B.

Select Project and click the Create Sample Data button.

Select Create Sample Data from Class (Figure 15-8).

Figure 15.8. Select project

Create Sample Data button

Create Sample Data from Class.

In the dialog box for Data Source Name, type MainViewModelSampleData. In the Select Class search box, type MainViewModel. Select the MainViewModel class under MVVMApplication1 (Figure 15-9). Click OK.

Figure 15.9. Select the MainViewModel.

Now the Data tab should look like Figure 15-10.

Figure 15.10. The Data tab.

Select the icon next to Birthday and change the Format to Date (Figure 15-11).

Figure 15.11. Set the Birthday Format to Date.

Set the Format for Name to Name (Figure 15-12).

Figure 15.12. Set the Format for Name to Name.

Delete the TextBlock and Button from the LayoutRoot.

Divide the Grid into two Columns (see Figure 15-13).

Figure 15.13. Divide the Grid into two Columns.

Let's use the PathListBox. Create a Path in the first Column using the Pen or Shape tool. It can be any type of Path that you want. See Figure 15-14.

Figure 15.14. Add a Path to the first Column.

Set the Path opacity to 0%. Add a PathListBox (Figure 15-15). It doesn't matter where you place it. You can place it in the second Column near the bottom so it's out of the way.

Figure 15.15. Selecting the PathListBox.

Set the Foreground color for the PathListBox to black (Figure 15-16).

Figure 15.16. Make the foreground black.

Figure 15.17. Placing the PathListBox.

Remember, the location of the PathListBox doesn't matter. The items in the ListBox will be rendered along the Path that we select in the next step.

Assign the Path created to the PathListBox using the Layout Paths property panel (Figure 15-18).

Figure 15.18. Using the LayoutPaths panel.

Select the circle reticule. Then select the Path we created in the Object and Timelines panel (Figure 15-19).

Figure 15.19. Select the path as the Layout Path for the PathListBox.

Rename the PathListBox to UserList.

Switch to the Data tab. Select the MainViewModel and drag it over to the LayoutRoot. This will bind the DataContext of LayoutRoot to the MainViewModel (Figure 15-20).

Figure 15.20. Bind the DataContext of LayoutRoot to the MainViewModel.

Using the Data Context window, select the User's chevron. Drag Name onto the PathListBox (Figure 15-21). Adjust the Grid Column to fit the content. You may also want to set the Capacity on the PathListBox to 8 instead of the default 10.

Figure 15.21. Binding the PathListBox to Name.

Drag a new Canvas onto the second Column (Figure 15-22). Name it detailsCanvas.

Figure 15.22. Add another Canvas control to the second Column.

We need to add another property to our MainViewModel that will hold the SelectedUser from the PathListBox. Notice the call to NotifyPropertyChanged. This allows the binding system to automatically update our fields every time the SelectedUser property is changed. Add the code just below the class declaration.

public partial class MainView : UserControl
        {
                private User _selectedUser;
                public User SelectedUser
                {
                        get {return _selectedUser;}
                        set {_selectedUser = value;
                                NotifyPropertyChanged("SelectedUser");
                        }
                }

                public MainView()
                {
                        // Required to initialize variables

InitializeComponent();
                }

We need to create a ViewModel that will be used by our View. Add this code right under the class declaration.

MainViewModel _viewmodel = new MainViewModel();

Here is the new code in context:

public partial class MainView : UserControl
        {
                MainViewModel _viewmodel = new MainViewModel();

                private User _selectedUser;
                public User SelectedUser
                {
                        get {return _selectedUser;}
                        set {_selectedUser = value;
                                NotifyPropertyChanged("SelectedUser");
                        }
                }


                public MainView()
                {
                        // Required to initialize variables
                        InitializeComponent();
                }

Click the MainView.xaml tab. Then select LayoutRoot in the Objects and Timeline panel. Click the Advanced Options button next to DataContext. Then go to Reset. This will remove the DataContext for LayoutRoot. We are setting the DataContext in the code.

We need to wire up some events in our MainView. To do this we will need to open up the MainView.xaml.cs file. Find this file in the Project panel and double-click to open it. We will add the following line at the bottom of the constructor. This will allow us to handle the event when someone selects a User from our list.

UserList.SelectionChanged += new SelectionChangedEventHandler

(UserList_SelectionChanged);

The new constructor for MainView.xaml.cs should look like the one here.

public MainView()
                {
                        // Required to initialize variables
                InitializeComponent();
                UserList.SelectionChanged += new

SelectionChangedEventHandler(UserList_SelectionChanged);
                }

Set the DataContext to the instance of our ViewModel we just created. We will add this line to the bottom of our constructor. Setting the DataContext tells our View where to pull the data from. All the bindings we set up in the View are properties or collections of our ViewModel. Once we set the DataContext to an instance of our ViewModel, we will see our user data appear if our bindings are correct.

this.DataContext = _viewmodel;

The constructor should look like this now.

public MainView()
                {
                        // Required to initialize variables
                InitializeComponent();
                UserList.SelectionChanged += new
                SelectionChangedEventHandler(UserList_SelectionChanged);
                this.DataContext = _viewmodel;
                }

When the user selects an item from our PathListBox we need to update the Selected User field in our ViewModel. The code that follows first checks to see if we have something selected. The code should always have something selected, but we want to err on the side of caution. It then sets the SelectedUser property in our ViewModel to the currently selected item.

private void UserList_SelectionChanged(object sender,Controls

.SelectionChangedEventArgs e)
{
                // TODO: Add event handler implementation here.
                        if (UserList.SelectedItem != null)
                        {
                        _model.SelectedUser = UserList.SelectedItem as User;
                        }

        }

Select detailsCanvas in the Objects and Timeline panel. Find the DataContext property and click the Advanced Options button. Then select the DataContext tab.

Click the dropdown for MainViewModel. Then pick the SelectedUsers property. See Figure 15-23.

Figure 15.23. Set the DataContext of the Canvas to SelectedUser.

Add a CheckBox for Active. Name it chkActive and for its Content property set it to Active. The IsChecked property should be bound to the Active field of our User object. See Figure 15-24.

Figure 15.24. IsChecked should be bound to the Active property of SelectedUser.

Add a TextBlock beneath Active and set its Content to Name. Add a TextBox and bind the Text property to the Name field of our SelectedUser.

Add another TextBlock and set its Content to Birthday. Add a DatePicker next to it and bind the SelectedDate to the Birthday field of the SelectedUser. See Figure 15-25.

Figure 15.25. The final look for our View.