Magical MVVM in Windows Store Apps Using Expression Blend

Are you developing applications for Windows Store? You need to try using Expression Blend for developing your application. Expression Blend for Windows Store apps can be really valuable for Model View View Model (MVVM). How can you use the magic of Blend for doing MVVM? Let's dig in.

Getting Started

So you are ready to watch the magic of Expression Blend for Windows Store Applications. Let's create a blank project for Windows Store apps.

After you have created an empty project, then create some folders that are "Models", "Views" and "View Models".



Place "MainPage.xaml" in the "Views" folder to make it easier to manage the Views, Models and View Models.

Creating Models

Now it's time to create some Models for your application. In this project I have taken Colors as my personal choice. Since I have chosen Colors let's make it's respective Models that are, "ColorInfo" and "GroupInfo". "ColorInfo" consists of the information a color will contain.

Here is the respective code for the ColorInfo Model.

C# Code

public class ColorInfo
{
    public Color Color { get; set; }
    public string Name { get; set; }
    public SolidColorBrush Brush { get { return new SolidColorBrush(this.Color); } }
}

It contains the Name of Color and its other respective information.

The very second model will be the "GroupInfo". It will have an Array of type "ColorInfo" and is a group basically.

C# Code

public class GroupInfo
{
    public string Name { get; set; }
    public ColorInfo[] Colors { get; set; }
}

Wonderful, you are now done with the "Models". Not it's time to dig into the "ViewModels".

Creating ViewModels

So now it's time to create the "ViewModels". For this very project we will create only one "ViewModel" that will be a "MainPageViewModel". In this ViewModel I have used LINQ for getting the colors from the "Colors" class and have made groups each of "Five".

C# Code

public class MainPageViewModel
{
     public MainPageViewModel()
    {
        var colors = typeof(Colors)
            .GetRuntimeProperties().Select(x => new ModelsColorInfo
            {
                Name = x.Name,
                Color = (Color)x.GetValue(null)
            });
        this.Groups.Add(new GroupInfo { Name = "Group 1", Colors = colors.Skip(00).Take(5).ToArray() });
        this.Groups.Add(new GroupInfo { Name = "Group 2", Colors = colors.Skip(05).Take(5).ToArray() });
        this.Groups.Add(new GroupInfo { Name = "Group 3", Colors = colors.Skip(10).Take(5).ToArray() });
        this.Groups.Add(new GroupInfo { Name = "Group 4", Colors = colors.Skip(15).Take(5).ToArray() });
        this.Groups.Add(new GroupInfo { Name = "Group 5", Colors = colors.Skip(20).Take(5).ToArray() });

    }

    ObservableCollection<Models.GroupInfo> _Groups = new ObservableCollection<Models.GroupInfo>();
    public ObservableCollection<Models.GroupInfo> Groups { get { return _Groups; } }

}

public abstract class BindableBase : System.ComponentModel.INotifyPropertyChanged
{

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    protected void SetProperty<T> ref T storage, T value, [System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
    {
        if (!object.Equals(storage, value))
        {
            storage = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new System.ComponentModelPropertyChangedEventArgs(propertyName));
        }
    }
    protected void RaisePropertyChanged([System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new System.ComponentModelPropertyChangedEventArgs(propertyName));
    }

That was all for ViewModels and Models. Now it's time to change the IDE that is our beloved Blend.

Its Blend Time:(Complete Design in BLEND)

Now it's time for Expression Blend to show its magic. It is really easy to design your application after you have created your Models and View Models respectively as you have shifted to ExpressionBlend. Go to the "DateTab" of Expression Blend, there at the bottom there will be a tab for DataContext.



Click on "Set design-time DataContext" and you will see a PopUp.



Select the "DataContext Type" to "DesignInstance",

As you do this you will be followed by the number of classes. Find "MainPageViewModel". If you are unable to find it then that happens sometimes in Expression Blend because the solution has been compiled in Visual Studio but it hasn't been built inside Blend. To resolve it, use "Ctrl + Shift + Build". As you build the very project inside Blend you will find "MainPageViewModel" in your list. Select that!

Note: Don't forget to check the "IsDesignTimeCreatable".

As you follow the procedure, you will notice a change in the very tab. It will look something like this,



So now here you have "Groups" and "Colors".

Groups is the GroupInfo Class we made in the Model. It contains ColorInfo named Colors. Here we will now drag the Colors and drop it over the MainPage.



Wolahh!! So you see here that Groups are automatically formed. It has an issue in it. We can see the color's name but there is a label extra and the color of the "Color named" is not shown in the Item Created. To design it accordingly we need to do the following: 

1. Right-click over the item
2. Go over Edit additional Template
3. Edit the generated item
4. Then hover over "Edit Current"

Now the "Objects and Timeline" tab will look similar to this.



Here, we have a stack panel that has two TextBlocks. In the Border we have an "Image". Actually we don't need any image here so we will simply remove that. Now click over "Border" and shift your concentration to the "Properties Tab" and do the following:

1. Click on the Small Green Box at the end of the Background color.
2. Now click on Create DataBinding.
3. Select Colors and in it SolidColorBrush

You are done. Now you will see that the colors will appear in Boxes. Delete the extra TextBlock from "Objects and Timeline" that is placed inside the stackpanel.



Now it's time to make the items more beautiful. Select the "Grid" from the Objects and Timelines tab and reduce its height so it looks a bit nicer.



Now give some margin from the top left so it now spreads all over the screen edges. To do that click over the MainPage and go over to the properties. Here in the margin give the upper and the left margin value that you like. In my case the value is "33".



So our design has been completed. But what if we add a Semantic Zoom control in our application? Well that's not a bad idea.

Adding Semantic Zoom

Semantic Zoom is a control that is available in the Windows 8.1 SDK. It's really easy to add Semantic Zoom using Blend. Go to the Assets tab at top left and select the semantic zoom control for Controls.



Drag it and drop it over Grid in the "Objects and Timeline" tab.

Semantic Zoom has the following two views inside it:

1. ZoomIn View
2. ZoomOut View

The ZoomIn View is the current default view of the application whereas the ZoomOut view is the view when the user clicks the "minus button (at right bottom of Metro apps)" to see the groups.

Note:

ShortCuts for ZoomIn and ZoomOut are:

Ctrl & '+'
Ctrl & "-"

For the ZoomIn View we have already developed the GridView, so delete the "GridView" inside the ZoomInView and drag your default "GridView" to the ZoomInView Catagory.



For the ZoomOut View select the "GridView" and follow these steps:

1. Go to the DataContext tab
2. Drag the Groups to the screen
3. You will notice that Groups will appear on the screen

After you see that Groups have appeared on screen you have to do this,

1. Right Click over the Item
2. Go Over Edit additional Template
3. Edit Generated Item
4. Then over "Edit Current"

Now here is one really important thing, select the border for "Object and Timeline", delete the picture and select the Border only. Go to the properties and click over the small green button at the end of the Background Color. Select the "Create Data Binding". Now here there are groups. You need to bind it with the very first color inside that group, we call it Color[0].



So, select the SolidColorBrush of Color[0], you can also select any color by changing that [0]. As you do the binding you will notice that the groups will appear like the following.



Isn't that amazing? All of your application are designed using Blend. I hope you enjoyed this tutorial.