Introduction
The Cimbalino Windows Phone Toolkit delivers a set of useful and powerful MVVM-compatible tools and services to help developers build Silverlight applications for Windows Phone. The Toolkit is divided in projects that deliver various features, ranging from base MVVM services and helpers, through to code for background agents and for accessing media library, location services and so on. The base project (Cimbalino.Phone.Toolkit) contains base MVVM services, some very useful converters, helper classes and extension methods.
The Cimbalino Toolkit's Message Box service is used to display message boxes from the model of an MVVM-light app. The kit provides both the IMessageBoxService interface and its implementation MessageBoxService is required to register the service in MVVM Light (note that MVVM and the MVVM Light Toolkit are not "preconditions" to use this service).
A screenshot of the example app displaying a message box is shown below.
Building the example code
The source code for the code example is available here: MessageBoxService Example (Github).
To build the source code you will also need the MVVM Light Toolkit and the Cimbalino Windows Phone Toolkit. Their packages are available in the Nuget Package Manager.
Registering the service
We should register each service in ViewModelLocator, as in the following:
- using Cimbalino.Phone.Toolkit.Services;
-
-
-
- public class ViewModelLocator
- {
-
- public ViewModelLocator()
- {
- ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
-
- if (!SimpleIoc.Default.IsRegistered<IMessageBoxService>())
- {
- SimpleIoc.Default.Register<IMessageBoxService, MessageBoxService>();
- }
-
- SimpleIoc.Default.Register<MainViewModel>();
- }
-
- public MainViewModel MainViewModel
- {
- get
- {
- return ServiceLocator.Current.GetInstance<MainViewModel>();
- }
- }
-
- public static void Cleanup()
- {
-
- }
- }
Implementing the ViewModelThen we should implement the MainViewModel as in the following:
- using System.Collections.Generic;
- using System.Windows;
- using System.Windows.Input;
-
- using Cimbalino.Phone.Toolkit.Services;
-
- using GalaSoft.MvvmLight.Command;
-
-
- public class MainViewModel : ViewModelBase
- {
-
- private readonly IMessageBoxService _messageBoxService;
-
-
- public MainViewModel(IMessageBoxService messageBoxService)
- {
- _messageBoxService = messageBoxService;
- ShowMessageBoxCommand = new RelayCommand(ShowMessageBox);
- }
-
-
- private void ShowMessageBox()
- {
- _messageBoxService.Show("I am a message box", "Cimbalino sample", MessageBoxButton.OK);
- }
-
-
- public ICommand ShowMessageBoxCommand { get; private set; }
- }
Implementing the View
Add the binding in the main page is like:
- DataContext="{Binding MainViewModel,
- Source={StaticResource Locator}}"
- The MainPage.xaml can be the following:
- <phone:PhoneApplicationPage x:Class="CimbalinoSample.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
- xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
- FontFamily="{StaticResource PhoneFontFamilyNormal}"
- FontSize="{StaticResource PhoneFontSizeNormal}"
- Foreground="{StaticResource PhoneForegroundBrush}"
- Orientation="Portrait"
- DataContext="{Binding MainViewModel,
- Source={StaticResource Locator}}"
- SupportedOrientations="Portrait"
- shell:SystemTray.IsVisible="True"
- mc:Ignorable="d">
-
-
- <Grid x:Name="LayoutRoot" Background="Transparent">
- <Grid.RowDefinitions>
- <RowDefinition Height="Auto" />
- <RowDefinition Height="*" />
- </Grid.RowDefinitions>
-
-
- <StackPanel x:Name="TitlePanel"
- Grid.Row="0"
- Margin="12,17,0,28">
- <TextBlock Margin="12,0"
- Style="{StaticResource PhoneTextTitle2Style}"
- Text="Cimbalino Sample" />
- <TextBlock Margin="9,-7,0,0"
- Style="{StaticResource PhoneTextTitle2Style}"
- Text="MessageBoxService" />
- </StackPanel>
-
-
- <Grid x:Name="ContentPanel"
- Grid.Row="1"
- Margin="12,0,12,0">
- <Button Command="{Binding ShowMessageBoxCommand}" Content="Show message box" />
- </Grid>
-
- </Grid>
-
- </phone:PhoneApplicationPage>