How to Use Cimballino Windows Phone Toolkit PhoneDialer, PhoneCallService

This code example shows how to launch the phone application to make a call from your app using PhoneCallService from the Cimbalino Windows Phone Toolkit.

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 into projects that deliver various features, ranging from base MVVM services and helpers, through to code for background agents and for accessing the media library, location services and so on. Cimbalino.Phone.Toolkit.PhoneDialer contains MVVM compatible services for phone dialler access.

The Cimbalino Toolkit's "Phone Call" service is an MVVM compatible wrapper around the systemPhoneCallTask, that can be used to start the "Phone app". The kit provides both the IPhoneCallService interface and its implementation PhoneCallService is required to register the service in MVVM Light (note that MVVM and the MVVM Light Toolkit are not "preconditions" to use this service).

Building the example code

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

Note: you must specify the following capabilities in the app manifest: ID_CAP_PHONEDIALER.

Registering the service

Register the service in the ViewModelLocator constructor as shown below:

/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
public class ViewModelLocator
{
    /// Initializes a new instance of the ViewModelLocator class.
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
        if (!SimpleIoc.Default.IsRegistered<IPhoneCallService>())
        {
            SimpleIoc.Default.Register<IPhoneCallService, PhoneCallService>();
        }
        SimpleIoc.Default.Register<MainViewModel>();
    }

    /// Gets the main view model.
    public MainViewModel MainViewModel
    {
        get
        {
            return ServiceLocator.Current.GetInstance<MainViewModel>();
        }
    }

    public static void Cleanup()
    {
        // TODO Clear the ViewModels
        var viewModelLocator = (ViewModelLocator)App.Current.Resources["Locator"];
        viewModelLocator.MainViewModel.Cleanup();
    }
}

Implementing the ViewModel

Implement the MainViewModel (MainViewModel.cs) as shown below. The highlighted sections show the MainViewModel constructor taking the IPhoneCallService parameter and assign it to a private member. Later on the member is used to call Show() to launch thePhone app.

using System.Windows;
using System.Windows.Input;
using System.Windows.Threading;

using Cimbalino.Phone.Toolkit.Services;

using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight;

/// This class contains properties that the main View can data bind to.
public class MainViewModel : ViewModelBase
{
    /// The phone call service
    private readonly IPhoneCallService _phoneCallService;

    /// The number
    private string _number;

    /// The name
    private string _name;

    /// Initializes a new instance of the MainViewModel class.
    public MainViewModel(IPhoneCallService phoneCallService)
    {
        _phoneCallService = phoneCallService;
        CallCommand =new RelayCommand(CallTo);
    }

    /// Gets or sets the number.
    public string Number
    {
        get
        {
            return _number;
        }
        set
        {
            Set("Number", ref _number, value);
        }
    }

    /// Gets or sets the name.
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            Set("Name", ref _name, value);
        }
    }

    /// Gets the call command.
    public ICommand CallCommand { get; private set; }

    /// Calls to.
    private void CallTo()
    {
        _phoneCallService.Show(Number, Name);
    }
}

Implementing the View

The rest of the app is "plumbing" to hook up the ViewModels to the View and to send commands from the UI to the invoke the service.

The MainPage.xaml is as shown below.

<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"
                            DataContext="{Binding MainViewModel,
                                                  Source={StaticResource Locator}}"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            SupportedOrientations="Portrait"
                            shell:SystemTray.IsVisible="True"
                            mc:Ignorable="d">

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <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 PhoneTextTitle1Style}"
                       Text="PhoneDailer" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <TextBlock TextWrapping="Wrap">
                Name:
            </TextBlock>
            <TextBlock Margin="0,100,0,-100" TextWrapping="Wrap">
                Number:
            </TextBlock>
            <TextBox Text="{Binding Name,Mode=TwoWay}" Margin="-10,20,10,496"/>
            <TextBox Text="{Binding Number,Mode=TwoWay}" Margin="-10,122,10,399"/>
            <Button Margin="0,219,0,293"
                    Command="{Binding CallCommand}"
                    Content="Call" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>