Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 11:29, 5 November 2013 by saramgsilva (Talk | contribs)

How to use Cimbalino Windows Phone Toolkit - MessageBoxService

From Wiki
Jump to: navigation, search

This samples has the goal to show how to use Cimbalino Windows Phone Toolkit – MessageBoxService.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Tested with
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Devices(s): Nokia Lumia 800, Nokia Lumia 920
Created: saramgsilva (05 Nov 2013)
Last edited: saramgsilva (05 Nov 2013)


Cimbalino Windows Phone Toolkit is a set of useful and powerful items that will help you build your Silverlight applications for Windows Phone. The Toolkit is divided in projects which deliver different features. The base project (Cimbalino.Phone.Toolkit) contains base MVVM services, some very useful converters, helper classes and extension methods, and the bindable Application Bar behaviour.

Building Sample

This packages is available in Nuget Package Manager (for both targets) and can be installed, for more details see: How to install Cimbalino Windows Phone Toolkit packages.

The sample for this article uses MVVM Light for help in MVVM pattern implementation, for more details see:

Let's start!

We should register each service in ViewModelLocator, as following:

 using Cimbalino.Phone.Toolkit.Services;
/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
/// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
if (!SimpleIoc.Default.IsRegistered<IMessageBoxService>())
SimpleIoc.Default.Register<IMessageBoxService, MessageBoxService>();
public MainViewModel MainViewModel
return ServiceLocator.Current.GetInstance<MainViewModel>();
public static void Cleanup()
// TODO Clear the ViewModels

Then we should implement the MainViewModel as following:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using Cimbalino.Phone.Toolkit.Services;
using GalaSoft.MvvmLight.Command;
/// <summary>
/// This class contains properties that the main View can data bind to.
/// </summary>
public class MainViewModel : ViewModelBase
/// <summary>
/// The message box service.
/// </summary>
private readonly IMessageBoxService _messageBoxService;
/// <summary>
/// Initializes a new instance of the MainViewModel class.
/// </summary>
public MainViewModel(IMessageBoxService messageBoxService)
_messageBoxService = messageBoxService;
ShowMessageBoxCommand = new RelayCommand(ShowMessageBox);
/// <summary>
/// Shows the message box.
/// </summary>
private void ShowMessageBox()
_messageBoxService.Show("I am a message box", "Cimbalino sample", MessageBoxButton.OK);
/// <summary>
/// Gets the show message box command.
/// </summary>
/// <value>
/// The show message box command.
/// </value>
public ICommand ShowMessageBoxCommand { get; private set; }

for connect view model with the page we should add the ViewModelLocator instance in App.xaml:

 <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True"  />

and add the binding in main page like:

DataContext="{Binding MainViewModel, 
Source={StaticResource Locator}}"

The MainPage.xaml can be the following:

<phone:PhoneApplicationPage x:Class="CimbalinoSample.MainPage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
DataContext="{Binding MainViewModel,
Source={StaticResource Locator}}"

<!-- LayoutRoot is the root grid where all page content is placed -->
<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<!-- TitlePanel contains the name of the application and page title -->
<StackPanel x:Name="TitlePanel"
<TextBlock Margin="12,0"
Style="{StaticResource PhoneTextTitle2Style}"
Text="Cimbalino Sample" />
<TextBlock Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle2Style}"
Text="MessageBoxService" />
<!-- ContentPanel - place additional content here -->
<Grid x:Name="ContentPanel"
<Button Command="{Binding ShowMessageBoxCommand}" Content="Show message box" />
66 page views in the last 30 days.