Click here to Skip to main content
12,633,764 members (27,800 online)
Click here to Skip to main content
Add your own
alternative version


21 bookmarked

Introduction to using MVVM with Visual C++ 2012

, 23 Mar 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Writing a basic Windows Store Hello World equivalent using VC++ and MVVM


This is an introductory article on using the MVVM pattern with Visual C++ 2012 to write Windows Store applications. The article will cover how to get data binding working with ref classes, hooking up the view models with the XAML views, using commands, setting styles in XAML, creating and using a value converter, and using item templates with a ListBox control. The article assumes that you are familiar with MVVM and C++/CX, and also that you have a fundamental understanding of using XAML views.

Setting up data binding

Getting a class ready for data binding involves two steps:

  1. Adding the [Bindable] attribute on the class
  2. Implementing INotifyPropertyChanged on the class
<span class="highlight" >[Bindable]</span> 
public ref class Restaurant sealed <span class="highlight" >: BindableBase</span>
  String^ name;
  String^ city;
  String^ notes;
  int rating;

  property String^ Name 
    String^ get(); 
    void set(String^ value); 

  property String^ City 
    String^ get(); 
    void set(String^ value); 

  property String^ Notes 
    String^ get(); 
    void set(String^ value); 

  property int Rating
    int get(); 
    void set(int value); 

Adding the Bindable attribute involves one additional step to get the code to compile. This is due to a quirk in the XAML compiler, and I've blogged about it here:

You need to add an include to the header file in any of your xxx.xaml.h files and the code will compile fine. The compiler will auto-generate plumbing code required for data binding in XamlTypeInfo.g.cpp once it sees the Bindable attribute on a class. Here's a small snippet showing the sort of code it generates for us.

if (typeName == L"MvvmHelloWorld.ViewModels.Restaurant")
    ::XamlTypeInfo::InfoProvider::XamlUserType^ userType = ref new 
    userType->KindOfType = ::Windows::UI::Xaml::Interop::TypeKind::Custom;
    userType->Activator =
        []() -> Platform::Object^ 
            return ref new ::MvvmHelloWorld::ViewModels::Restaurant(); 
    return userType;

Instead of implementing INotifyPropertyChanged for each data-bindable class, the common practice is to have a base class that all view models would implement. I've used BindableBase which implements INotifyPropertyChanged.

public ref class BindableBase : DependencyObject, INotifyPropertyChanged 
  virtual event PropertyChangedEventHandler^ PropertyChanged;

  virtual void OnPropertyChanged(String^ propertyName);

The OnPropertyChanged is fairly simple.

void BindableBase::OnPropertyChanged(String^ propertyName)
  PropertyChanged(this, ref new PropertyChangedEventArgs(propertyName));

Now, you just need to implement the property bodies, and call OnPropertyChanged in the setter methods.

String^ Restaurant::Name::get()
  return name;

void Restaurant::Name::set(String^ value)
  if(name != value)
    name = value;
    <span class="highlight" >OnPropertyChanged("Name");</span>

int Restaurant::Rating::get()
  return rating;

void Restaurant::Rating::set(int value)
  if(rating != value)
    if(value < 1) 
      value = 1;
    else if(value > 5)
      value = 5;

    rating = value;
    <span class="highlight" >OnPropertyChanged("Rating");</span>

Bind to the VM data in XAML

For the main view, it's quite common to have a main view model class. And this is also marked as [Bindable] and derives from BindableBase.

public ref class MainViewModel sealed : BindableBase

For the example project, I've also added these properties.

property String^ Title
  String^ get()
    return "MVVM Hello World with Visual C++";

property <span class="highlight" >IObservableVector<Restaurant^>^</span> Restaurants
  IObservableVector<Restaurant^>^ get();

property Restaurant^ SelectedRestaurant
  Restaurant^ get();
  void set(Restaurant^ value);

Notice how the Restaurants property is of type IObservableVector<Restaurant^>. This interfaces notifies listeners when the collection changes and is basically the collection equivalent of INotifyPropertyChanged. The backing storage variable in the example project is of type Vector<Restaurant^> which is a library collection type that implements IObservableVector<T>. I don't want to clutter up the article with full XAML listings, so I'll just show some of the relevant snippets here.

<TextBlock Style="{StaticResource HeaderTextStyle}" 
           Margin="10,10,0,10" <span class="highlight" >Text="{Binding Title}"</span> />

Notice the binding there, which sets the text of that control to the value of the Title property. If you've never used XAML before, then this might look a little strange initially. The reason it's able to find the Title property is because I've hooked up the data context for the Page to an instance of the MainViewModel class.

    <span class="highlight" >DataContext="{Binding Source={StaticResource MainViewModel}}"</span>>

And MainViewModel itself is defined as a static resource in App.xaml.

        <span class="highlight" ><localVM:MainViewModel x:Key="MainViewModel" /></span>

The Restaurants property is data bound to a ListBox that uses a custom item template.

<ListBox <span class="highlight" >ItemsSource="{Binding Restaurants}"</span> Width="500" Margin="10" Height="500"
     <span class="highlight" >SelectedItem="{Binding SelectedRestaurant, Mode=TwoWay}"</span>>

Notice how the SelectedItem property on the ListBox is two-way bound to the SelectedRestaurant property on the view model. This way the VM can track the selected restaurant, and a possible details view can data bind to that property (and we do that in the example). Notice the converter used for rating, I talk about it a little later in this article.

<TextBlock <span class="highlight" >Text="{Binding SelectedRestaurant.Name}"</span> 
    Style="{StaticResource RestaurantTitleTextStyle}" />

This serves as a sort of details view, and is bound to the SelectedItem property. So when the user selects a restaurant in the ListBox, this view is automatically updated. And when the details view is updated by the user, the item in the ListBox is automatically updated (because of the TwoWay bindings). The TextBox values bind only when focus leaves the control, so I've added a dummy button that the user can click for binding to fire.

<Button Content="Update" Style="{StaticResource MediumButtonStyle}" 
      Width="120" Margin="5" />

Note that you can write a custom behavior to have binding fire when the text changes, but this is not standard behavior at the moment.

Using styles

I've applied styles on the controls wherever possible.

<TextBlock Text="{Binding Name}" 
    <span class="highlight" >Style="{StaticResource RestaurantTitleTextStyle}"</span> />

These styles come off a style dictionary (defined in XAML). The dictionary is referenced in App.xaml.

            <span class="highlight" ><ResourceDictionary Source="Common/StandardStyles.xaml"/></span>

Defining styles is fairly straightforward.

<Style x:Key="RestaurantTitleTextStyle" TargetType="TextBlock">
    <span class="highlight" ><Setter Property="FontSize" Value="24"/></span>
    <span class="highlight" ><Setter Property="FontWeight" Value="Bold"/></span>

<Style x:Key="RestaurantTitleGreenTextStyle" TargetType="TextBlock" 
            BasedOn="{StaticResource RestaurantTitleTextStyle}">
    <Setter Property="Foreground" Value="GreenYellow"/>

<Style x:Key="RestaurantSubTitleTextStyle" TargetType="TextBlock">
    <Setter Property="FontSize" Value="18"/>

<Style x:Key="RestaurantSubTitleTextBoxStyle" TargetType="TextBox">
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Margin" Value="5"/>

<Style x:Key="MediumButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="22"/>

It's analogous to using CSS to define styles in HTML. Style editing is not very smooth with VS 2012 and the IDE does not offer much help when you edit the style dictionary. Blend may be a little more functional there but may involve a bit of  learning curve and getting used to. One neat thing is how you can have the same project open at the same time in both VS 2012 and Blend.

Using a value converter

If you remember, the rating UI in the ListBox item template uses a value converter.

<TextBlock Text="{Binding Rating, <span class="highlight" >Converter={StaticResource RatingConverter}</span>}" 
    Style="{StaticResource RestaurantSubTitleTextStyle}" />

The converter instance is defined as a static resource within the page.

    <localConv:RatingConverter x:Key="RatingConverter" />

Converter classes are basically implementations of IValueConverter.

public ref class RatingConverter sealed <span class="highlight" >: IValueConverter</span>

  virtual Object^ Convert(Object^ value, 
      TypeName targetType, Object^ parameter, String^ language)
    auto boxedInt = dynamic_cast<Box<int>^>(value);
    auto intValue = boxedInt != nullptr ? boxedInt->Value : 1;

    <span class="highlight" >return "Rating : " + ref new String(std::wstring(intValue, '*').c_str());</span>

  virtual Object^ ConvertBack(Object^ value, 
      TypeName targetType, Object^ parameter, String^ language)
    return value;

My implementation only handles one way conversion and converts the integer into a string of asterisks. This is a fairly simple implementation but converters can be quite powerful and any serious project would quite likely see you creating a fair number of them.

Setting up commands

The last thing I wanted to cover in this article is the use of commands. The ICommand interface is what command objects implement to support command binding. I use a very simple implementation that will be familiar to anyone who's used any basic MVVM library.

public delegate void ExecuteDelegate(Object^ parameter);
public delegate bool CanExecuteDelegate(Object^ parameter);

public ref class DelegateCommand sealed <span class="highlight" >: public ICommand</span>
  ExecuteDelegate^ executeDelegate;
  CanExecuteDelegate^ canExecuteDelegate;
  bool lastCanExecute;    

  DelegateCommand(ExecuteDelegate^ execute, CanExecuteDelegate^ canExecute);

  virtual event EventHandler<Object^>^ CanExecuteChanged;
  virtual void Execute(Object^ parameter);
  virtual bool CanExecute(Object^ parameter);

The main VM class defines a couple of command properties.

property ICommand^ AddRestaurantCommand;
property ICommand^ DeleteRestaurantCommand;

The commands are initialized in the VM constructor.

  AddRestaurantCommand = ref new DelegateCommand(
    ref new ExecuteDelegate(this, &MainViewModel::AddRestaurant),

  DeleteRestaurantCommand = ref new DelegateCommand(
    ref new ExecuteDelegate(this, &MainViewModel::DeleteRestaurant),

AddRestaurant and DeleteRestaurant are private class methods.

void MainViewModel::AddRestaurant(Object^ parameter)
  auto restaurant = ref new Restaurant();
  restaurant->Name = NewName;
  restaurant->City = "unassigned";
  restaurant->Notes = "unassigned";
  restaurant->Rating = 1;

  SelectedRestaurant = restaurant;

void MainViewModel::DeleteRestaurant(Object^ parameter)
  if(SelectedRestaurant != nullptr)
    unsigned int index;
    if(restaurants->IndexOf(SelectedRestaurant, &index))
      SelectedRestaurant = nullptr;

And then the commands are hooked up to buttons in the XAML.

<Button Content="Delete" <span class="highlight" >Command="{Binding DeleteRestaurantCommand}"</span> 
    Width="120" Margin="5" Style="{StaticResource MediumButtonStyle}" />


Alright, that's all. I do intend to write a series of articles that will cover more topics on writing Windows Store apps using Visual C++, although I am not sure if I'd do them in any particular order. As always, do send in your feedback and criticism via the forum at the bottom of this article. Thank you.


  • March 23rd, 2013 - Article published


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nish Nishant
United States United States
Nish Nishant is a Software Architect/Consultant based out of Columbus, Ohio. He has over 16 years of software industry experience in various roles including Lead Software Architect, Principal Software Engineer, and Product Manager. Nish is a recipient of the annual Microsoft Visual C++ MVP Award since 2002 (14 consecutive awards as of 2015).

Nish is an industry acknowledged expert in the Microsoft technology stack. He authored
C++/CLI in Action for Manning Publications in 2005, and had previously co-authored
Extending MFC Applications with the .NET Framework for Addison Wesley in 2003. In addition, he has over 140 published technology articles on and another 250+ blog articles on his
WordPress blog. Nish is vastly experienced in team management, mentoring teams, and directing all stages of software development.

Contact Nish : You can reach Nish on his google email id voidnish.

Website and Blog

You may also be interested in...


Comments and Discussions

BugYour code does not build in windows 8.1 Pin
Tombstarship13-Feb-14 18:59
memberTombstarship13-Feb-14 18:59 
GeneralRe: Your code does not build in windows 8.1 Pin
Nish Sivakumar14-Feb-14 3:03
mvpNish Sivakumar14-Feb-14 3:03 
GeneralMy vote of 5 Pin
Mihai MOGA12-Apr-13 20:00
memberMihai MOGA12-Apr-13 20:00 
GeneralRe: My vote of 5 Pin
Nish Sivakumar13-Apr-13 8:32
sitebuilderNish Sivakumar13-Apr-13 8:32 
GeneralMy vote of 5 Pin
Espen Harlinn24-Mar-13 10:22
mvpEspen Harlinn24-Mar-13 10:22 
GeneralRe: My vote of 5 Pin
Nish Sivakumar25-Mar-13 2:51
sitebuilderNish Sivakumar25-Mar-13 2:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161208.2 | Last Updated 23 Mar 2013
Article Copyright 2013 by Nish Nishant
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid