×
Namespaces

Variants
Actions
Revision as of 05:54, 25 November 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to send an email using the Cimalino Windows Phone Toolkit

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to launch a task to send an email using EmailComposeService from the Cimbalino Windows Phone Toolkit.

WP Metro Icon Messages.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: EmailComposeService (Github)
Tested with
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Devices(s): Nokia Lumia 800, 920
CompatibilityArticle
Created: saramgsilva (08 Nov 2013)
Last edited: hamishwillee (25 Nov 2013)

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 Cimbalino Toolkit's "Email Compose" service is an MVVM compatible wrapper around the system EmailComposeTask, which can be used to launch a dialog to email users. The kit provides both the IEmailComposeService interface and its implementation EmailComposeService 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.

Screenshot of the example app


Building the example code

The source code for the code example is available here: EmailComposeService (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

Register the service in the ViewModelLocator constructor as shown below.

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

Implementing the ViewModel

Implement the MainViewModel as shown below. The highlighted sections show the MainViewModel constructor taking the IEmailComposeService parameter and assigning it to the private variable. Later on the private member is used to show the link service.

  1.     /// This class contains properties that the main View can data bind to.
  2.     public class MainViewModel : ViewModelBase
  3.     {
  4.         /// The public application url.
  5.         private readonly string _appUrl;
  6.  
  7.         /// The email compose service.
  8.         private readonly IEmailComposeService _emailComposeService;
  9.  
  10.         /// The message
  11.         private string _message;
  12.  
  13.         /// The subject
  14.         private string _subject;
  15.  
  16.         /// The to
  17.         private string _to;
  18.  
  19.         /// Initializes a new instance of the email Compose Service.
  20.         public MainViewModel(IEmailComposeService emailComposeService)
  21.         {
  22.             _emailComposeService = emailComposeService;
  23.  
  24.             SendFeedbackCommand = new RelayCommand(SendFeedback);
  25.             ShareToMailCommand = new RelayCommand(ShareToMail);
  26.             SendCommand =new RelayCommand(Send);
  27.             _appUrl = string.Concat("http://windowsphone.com/s?appid=8df00038-1b7a-406b-b33f-37a78b17348c");
  28.         }
  29.  
  30.         /// Gets or sets the message.
  31.         public string Message
  32.         {
  33.             get { return _message; }
  34.             set { Set("Message", ref _message, value); }
  35.         }
  36.  
  37.         /// Gets the send command.
  38.         public ICommand SendCommand { get; private set; }
  39.  
  40.         /// Gets the send feedback command.
  41.         public ICommand SendFeedbackCommand { get; private set; }
  42.  
  43.         /// Gets the share to e-mail command.
  44.         public ICommand ShareToMailCommand { get; private set; }
  45.  
  46.         /// Gets or sets the subject.
  47.         public string Subject
  48.         {
  49.             get { return _subject; }
  50.             set { Set("Subject", ref _subject, value); }
  51.         }
  52.  
  53.         /// Gets or sets to.
  54.         public string To
  55.         {
  56.             get { return _to; }
  57.             set { Set("To", ref _to, value); }
  58.         }
  59.  
  60.         /// Sends mails.
  61.         private void Send()
  62.         {
  63.             if (!string.IsNullOrEmpty(To) && !string.IsNullOrEmpty(Subject) && !string.IsNullOrEmpty(Message))
  64.             {
  65.                 _emailComposeService.Show(To, Subject, Message);
  66.             }
  67.         }
  68.  
  69.         /// The send feedback.
  70.         private void SendFeedback()
  71.         {
  72.             const string to = "saramgsilva@gmail.com";
  73.             const string subject = "My Feedback";
  74.             var body = "This the body";
  75.             _emailComposeService.Show(to, subject, body);
  76.         }
  77.  
  78.         /// The share to mail.
  79.         private void ShareToMail()
  80.         {
  81.             const string Subject = "Cimbalino Toolkit Sample";
  82.             var body = string.Concat("This application is amazing, you should try it! See in", _appUrl);
  83.             _emailComposeService.Show(Subject, body);
  84.         }
  85.     }

Implementing the view

The rest of the app is "plumbing" to hook up the MainViewModel to the View and send commands back to the invoke the service. How to use MVVM Light Toolkit for Windows Phone explains most of what is going on.

Add the binding in main page as shown:

 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:cimbalino="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"
  5.                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.                             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
  7.                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  9.                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  10.                             DataContext="{Binding MainViewModel,
  11.                                                   Source={StaticResource Locator}}"
  12.                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  13.                             FontSize="{StaticResource PhoneFontSizeNormal}"
  14.                             Foreground="{StaticResource PhoneForegroundBrush}"
  15.                             Orientation="Portrait"
  16.                             SupportedOrientations="Portrait"
  17.                             shell:SystemTray.IsVisible="True"
  18.                             mc:Ignorable="d">
  19.  
  20.     <!--  LayoutRoot is the root grid where all page content is placed  -->
  21.     <Grid x:Name="LayoutRoot" Background="Transparent">
  22.         <Grid.RowDefinitions>
  23.             <RowDefinition Height="Auto" />
  24.             <RowDefinition Height="*" />
  25.         </Grid.RowDefinitions>
  26.  
  27.         <!--  TitlePanel contains the name of the application and page title  -->
  28.         <StackPanel x:Name="TitlePanel"
  29.                     Grid.Row="1"
  30.                     Margin="0,5,12,396">
  31.             <TextBlock Margin="12,0"
  32.                        Style="{StaticResource PhoneTextTitle2Style}"
  33.                        Text="Cimbalino Toolkit Sample" />
  34.         </StackPanel>
  35.         <TextBlock Grid.RowSpan="2"
  36.                    Margin="12,50,-3,639"
  37.                    Style="{StaticResource PhoneTextTitle3Style}"
  38.                    TextWrapping="Wrap">
  39.             This samples has the goal to show how to use Cimbalino Toolkit - EmailComposeService.
  40.         </TextBlock>
  41.         <!--  ContentPanel - place additional content here  -->
  42.         <Grid x:Name="ContentPanel"
  43.               Grid.Row="1"
  44.               Margin="12,150,12,0">
  45.             <Grid.RowDefinitions>
  46.                 <RowDefinition Height="Auto" />
  47.                 <RowDefinition Height="Auto" />
  48.                 <RowDefinition Height="Auto" />
  49.                 <RowDefinition Height="Auto" />
  50.                 <RowDefinition Height="Auto" />
  51.                 <RowDefinition Height="Auto" />
  52.                 <RowDefinition Height="Auto" />
  53.                 <RowDefinition Height="Auto" />
  54.             </Grid.RowDefinitions>
  55.             <TextBlock Grid.Row="0" Text="To:" />
  56.             <TextBox Grid.Row="1" Text="{Binding To, Mode=TwoWay}" />
  57.  
  58.             <TextBlock Grid.Row="2" Text="Subject:" />
  59.             <TextBox Grid.Row="3" Text="{Binding Subject, Mode=TwoWay}" />
  60.             <TextBlock Grid.Row="4" Text="Message:" />
  61.             <TextBox Grid.Row="5"
  62.                      Height="200"
  63.                      Text="{Binding Message,
  64.                                     Mode=TwoWay}" />
  65.             <Button Grid.Row="6"
  66.                     Command="{Binding SendCommand}"
  67.                     Content="Send" />
  68.         </Grid>
  69.         <i:Interaction.Behaviors>
  70.             <cimbalino:ApplicationBarBehavior>
  71.  
  72.                 <cimbalino:ApplicationBarIconButton Command="{Binding SendFeedbackCommand,
  73.                                                                       Mode=OneTime}"
  74.                                                     IconUri="/Images/appbar.reply.email.png"
  75.                                                     Text="Feedback" />
  76.                 <cimbalino:ApplicationBarIconButton Command="{Binding ShareToMailCommand,
  77.                                                                       Mode=OneTime}"
  78.                                                     IconUri="/Images/appbar.email.png"
  79.                                                     Text="Email" />
  80.             </cimbalino:ApplicationBarBehavior>
  81.         </i:Interaction.Behaviors>
  82.     </Grid>
  83.  
  84. </phone:PhoneApplicationPage>


Related samples

Source Code

The source code is available here

This page was last modified on 25 November 2013, at 05:54.
123 page views in the last 30 days.
×