Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

How to use Cimbalino Windows Phone Toolkit - MessageBoxService

From Wiki
Jump to: navigation, search

This code example shows how display message boxes in your app using MessageBoxService from the Cimbalino Windows Phone Toolkit.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: MessageBoxService Example (github)
Tested with
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Devices(s): Nokia Lumia 800, Nokia Lumia 920
CompatibilityArticle
Created: saramgsilva (05 Nov 2013)
Last edited: influencer (31 Jan 2014)

Contents

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 which deliver different features, ranging from base MVVM services and helpers, through to code for background agents, and for accessing media library, location services etc. 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 required to register the service in MVVM Light (note that MVVM and the MVVM Light Toolkit are not "preconditions" to use this service).

This article explains how to use the service in an MVVM Light app. Developers should first read How to use MVVM Light Toolkit for Windows Phone for a general overview of MVVM Light and how to use services.

A screenshot of the example app displaying a message box is shown below.

MessageBox2.png

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. For more details see:


The sample is built using MVVM Light and the article does not go into great detail about the plumbing/infrastructure provided by the toolkit. For more information see:

Registering the service

We should register each service in ViewModelLocator, as following:

  1.  using Cimbalino.Phone.Toolkit.Services;
  2.  
  3.     /// This class contains static references to all the view models in the
  4.     /// application and provides an entry point for the bindings.
  5.     public class ViewModelLocator
  6.     {
  7.         /// Initializes a new instance of the ViewModelLocator class.
  8.         public ViewModelLocator()
  9.         {
  10.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  11.  
  12.             if (!SimpleIoc.Default.IsRegistered<IMessageBoxService>())
  13.             {
  14.                 SimpleIoc.Default.Register<IMessageBoxService, MessageBoxService>();
  15.             }
  16.  
  17.             SimpleIoc.Default.Register<MainViewModel>();
  18.         }
  19.  
  20.         public MainViewModel MainViewModel
  21.         {
  22.             get
  23.             {
  24.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  25.             }
  26.         }
  27.  
  28.         public static void Cleanup()
  29.         {
  30.             // TODO Clear the ViewModels
  31.         }
  32.     }

Implementing the ViewModel

Then we should implement the MainViewModel as following:

  1. using System.Collections.Generic;
  2.     using System.Windows;
  3.     using System.Windows.Input;
  4.  
  5.     using Cimbalino.Phone.Toolkit.Services;
  6.  
  7.     using GalaSoft.MvvmLight.Command;
  8.  
  9.     /// This class contains properties that the main View can data bind to.
  10.     public class MainViewModel : ViewModelBase
  11.     {
  12.         /// The message box service.
  13.         private readonly IMessageBoxService _messageBoxService;
  14.  
  15.         /// Initializes a new instance of the MainViewModel class.
  16.         public MainViewModel(IMessageBoxService messageBoxService)
  17.         {
  18.             _messageBoxService = messageBoxService;
  19.             ShowMessageBoxCommand = new RelayCommand(ShowMessageBox);
  20.         }
  21.  
  22.         /// Shows the message box.
  23.         private void ShowMessageBox()
  24.         {
  25.             _messageBoxService.Show("I am a message box", "Cimbalino sample", MessageBoxButton.OK);
  26.         }
  27.  
  28.         /// Gets the show message box command.
  29.         public ICommand ShowMessageBoxCommand { get; private set; }
  30.     }

Implementing the View

Add the binding in main page like:

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

The MainPage.xaml can be the following:

  1. <phone:PhoneApplicationPage x:Class="CimbalinoSample.MainPage"
  2.                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  7.                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  8.                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  9.                             FontSize="{StaticResource PhoneFontSizeNormal}"
  10.                             Foreground="{StaticResource PhoneForegroundBrush}"
  11.                             Orientation="Portrait"
  12.                             DataContext="{Binding MainViewModel, 
  13.                                                   Source={StaticResource Locator}}"
  14.                             SupportedOrientations="Portrait"
  15.                             shell:SystemTray.IsVisible="True"
  16.                             mc:Ignorable="d">
  17.  
  18.     <!--  LayoutRoot is the root grid where all page content is placed  -->
  19.     <Grid x:Name="LayoutRoot" Background="Transparent">
  20.         <Grid.RowDefinitions>
  21.             <RowDefinition Height="Auto" />
  22.             <RowDefinition Height="*" />
  23.         </Grid.RowDefinitions>
  24.  
  25.         <!--  TitlePanel contains the name of the application and page title  -->
  26.         <StackPanel x:Name="TitlePanel"
  27.                     Grid.Row="0"
  28.                     Margin="12,17,0,28">
  29.             <TextBlock Margin="12,0"
  30.                        Style="{StaticResource PhoneTextTitle2Style}"
  31.                        Text="Cimbalino Sample" />
  32.             <TextBlock Margin="9,-7,0,0"
  33.                        Style="{StaticResource PhoneTextTitle2Style}"
  34.                        Text="MessageBoxService" />
  35.         </StackPanel>
  36.  
  37.         <!--  ContentPanel - place additional content here  -->
  38.         <Grid x:Name="ContentPanel"
  39.               Grid.Row="1"
  40.               Margin="12,0,12,0">
  41.             <Button Command="{Binding ShowMessageBoxCommand}" Content="Show message box" />
  42.         </Grid>
  43.  
  44.     </Grid>
  45.  
  46. </phone:PhoneApplicationPage>


Source Code

The source code is available here.

This page was last modified on 31 January 2014, at 22:06.
291 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×