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

In this part 3, let us see how to build a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light support. We will also learn how to create a shared viewmodel layer, how to detect design mode and what the result is in Blend and at runtime.

In Part 2, we created a Universal Phone 8.1 app that still uses all the components present inside the project. We will use MVVM Light toolkit and remove some of the classes we created as well as code written in code behind files. Then we will make this a truly Universal App, which can be created for Windows Phone 8.1 and Windows 8.1.  This offers a nice way to structure your app in order to share as much code and other files (Views, View Models, etc) as possible. It makes it easier than ever to create apps which target both the Windows Phone 8.1 and the Windows RT devices like Surface, XBox.

MVVM is the design pattern used to develop apps in Windows Store apps as well as Windows Phone apps. Lets use MVVM Light framework to develop a windows store app. You can get the latest MVVM Light toolkit from http://mvvmlight.codeplex.com/

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.

image

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.

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
  1. public class ViewModelLocator
  2.     {
  3.         public MainViewModel Main
  4.         {
  5.             get
  6.             {
  7.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  8.             }
  9.         }
  10.  
  11.         public PersonViewModel PersonViewModelProp
  12.         {
  13.             get
  14.             {
  15.                 return ServiceLocator.Current.GetInstance<PersonViewModel>();
  16.             }
  17.         }
  18.  
  19.         static ViewModelLocator()
  20.         {
  21.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  22.             SimpleIoc.Default.Register<MainViewModel>();
  23.             SimpleIoc.Default.Register<PersonViewModel>();
  24.         }
  25.     }

Code Snippet 1: ViewModelLocator

Code Snippet 2
  1. public class PersonViewModel : ViewModelBase
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public Person personObject
  10.         {
  11.             get;
  12.             set;
  13.         }
  14.  
  15.  
  16.         private ICommand _savePersonCommand;
  17.         public ICommand SavePersonCommand
  18.         {
  19.             get
  20.             {
  21.                 return _savePersonCommand;
  22.             }
  23.  
  24.             set
  25.             {
  26.                 _savePersonCommand = value;
  27.             }
  28.         }
  29.         public PersonViewModel()
  30.         {
  31.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  32.             _persons.Add(new Person { FirstName = IsInDesignMode
  33.                                     ? "bill" : "Bill",
  34.                                       LastName = IsInDesignMode
  35.                                           ? "gates" : "Gates" });
  36.             _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
  37.             Persons = _persons;
  38.             personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
  39.             _savePersonCommand = new RelayCommand(SavePerson, CanSavePerson);
  40.         }
  41.  
  42.         private bool CanSavePerson()
  43.         {
  44.             if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
  45.                 return false;
  46.             else
  47.                 return true;
  48.         }
  49.  
  50.         private void SavePerson()
  51.         {
  52.             Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
  53.             //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
  54.             //await dialog.ShowAsync();
  55.  
  56.         }
  57.  
  58.  
  59.     }

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
  1. <Application
  2.     x:Class="UniBlank_MVVMBasics.App"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:local="using:UniBlank_MVVMBasics"
  6.      xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  8.     mc:Ignorable="d"
  9.     xmlns:vm="using:UniBlank_MVVMBasics.ViewModel">
  10.     
  11.     <Application.Resources>
  12.         <vm:ViewModelLocator x:Key="Locator"
  13.                              d:IsDataSource="True"/>
  14.     </Application.Resources>
  15.  
  16. </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!!!!

image

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
  1. <UserControl
  2.     x:Class="UniBlank_MVVMBasics.PersonView"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  7.     mc:Ignorable="d"
  8.     d:DesignHeight="300"
  9.     d:DesignWidth="400" Loaded="UserControl_Loaded"
  10.     xmlns:local="using:UniBlank_MVVMBasics"
  11.     DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}" >

Comment the code we wrote in PersonView.xaml.cs

Code Snippet
  1. private void UserControl_Loaded(object sender, RoutedEventArgs e)
  2.       {
  3.           //PersonViewModel personViewModelObject = new PersonViewModel();
  4.           //this.DataContext = personViewModelObject;
  5.       }

 

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

 

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
  1. public class DelegateCommand : ICommand
  2.     {
  3.         private readonly Action<object> _executeMethod = null;
  4.         private readonly Predicate<object> _canExecuteMethod = null;
  5.         private bool _isAutomaticRequeryDisabled = false;
  6.  
  7.         public DelegateCommand(Action<Object> executeMethod, Predicate<object> canExecuteMethod, bool isAutomaticRequeryDisabled)
  8.         {
  9.             if (executeMethod == null)
  10.             {
  11.                 throw new ArgumentNullException("executeMethod is null. Please set executeMethod.");
  12.             }
  13.             _executeMethod = executeMethod;
  14.             _canExecuteMethod = canExecuteMethod;
  15.             _isAutomaticRequeryDisabled = isAutomaticRequeryDisabled;
  16.         }
  17.  
  18.         public bool CanExecute(object parameter)
  19.         {
  20.             return _canExecuteMethod == null ? true : _canExecuteMethod(parameter);
  21.         }
  22.  
  23.         public event EventHandler CanExecuteChanged;
  24.  
  25.         public void Execute(object parameter)
  26.         {
  27.             if (_executeMethod != null)
  28.                 _executeMethod(parameter);
  29.         }
  30.  
  31.         //In WinRT, there is no CommandManager to raise events globally. you must update/raise CanExecuteChanged manually
  32.         public void RaiseCanExecuteChanged()
  33.         {
  34.             if (CanExecuteChanged != null)
  35.                 CanExecuteChanged(this, EventArgs.Empty);
  36.         }
  37.  
  38.     }

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

PersonViewModel.cs
  1. public class PersonViewModel
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public Person personObject
  10.         {
  11.             get;
  12.             set;
  13.         }
  14.  
  15.  
  16.         private ICommand _savePersonCommand;
  17.         public ICommand SavePersonCommand
  18.         {
  19.             get
  20.             {
  21.                 return _savePersonCommand;
  22.             }
  23.  
  24.             set
  25.             {
  26.                 _savePersonCommand = value;
  27.             }
  28.         }
  29.         public PersonViewModel()
  30.         {
  31.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  32.             _persons.Add(new Person { FirstName = "Bill", LastName = "Gates" });
  33.             _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
  34.             Persons = _persons;
  35.             personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
  36.             _savePersonCommand = new DelegateCommand(SavePerson, CanSavePerson, false);
  37.         }
  38.  
  39.         private bool CanSavePerson(object obj)
  40.         {
  41.             if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
  42.                 return false;
  43.             else
  44.                 return true;
  45.         }
  46.  
  47.         private void SavePerson(object obj)
  48.         {
  49.             Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
  50.             //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
  51.             //await dialog.ShowAsync();
  52.  
  53.         }
  54.  
  55.  
  56.     }

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

PersonView.xaml
  1. <UserControl
  2.     x:Class="UniBlank_MVVMBasics.PersonView"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  7.     mc:Ignorable="d"
  8.     d:DesignHeight="300"
  9.     d:DesignWidth="400" Loaded="UserControl_Loaded"
  10.     xmlns:local="using:UniBlank_MVVMBasics">
  11.     <Grid>
  12.         <StackPanel HorizontalAlignment="Left">
  13.             <ListView ItemsSource="{Binding Path=Persons, Mode=TwoWay}">
  14.                 <ListView.ItemTemplate>
  15.                     <DataTemplate>
  16.                         <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
  17.                             <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  18.                             <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  19.                         </StackPanel>
  20.                     </DataTemplate>
  21.                 </ListView.ItemTemplate>
  22.             </ListView>
  23.         </StackPanel>
  24.  
  25.         <StackPanel>
  26.              <Button Content="Save" HorizontalAlignment="Right" Width="80" Command="{Binding Path=SavePersonCommand}"/>
  27.         </StackPanel>
  28.  
  29.     </Grid>
  30. </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

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:

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

image

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.

image

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.

image

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.

image

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.image

Figure 4: Adding a class in Visual Studio 2013.

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

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
  1. class Person : INotifyPropertyChanged
  2.     {
  3.         public event PropertyChangedEventHandler PropertyChanged;
  4.  
  5.         private string _firstName;
  6.         public string FirstName
  7.         {
  8.             get
  9.             {
  10.                 return _firstName;
  11.             }
  12.  
  13.             set
  14.             {
  15.                 if (_firstName != value)
  16.                 {
  17.                     _firstName = value;
  18.                     OnPropertyChanged("FirstName");
  19.                 }
  20.             }
  21.         }
  22.  
  23.         private string _lastName;
  24.         public string LastName
  25.         {
  26.             get
  27.             {
  28.                 return _lastName;
  29.             }
  30.  
  31.             set
  32.             {
  33.                 if (_lastName != value)
  34.                 {
  35.                     _lastName = value;
  36.                     OnPropertyChanged("LastName");
  37.                 }
  38.             }
  39.  
  40.         }
  41.  
  42.         public void OnPropertyChanged(string property)
  43.         {
  44.             if (PropertyChanged != null)
  45.             {
  46.                 PropertyChanged(this, new PropertyChangedEventArgs(property));
  47.             }
  48.         }
  49.     }

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
  1. class PersonViewModel
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public void LoadPersons()
  10.         {
  11.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  12.             _persons.Add(new Person{ FirstName="Bill", LastName="Gates"});
  13.             _persons.Add(new Person{ FirstName="Satya", LastName="Nadella"});
  14.             Persons = _persons;
  15.         }
  16.     }

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.image

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
  1. <Grid>
  2.         <StackPanel HorizontalAlignment="Left">
  3.             <ItemsControl ItemsSource="{Binding Path=Persons}">
  4.                 <ItemsControl.ItemTemplate>
  5.                     <DataTemplate>
  6.                         <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
  7.                             <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  8.                             <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  9.                         </StackPanel>
  10.                     </DataTemplate>
  11.                 </ItemsControl.ItemTemplate>
  12.             </ItemsControl>
  13.         </StackPanel>
  14.  
  15.     </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
  1. private void UserControl_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     PersonViewModel personViewModelObject = new PersonViewModel();
  4.     personViewModelObject.LoadPersons();
  5.     this.DataContext = personViewModelObject;
  6. }

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
  1. <Page
  2.     x:Class="UniBlank_MVVMBasics.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:local="using:UniBlank_MVVMBasics"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  8.     mc:Ignorable="d"
  9.     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
  10.     xmlns:views="using:UniBlank_MVVMBasics" >
  11.  
  12.     <Grid>
  13.         <views:PersonView></views:PersonView>
  14.     </Grid>
  15. </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.

Developing Apps for Microsoft Surface, Windows 8, Windows RT and Windows Phone 8

Recently, at one of the conference i presented at Microsoft Technology center, i was asked the following questions.

  • Is .NET dead? What is .NET Client profile?
  • Is Windows 8 compatible with my current Windows app?
  • Can I build Windows 8 Metro apps in .NET?
  • Can I build apps for both Windows 8 and Windows Phone?

The following table summarizes the latest devices and their operating systems as well as the development technologies along with other useful information (for developers)

image

Well, here are some of the answers and commonly used Windows 8 terminology.

  • Windows Phone 8 now shares a common core with Windows 8. This means you can expect to write apps for one and easily port it to the other, with UI retooling of course. Developers targeting both should use C#/VB + XAML for apps, and C++/D3D for games. Portable class library definitely helps when developing for both the platforms.
  • The term “Metro Apps” now called “Microsoft Design Language” denotes apps that can be purchased in the official Windows App Store and that are built on top of the WinRT runtime, using either C# + XAML, or WinJS + HTML5. Even though Windows Phone features a Metro user interface (and the original one at that), the term Metro Apps does NOT apply to Windows Phone 7.5 apps.
  • The term “Metro Games” denotes apps that can be purchased in the official Windows App Store and that are built on top of the WinRT runtime, using Direct3D (D3D) and C++. Windows RT & Windows 8 Metro games cannot be built in XNA.
  • XNA can still be used to create Windows Phone 7.5, 7.8 and 8.0 games, and sold in the marketplace. You will not need to keep Visual Studio 2010 since Visual Studio 2012 and the Windows Phone 8.0 SDK will still support new development in XNA.
  • WinRT is the new native Runtime for Windows RT and the Metro side of Windows 8. It completely replaces .NET and Win32. Let me make this clear: If you look under the covers of WinRT, there is no .NET and no Win32, all you’ll find is the Windows Kernel. Since the only dev platform supported by Windows RT is WinRT, that means you cannot use .NET to build apps for Windows RT (or for the Metro side of Windows 8). Read this post on Paul Thurrott’s Windows Supersite for a more in-depth explanation.
  • WinRT is not based on .NET but you can use a subset of .NET from WinRT. Microsoft provides a subset of managed types called the .NET APIs for Metro style apps which enables .NET Framework developers to create Metro style apps within a familiar programming framework. Note that porting some .NET apps to WinRT could be trivial while others could be hard, based on which namespaces & classes you use. Check this section of the Metro style development documentation for more details.
  • Side-loading implicates installing non-certified applications using external media, thus bypassing the official Microsoft Windows App Store, whether it originates from a CD/DVD, USB key or web download. Note that developers can always side-load their own apps in a developer-unlocked device.
  • Xbox LIVE games are always platform specific. Microsoft Surface and Windows Phone both feature Xbox LIVE enabled games but this does NOT mean it runs the same Xbox LIVE Arcade games as the Xbox 360.
  • 2D game development can also be done using the same platform as apps. For example, on Windows Phone, 2D games can be built in Silverlight and do not require XNA.
  • Confused about version numbers for Windows Phone? Read my blog post that demystifies it all here.
  • Windows 8 can also be installed on any PC running Windows 7 today, and will also come pre-loaded on future generations of OEM (Dell, HP, Lenovo, Toshiba, etc.) computers, laptops, notebooks, Ultrabooks, Netbooks and tablets. The first column applies to all these other Windows 8 computers as well.
  • Windows RT will also be available on third-party tablet devices offered by Microsoft’s OEM partners (Samsung, Toshiba, Lenovo, etc.) Windows RT cannot be installed manually by a consumer, it must be licensed and pre-loaded by the OEM manufacturing the tablet.

  • 101 Questions and Answers About Windows 8

    1. What tools and information do I need to develop Windows 8 Store applications?

    a. Windows 8 – Download free version here

    b. Visual Studio 2012 Express - Download free version here

    c. Windows Phone - Download free version here

    d. Windows Server 2012 – Download free version here (Optional)

    e. Microsoft Virtual Academy – Register here

    2. How to develop a Windows Phone 8 app in 30 days?

    Register at http://www.microsoft.com/click/services/Redirect2.ashx?CR_CC=200134727

    3. For a Mac user, where can I get the free tools to build Windows Store apps for Windows 8?

    Install Windows 8 and the dev tools on your Mac.

    4. How to start planning now for a cloud-based backend service—user authentication, push notifications, and structured data?

    Sign up for the Windows Azure 90-day Free Trial and receive 10 free Mobile Services running on shared instances.

    5. Get the samples and get started!? Download the design assets—PSD assets include templates, common controls, and common components—and the sample apps pack.

    6. Where to find Windows 8 Sessions and Keynotes — //BUILD Conference Site

    7. Download the Bits — Windows Dev Center

    8. PDF Manual — Windows Developer Preview Guide

    9. Code Examples — MSDN “Metro Style” app examples (or get them all together in a Single ZIP)

    10. What Devices will Run It? — List of Devices in Microsoft’s Test Lab

    11. How to Install on My Machine without Losing Everything even if I don’t have Dual-Format DVDs or 8 GB Memory Sticks Handy — Installing Windows 8 Developer Preview as a Bootable VHD

    12. What About Silver light? — It’s still here, with a diagram from Microsoft to prove it

    13. Chat about Windows 8 or Cry for Help — MSDN Forums for Windows 8

    14. What is WinRT? — Introduction to WinRT and WinRT demystified

    15. Touch Input — Quickstart: Touch Input

    16. Comfort Guide to Controls for Silverlight and WPF Developers — Controls List (for Xaml)

    17. How do I Convert Silverlight to WinRT/Metro? — Blog Series on WinRT vs. Silverlight

    18. But is Xaml REALLY There? — Yes, It Is

    19. The New Architecture — Windows 8 WinRT Capabilities (Tip: Lean forward to make it look flat)

    20. Platform and Tools Architecture — Windows 8 Platform and Tools (Tip: this time lean sideways)

    21. Can I Borrow Someone’s Opinion? — Sure thing: Yours Truly, Michael Crump, Engadget, Wired

    22. Create a bootable USB? jerrynixon.com

    23. Setup boot to VHD? jerrynixon.com

    24. Get an Azure account? http://aka.ms/w8cloud

    25. Get Windows 8? http://aka.ms/w8download

    26. Get Visual Studio 2012? http://aka.ms/w8tools

    27. Get Windows Live SDK? http://aka.ms/w8live

    28. Get Windows 8 Samples? http://aka.ms/w8samples

    29. Get Multilingual Toolkit? http://aka.ms/w8language

    30. Get Advertising SDK? http://aka.ms/w8ads

    31. Get Design Assets? http://aka.ms/w8design

    32. Register your App? http://aka.ms/w8reg

    33. Join 30 to Launch? http://aka.ms/w8launch

    34. View the online labs? http://aka.ms/w8vlabs

    35. Does Windows 8 run Windows 7 software? Yes

    36. Does Windows 8 support .Net 4.0? Yes

    37. Does WinRT replace the .Net framework? No

    38. Can users re-enable the start button in Windows 8? No

    39. Can enterprises disable Microsoft Design Style on their Windows 8 desktops? No

    40. Will Microsoft Design Style be part of the server version of Windows? Yes

    41. Do developers need two apps in the Windows 8 store to support ARM? No

    42. Can apps have a hidden URL in the Windows 8 store? No

    43. What is the revenue split with Microsoft for the Store? 80/20

    44. Do developers need a developer account in order publish an app? Yes

    45. Can developers use payment systems other than Microsoft? Yes

    46. Is HTML5 and JavaScript (JS) supported in Microsoft Design Style development? Yes

    47. What is the HTML rendering engine in HTML-based Microsoft Design Style apps? IE10

    48. Is IE10 Microsoft Design Style the same engine as IE10 desktop? Yes

    49. Can desktop applications create live tiles? No

    50. Can desktop applications use WinRT? Yes

    51. Can desktop HTTP end point be accessed by Microsoft Design Style apps? No

    52. Can Microsoft Design Style applications access a local SQL server? No

    53. Do Microsoft Design Style applications have a local database solution? Yes, Sqlite

    54. Can Microsoft Design Style applications access the internet while the pc is in standby? Yes

    55. Can Microsoft Design Style applications access SkyDrive? Yes

    56. Can Microsoft Design Style applications iterate through the user’s hard drive? No

    57. Is there a Microsoft Design Style version of windows file explorer? No, see above

    58. Can Microsoft Design Style applications detect other Microsoft Design Style apps? No

    59. Can more than one Microsoft Design Style application run at one time? Yes, two

    60. Can push notifications execute client code? No

    61. Are there background tasks in Microsoft Design Style? Yes

    62. Is the performance of HTML5 Microsoft Design Style applications comparable to XAML? Yes

    63. Is native code (C++) supported in Microsoft Design Style development? Yes

    64. Is Microsoft Design Style C different than traditional CPP? Yes

    65. Should all desktop apps be migrate to Microsoft Design Style? No

    66. Will the Windows 8 store support trials? Yes

    67. Will the Windows 8 store support subscriptions? No

    68. Will enterprise apps deliver through the Windows 8 store? No

    69. Can enterprises disable the Windows 8 store? Yes

    70. Can enterprises disable side-loading of apps? Yes

    71. Can apps in the Windows 8 store access desktop apps & services? No

    72. Can side-loaded apps access desktop apps & services? Yes

    73. Can parents disable the Windows 8 store for kids? Yes

    74. Can parents limit the hours in the day their kids can log in? Yes

    75. Can parents limit the cumulative time in a day kids can use the PC? Yes

    76. Can parents filter available web sites? Yes

    77. Can parents disable games based on their rating? Yes

    78. Can Visual Studio 2010 be used to build Microsoft Design Style apps? No

    79. Can Visual Studio 2012 be used to build Windows 7 apps? Yes

    80. Can Visual Studio 2010 access Team Foundation Server 2012? Yes

    81. Can Visual Studio 2012 open 2010 projects without altering them? Yes

    82. Can Visual Studio 2010 open 2012 projects? No

    83. Does the .Net 4 async keyword work in WinRT? Yes

    84. Does Windows 8 WinRT code run on Windows Phone 7? No

    85. Does Windows Phone 7 code run on Windows 8? Yes, some

    86. Does Windows Phone 8 code run on Windows 8? Yes, more

    87. Does Windows 8 code run on Windows Phone 7? Yes, some

    88. Does Windows 8 code run on Windows Phone 8? Yes, more

    89. Can Microsoft Design Style applications roam settings/files across desktops? Yes

    90. Can desktop applications roam settings, too? No

    91. Can Microsoft Design Style applications roam settings/files to Windows Phone? No

    92. Can Windows Phone roam settings to Windows 8? No

    93. Does Windows 8 Microsoft Design Style support XNA game development? No

    94. When was Windows 8 released? Friday, October 26, 2012.

    95. Win+E – Explorer

    96. Win+R – Run

    97. Win+D – Desktop

    98. Win+Plus or Win+Minus (no shift) – Magnifier/Zoom In and Out

    99. Win+F – Find Files

    100. Alt-Tab – Switch between Apps

    101. Win-Tab – Switch between Full Screen Apps

      Free Microsoft Developer Training Kits

      Windows Azure Training Kit – August 2012 REFRESH Update

      The August 2012 REFRESH update of the Windows Azure Training Kit includes 42 hands-on labs, 15 demos and 38 presentations. Some of the updates in this version include:

      • Added the Windows Azure Device + Services 1-day event agenda
      • Added the Windows Azure ITProCamp 1-day event agenda
      • Added 2 presentations designed for Windows Azure Mobile Services
      • Added 15 Demos with Demo Scripts for content delivery

      The previous August 2012 update of the Windows Azure Training Kit includes 41 hands-on labs and 35 presentations. Some of the updates in the version include:

      • Added 7 presentations specifically designed for the Windows Azure DevCamps
      • Added 4 presentations for Windows Azure SQL Database, SQL Federation, Reporting, and Data Sync
      • Added presentation on Security & Identity
      • Added presentation on Building Scalable, Global, and Highly Available Web Apps
      • Several hands-on lab bug fixes
      • Added the Windows Azure DevCamp 1-day event agenda
      • Updated Windows Azure Foundation Training Workshop 3-day event agenda

      Release date: 8/20/2012

      Internet Explorer 10 Training Kit

      This training kit covers development specifics for developers who will be targeting Internet Explorer 10 in their development experience. This kit contains documentation and details on things pertinent to developing applications that target features of the Internet Explorer 10 browser.

      Release Date: 8/8/2012

      Windows 8 Camp in a Box, Release Preview Edition

      This download includes the hands-on-labs, presentations, samples and resources from the Windows 8 camps for developers ramping up on Metro style app development.

      • Windows 8CampinaBoxJS includes the hands-on labs for those using HTML + Javascript.
      • Windows8CampinaBoxCS includes the hands-on-labs that use XAML + C#.

      Release Date: 7/18/2012

      SQL Server 2012 Developer Training Kit

      The SQL Server 2012 Developer Training Kit includes technical content designed to help you learn how to develop SQL Server 2012 database and BI solutions.

      Release date: 7/16/2012

      Identity Developer Training Kit

      The Identity Developer Training Kit contains hands-on labs, presentations and pointers to training videos. This page contains three versions of the Identity Developer Training Kit :

      • Identity Developer Training Kit (July 2012) for Visual Studio 2012 RC
      • Identity Developer Training Kit (April 2011) for Visual Studio 2010 RTM
      • Identity Developer Training Kit (March 2010) for Visual Studio 2008 SP1

      Release Date: 7/5/2012

      Web Camps Training Kit

      Web Camps Training Kit May 2012 Release featuring ASP.NET MVC 4, ASP.NET 4.5, ASP.NET Web API, VS 11

      Release Date: 5/9/2012

      Visual Studio 2010 and .NET Framework 4 Training Kit

      Visual Studio 2010 and .NET Framework 4 Training Kit December 2011 Release

      Release date: 12/30/2011

      Windows Phone 7.5 Training Kit

      Hands on Labs for the Windows Phone 7.5 Application Platform

      Release date: 12/19/2011

      Visual Studio 11 Developer Preview Training Kit

      Visual Studio 11 Developer Preview Training Kit December 2011 Release

      Release date: 12/15/2011

      Dynamics CRM 2011 Developer Training Kit

      This training kit is for .NET developers to learn the development features of Dynamics CRM and help them build applications using Microsoft Dynamics CRM 2011 and CRM Online.

      Release Date:9/6/2011

      Introduction to Visual Studio Team Foundation Server 2010 Training Kit

      Introduction to Team Foundation Server 2010

      Release Date:8/22/2011

      BizTalk Server 2010 Administrator Training Kit

      This training kit contains a complete set of materials that will enable you to learn the core administrator capabilities in BizTalk Server 2010. This kit includes lab manuals, PowerPoint presentations and videos, all designed to help you learn…

      Release Date:8/21/2011

      BizTalk Server 2010 ESB Training Kit

      This training kit contains a complete set of materials that will enable you to learn about the ESB Toolkit in BizTalk Server 2010. This kit includes lab manuals, PowerPoint presentations and videos, all designed to help you learn about the ESB…

      Release Date:8/20/2011

      Visual Studio LightSwitch Training Kit

      Visual Studio LightSwitch Training Kit

      Release Date:7/28/2011

      SharePoint 2010 and Windows Phone 7 Training Kit

      Provides developers with advanced guidance on how to develop Windows Phone 7 Applications for SharePoint.

      Release Date:7/22/2011

      BizTalk Server 2010 Developer Training Kit

      This training kit contains a complete set of materials that will…developer capabilities in BizTalk Server 2010. This kit includes lab manuals, PowerPoint presentations…Virtual Machine that is ready for you to use with the training kit.

      Release Date:7/18/2011

      SharePoint and Windows Azure Development Kit

      The July 2011 release of the SharePoint and Azure Development Kit is a training course to help developers integrate SharePoint and Windows Azure.

      Release Date:7/15/2011

      Office 365 Developer Training Kit – June 2011 Update

      Guidance that provides developers with advanced guidance on how to develop for Office 365 including SharePoint Online, Exchange Online and Lync Online

      Release Date:6/28/2011

      Office 2010 Developer Training Kit – June 2011

      Training kit that provides developers with collateral to get started quickly developing for Office 2010.

      Release Date:6/7/2011

      PHP on Windows and SQL Server Training Kit (March 2011 Update)

      The PHP on Windows and SQL Server Training Kit includes a comprehensive set of technical content including demos and hands-on labs to help you understand how to build PHP applications using Windows, IIS 7.5 and SQL Server 2008 R2.

      Release Date:6/6/2011

      SQL Server 2008 R2 Update for Developers Training Kit (May 2011 Update)

      This training kit is a great resource for developers, trainers, consultants and evangelists who need to understand…hands-on labs and videos that are perfect for self-paced learning or for conducting your own training.

      Release Date:6/2/2011

      SharePoint and Silverlight Training Kit

      Provides developers with advanced guidance on how to develop Silverlight Applications for SharePoint.

      Release Date:4/7/2011

      Web Camps Training Kit

      February 2011 release of the Web Camps Training Kit

      Release Date:2/21/2011

      Windows Phone 7 Training Kit for Developers – RTM Refresh

      This Windows Phone 7 Training Kit for developers will give you a jumpstart into the new Windows Phone world by providing you with a step-by-step explanation of the tools to use and some key concepts for programming Windows Phones.

      Release Date:2/3/2011

      Silverlight 4 Training

      Silverlight 4 Training

      Release Date:12/20/2010

      UC “14″ Developer Training Kit

      This training kit provides deep technical training on all aspects of the Lync Server 2010 and Exchange Server 2010 SDKs to give developers the skills they need to be productive developing communications driven business processes.

      Release Date:12/10/2010

      Windows Server AppFabric Training Kit

      This training kit contains a complete set of materials that will…capabilities in Windows Server AppFabric. The kit has two main sections, one for the AppFabric Hosting…Virtual Machine that is ready for you to use with the training kit.

      Release Date:10/26/2010

      What’s New in BizTalk Server 2010 Training Kit

      Learn about the new features of BizTalk Server 2010

      Release Date:9/23/2010

      SharePoint 2010 Developer Training Kit

      Guidance that provides developers with advanced guidance on how to develop for SharePoint.

      Release Date:5/8/2010

      Windows 7 Training Kit For Developers

      The Windows 7 Training Kit for Developers includes presentations, hands-on labs, and demos designed to help you learn how to build applications that are compatible with and shine on Windows 7

      Release Date:10/22/2009

      Windows Server 2008 R2 Developer Training Kit – July 2009

      A collection of presentations, demos, and hands-on-labs for Windows Server solution developers.

      Release Date:7/20/2009

      ASP.NET MVC Training Kit

      ASP.NET MVC Training Kit containing: hands-on-labs, demos, decks, FAQs, etc.

      Release Date:3/27/2009

      Business Activity Monitoring (BAM) Training Kit

      This training kit provides learning information for Business Activity Monitoring (BAM).

      Release Date:8/21/2008

      .NET Framework 3.5 Enhancements Training Kit

      .NET Framework 3.5 Enhancements Training Kit containing Labs, Demos and PPTs

      Release Date:8/11/2008

      Visual Studio 2008 and .NET Framework 3.5 Training Kit

      Visual Studio 2008 and .NET Framework 3.5 Training Kit containing Labs, Demos and PPTs

      Release Date:11/30/2007

      Received tablet (Slate) from Microsoft as part of winning the GenApp Great Slate Giveaway Competition

      Microsoft sent me a Windows 8 Samsung Slate for being the first few members to successfully publish Windows Store apps at Microsoft store. The apps were available at Microsoft store even before Windows 8 GA (General Availability).

      Below is the box with Windows 8 slate. It came with Digital Pen Stylet.

      IMG_0629

      Figure 1: Package of Samsung Slate

      Fig 2 shows the outside features of Samsung slate.IMG_0634 

      Figure 2: Overview of the Windows 8 slate and it’s features.