Category Archives: Windows Phone 8.1, Universal Apps, Window Store 8.1 Apps, Visual Studio 2013 Update

New Windows Phone 8.1 OS Features

MVVM Light–Visual Studio 2013, Universal Apps, Windows Phone 8.1, Windows Store 8.1 Apps–Part 3 of N

Creating the Application

Step 1: Open the project created in Part 2 using Visual Studio 2013.
Step 2: Right click on the References folder in the Windows Phone 8.1 application, and select Manage Nuget Packages.
Step 3: Select the Online source for Nuget and search for MVVM Light.
Step 4: Select the package MVVM Light Libraries only. Alternatively you can select the package named MVVM Light Libraries Only (PCL). This will install the exact same binaries and eventually I will remove this package and keep only the main one.
Step 5: Repeat steps 2 to 5 for the Windows 8.1 application.
Step 6: At this point, you have added MVVM Light support to both your applications as shown in Figure 1. Now we can add the files that will bring the full support for the ViewModel layer and the design support.

Figure 1: MVVM Light libraries referenced in Universal Projects in VS 2013

Adding ViewModel Layer:

it’s time to instantiate and create the ViewModels. This is the ViewModelLocator class task. This class is quite important in the application structure enabled by MVVM Light. It’s created as a XAML resource in the file App.xaml. This creates the important link between XAML markup and source code, allowing the visual designers to create the ViewModels and to run the design-time code. Lets create two files ViewModelLocator and the MainViewModel.

Adding ViewModelLocator & PersonViewModel:

The main task of ViewLocator is to link up your views with the view models. It’s responsible for creating and disposing of all of your View-Models. In this ViewLocator, mostly we just add additional views. Let’s do that.

Step 7: Right click on the Shared node and select Add, New Folder. Name this folder ViewModel.
Step 8: Right click on the new ViewModel again and select Add, New Item. Select a Class, and name it ViewModelLocator.cs
Step 9: Modify the ViewModelLocator code to look like in the code segment 1 below.
Step 8: Move the class PersonViewModel.cs from Windows Phone 8.1 to ViewModel present in shared node.
Step 9: Modify the MainViewModel class to look like code snippet 2 below. Of course you can add a bunch of new methods, observable properties and commands to this ViewModel as usual in MVVM.

Here I created PersonViewModelProp property that returns an instance of PersonViewModel and we registered this PersonViewModel class in line 23 of code snippet 1.

Code Snippet 1

public class ViewModelLocator
    {
        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }
 
        public PersonViewModel PersonViewModelProp
        {
            get
            {
                return ServiceLocator.Current.GetInstance<PersonViewModel>();
            }
        }
 
        static ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            SimpleIoc.Default.Register<MainViewModel>();
            SimpleIoc.Default.Register<PersonViewModel>();
        }
    }

Code Snippet 1: ViewModelLocator

Code Snippet 2

 public class PersonViewModel : ViewModelBase
    {
        public ObservableCollection<Person> Persons
        {
            get;
            set;
        }
 
        public Person personObject
        {
            get;
            set;
        } 
 
 
        private ICommand _savePersonCommand;
        public ICommand SavePersonCommand
        {
            get
            {
                return _savePersonCommand;
            }
 
            set
            {
                _savePersonCommand = value;
            }
        }
        public PersonViewModel()
        {
            ObservableCollection<Person> _persons = new ObservableCollection<Person>();
            _persons.Add(new Person { FirstName = IsInDesignMode
                                    ? "bill" : "Bill",
                                      LastName = IsInDesignMode
                                          ? "gates" : "Gates" });
            _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
            Persons = _persons;
            personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
            _savePersonCommand = new RelayCommand(SavePerson, CanSavePerson);
        }
 
        private bool CanSavePerson()
        {
            if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
                return false;
            else
                return true;
        }
 
        private void SavePerson()
        {
            Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
            //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
            //await dialog.ShowAsync();
 
        }
 
 
    }

Code Snippet 2: PersonViewModel

Adding Locator resource to App.XAML

Open the App.xaml file in Visual Studio 2013 and modify it to look like code snippet 3 below. This creates a new resource with the ViewModelLocator, which we will use in the designer. Notice the addition of the “d” and “mc” XML namespaces so that we can mark the ViewModelLocator as a DataSource, which will make it show up in the Data panel in Blend.

Code Snippet 3

<Application
    x:Class="UniBlank_MVVMBasics.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:local="using:UniBlank_MVVMBasics"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d"
    xmlns:vm="using:UniBlank_MVVMBasics.ViewModel">
    
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator"
                             d:IsDataSource="True"/>
    </Application.Resources>
 
</Application>

Making it a truly Universal App:

Since there is nothing great we are doing here, we can easily make it a universal app with all the code shared between both the projects. Move all the files that we created from Windows Phone 8.1 to Shared node as shown in Figure 2. Delete the files from Windows Phone 8.1 project. In Windows 8.1 project too, delete MainPage.XAML and hurray, we have our first universal app with MVVM. Now, Windows 8.1 store app begins to show up the same UI we have created for Windows Phone 8.1. Amazing!!!!

Figure 2: Moving files to Shared node for making this a Universal app code.

Connecting View and ViewModel:

Step 10: Set the DataContext of the Page to the MainViewMode as shown in Code Snippet 4.

Code Snippet 4
DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}"

This is the complete code of PersonView User control.

Code Snippet

<UserControl
    x:Class="UniBlank_MVVMBasics.PersonView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400" Loaded="UserControl_Loaded"
    xmlns:local="using:UniBlank_MVVMBasics"
    DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}" >

Comment the code we wrote in PersonView.xaml.cs

Code Snippet

private void UserControl_Loaded(object sender, RoutedEventArgs e)
      {
          //PersonViewModel personViewModelObject = new PersonViewModel();
          //this.DataContext = personViewModelObject;
      }

Download the source code from here.

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 2 of N

2 Replies

In Part 1, we have seen how to write code in Model, view and viewmodel to wire up data and show it in the UI. There is a clear separation among the three layers. Now let us extend the sample and see how we can implement commanding. We will just add a Save button and when the user clicks Save, add a record to ObservableCollection and the UI automatically shows the data.

Step 1: Add a new class called DelegateCommand.cs and inherit from ICommand

DelegateCommand.cs

public class DelegateCommand : ICommand
    {
        private readonly Action<object> _executeMethod = null;
        private readonly Predicate<object> _canExecuteMethod = null;
        private bool _isAutomaticRequeryDisabled = false;
 
        public DelegateCommand(Action<Object> executeMethod, Predicate<object> canExecuteMethod, bool isAutomaticRequeryDisabled)
        {
            if (executeMethod == null)
            {
                throw new ArgumentNullException("executeMethod is null. Please set executeMethod.");
            }
            _executeMethod = executeMethod;
            _canExecuteMethod = canExecuteMethod;
            _isAutomaticRequeryDisabled = isAutomaticRequeryDisabled;
        }
 
        public bool CanExecute(object parameter)
        {
            return _canExecuteMethod == null ? true : _canExecuteMethod(parameter);
        }
 
        public event EventHandler CanExecuteChanged;
 
        public void Execute(object parameter)
        {
            if (_executeMethod != null)
                _executeMethod(parameter);
        }
 
        //In WinRT, there is no CommandManager to raise events globally. you must update/raise CanExecuteChanged manually
        public void RaiseCanExecuteChanged()
        {
            if (CanExecuteChanged != null)
                CanExecuteChanged(this, EventArgs.Empty);
        }
 
    }

Step 2: Modify the person class created in Part 1 to includes command for Save.

PersonViewModel.cs

 public class PersonViewModel
    {
        public ObservableCollection<Person> Persons
        {
            get;
            set;
        }
 
        public Person personObject
        {
            get;
            set;
        } 
 
 
        private ICommand _savePersonCommand;
        public ICommand SavePersonCommand
        {
            get
            {
                return _savePersonCommand;
            }
 
            set
            {
                _savePersonCommand = value;
            }
        }
        public PersonViewModel()
        {
            ObservableCollection<Person> _persons = new ObservableCollection<Person>();
            _persons.Add(new Person { FirstName = "Bill", LastName = "Gates" });
            _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
            Persons = _persons;
            personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
            _savePersonCommand = new DelegateCommand(SavePerson, CanSavePerson, false);
        }
 
        private bool CanSavePerson(object obj)
        {
            if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
                return false;
            else
                return true;
        }
 
        private void SavePerson(object obj)
        {
            Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
            //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
            //await dialog.ShowAsync();
 
        }
 
 
    }

Step 3: Add a button to UserControl in PersonView.xaml and add Command property from viewmodel.

PersonView.xaml

<UserControl
    x:Class="UniBlank_MVVMBasics.PersonView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400" Loaded="UserControl_Loaded"
    xmlns:local="using:UniBlank_MVVMBasics">
 
    <Grid>
        <StackPanel HorizontalAlignment="Left">
            <ListView ItemsSource="{Binding Path=Persons, Mode=TwoWay}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
                            <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
                            <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
 
        <StackPanel>
             <Button Content="Save" HorizontalAlignment="Right" Width="80" Command="{Binding Path=SavePersonCommand}"/>
        </StackPanel>
 
    </Grid>
</UserControl>

Note: In WinRT, you must update/raise CanExecuteChanged manually. There is no CommandManager to do this globally. You could look at this as a pain in the neck, or a serious performance boost now that CanExecute is not called constantly. It does mean you have to think about cascading property changes where before you did not have to. But this is how it is. Manual.

Download the source code from here.

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 1 of N

1 Reply

With the recent release of Universal Apps, Windows Phone 8.1, Visual Studio 2013 Ultimate Update 2 RC , Windows Store 8.1 Update & Windows 8.1 update from Microsoft, I thought to blog some articles on these new technologies and there is no better design pattern to use than MVVM. So I will walk through some of the latest programming updates from MS along with MVVM.

Required Software’s:

Visual Studio 2013 (I am using Visual Studio 2013 Ultimate)
Universal Apps Project Template (comes with VS 2013)
Download Visual Studio 2013 Ultimate Update 2 RC from http://www.microsoft.com/en-us/download/details.aspx?id=42307

Benefits of MVVM:

1. Separation of Concerns (View, ViewModel, Model)
2. Clean testable and manageable code. Can include presentation tier logic in unit testing.
3. No code behind code, so the presentation layer and the logic is loosely coupled.
4. Better way of data binding.
5. With the new Window Runtime support for Windows Phone 8.1, we can now use the same Windows Store code for ICommand pattern implementation.

Overview MVVM Layers

Steps to Implement MVVM:

Lets get our hands dirty. Here we are going to develop a Windows Phone 8.1 application using Windows Runtime & XAML (Not Silverlight). Figure 1 shows the UI we are planning to develop.

Before writing code, analyze what we want to achieve and then come up with the class names, draw relation ships on paper and see how all the components fit together. Here I have two variables firstname and lastname and I wanted to show the data in the UI as shown in figure 1. So lets use MVVM to achieve this.

Figure 1: Views showing Model data using MVVM design pattern

Step 1: Fun with MVVM begins. Create a Universal Project by opening VS 2013 –> New –> Project –> Templates->Visual C#->Store Apps->Universal Apps and select Blank App (Universal Apps). Name it as UniBlank_MVVMBasics as shown in Figure 2.

Figure 2: New Universal Apps Project template in Visual Studio 2013

Step 2: VS 2013 creates two projects. One for Windows Store and other for Windows Phone. Both use Windows Runtime API as the core targeting 8.1 platforms. Shared project is the shared component between the two projects and we will get to this when we learn more about Universal Apps Project template.

Figure 3: Universal Apps Projects in VS 2013.

Step 3: Adding a class. Right click on UniBlank_MVVMBasics.WindowsPhone –>Add->Class as shown in Figure 4.

Figure 4: Adding a class in Visual Studio 2013.

Step 5: Name it as Person.cs as shown in Figure 5.

Figure 5: Add New Item Dialog

Step 6: Create a Simple Model (Person.cs) with required properties and implement PropertyChanged property of INotifyPropertyChanged.

Person Class Code

 class Person : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
 
        private string _firstName;
        public string FirstName
        {
            get
            {
                return _firstName;
            }
 
            set
            {
                if (_firstName != value)
                {
                    _firstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }
 
        private string _lastName;
        public string LastName
        {
            get 
            {
                return _lastName;
            }
 
            set
            {
                if (_lastName != value)
                {
                    _lastName = value;
                    OnPropertyChanged("LastName");
                }
            }
 
        }
 
        public void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }

Step 7: Create a ViewModel (PersonViewModel.cs) with required logic to bind Model to ViewModel. (Repeat step 3 t step 5 and name class as PersonViewModel.cs.

Code Snippet

 class PersonViewModel
    {
        public ObservableCollection<Person> Persons
        {
            get;
            set;
        }
 
        public void LoadPersons()
        {
            ObservableCollection<Person> _persons = new ObservableCollection<Person>();
            _persons.Add(new Person{ FirstName="Bill", LastName="Gates"});
            _persons.Add(new Person{ FirstName="Satya", LastName="Nadella"});
            Persons = _persons;
        }
    }

Step 8: Instead of using MainPage.XAML to show the data, let us create Views as we do typically in a software development. Create a View (PersonView.xaml) and bind the data with ViewModel. Add a User Control to the solution and name it as PersonView.xaml as shown in Figure 6.

Figure 6: Adding View (User Control) to the project in VS 2013

Step 9: As we have to display firstname and lastname, lets use TextBlock’s. We will use ItemsControl and Persons (observablecollection property) as DataContext and put them inside a DataTemplate to display the data from model in the view. In PersonView.XAML, write the following code inside Grid tag as shown below.

XAML code- Person User Control

<Grid>
        <StackPanel HorizontalAlignment="Left">
            <ItemsControl ItemsSource="{Binding Path=Persons}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
                            <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
                            <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
 
    </Grid>

Step 10: In PersonView.xaml.cs, let us create an object of PersonViewModel class and pass it as DataContext to the View we just created as shown below.

PersonView.xaml.cs code

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    PersonViewModel personViewModelObject = new PersonViewModel();
    personViewModelObject.LoadPersons();
    this.DataContext = personViewModelObject;
}

Step 11: In MainPage.xaml, let us import the xmlns:views=”using:UniBlank_MVVMBasics” namespace and put the views inside the grid as shown below.

MainPage.xaml code

<Page
    x:Class="UniBlank_MVVMBasics.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:local="using:UniBlank_MVVMBasics"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    xmlns:views="using:UniBlank_MVVMBasics" >
 
    <Grid>
        <views:PersonView></views:PersonView>
    </Grid>
</Page>

That’s it. Download the source code here.

Below are some of the points to remember about MVVM layers.

Model:

1. Represents the Data.
2. The Entity.
3. Model classes are non-visual classes that encapsulate the application’s data and business logic.
4. They are responsible for managing the application’s data and for ensuring its consistency and validity by encapsulating the required business rules and data validation logic.
5. The model classes do not directly reference the view or view model classes and have no dependency on how they are implemented.
6 The model classes typically provide property and collection change notification events through the INotifyPropertyChanged and INotifyCollectionChanged interfaces.
7. This allows them to be easily data bound in the view.
8. Model classes that represent collections of objects typically derive from the ObservableCollection<T> class.
9. The model classes typically provide data validation and error reporting through either the IDataErrorInfo or INotifyDataErrorInfo interfaces.
10. The model classes are typically used in conjunction with a service or repository that encapsulates data access and caching.
11. Not required to know where it gets its data from i.e from a WCF service. WCF RIA Services, etc.
12. May contain validation.

View:

1. The view is a visual element, such as a window, page, user control, or data template.
2. The view defines the controls contained in the view and their look and feel, visual layout and styling.
3. The view references the view model through its DataContext property.
4. The controls in the view are data bound to the properties and commands exposed by the ViewModel.
5. The view may customize the data binding behavior between the view and the view model.
For e.g, the view may use value converters to format the data to be displayed in the UI, or it may use validation rules to provide additional input data validation to the user.
6. The view defines and handles UI visual behavior, such as animations or transitions that may be triggered from a state change in the view model or via the user’s interaction with the UI.
7. The view’s code-behind may define UI logic to implement visual behavior that is difficult to express in XAML or that requires direct references to the specific UI controls defined in the view.

ViewModel:

1. The ViewModel is a non-visual class and does not derive from any WPF or Silverlight base class.
2. It encapsulates the presentation logic required to support a use case or user task in the application.
3. The ViewModel is testable independently of the view and the model.
4. The ViewModel typically does not directly reference the view. It will have UI Friendly Entities, UI State, Actions and Public properties that are bound to a View.
5. It implements properties and commands to which the view can data bind.
6. It notifies the view of any state changes via change notification events via the INotifyPropertyChanged and INotifyCollectionChanged interfaces.
7. Interacts with View with various Commands.
8. The view model coordinates the view’s interaction with the model.
9. It may convert or manipulate data so that it can be easily consumed by the view and may implement additional properties that may not be present on the model.
10. It may also implement data validation via the IDataErrorInfo or INotifyDataErrorInfo interfaces.
11. The view model may define logical states that the view can represent visually to the user.
12. Invokes services to communicate outside the MVVM triad.

Chief Cloud Architect & DevSecOps SME, Enterprise Architect, Agile Coach, Digital Transformation Leader, Presales & Tech Evangelist, Development Manager, Agilist, Mentor, Speaker and Author

Category Archives: Windows Phone 8.1, Universal Apps, Window Store 8.1 Apps, Visual Studio 2013 Update

New Windows Phone 8.1 OS Features

MVVM Light–Visual Studio 2013, Universal Apps, Windows Phone 8.1, Windows Store 8.1 Apps–Part 3 of N

Creating the Application

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 2 of N

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 1 of N

Build 2014–Observations

Rate this:

Share this:

Creating the Application

Rate this:

Share this:

Rate this:

Share this:

Rate this:

Share this:

Rate this:

Share this: