How to Implement Link Sharing Using 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 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 Cimbalino Toolkit's "Share Link" service is an MVVM compatible wrapper around the system ShareLinkTask, that can be used to launch a dialog to share links via social networks configured on the device. The kit provides both the IShareLinkService interface and its implementation ShareLinkServicerequired to register the service in MVVM Light (note that MVVM and the MVVM Light Toolkit are not "preconditions" to use this service).


Screenshot of the example app showing the sharing button.

Building the example code

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

Register the service in the ViewModelLocator constructor as shown below.

 /// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
{
    ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

    if (!SimpleIoc.Default.IsRegistered<IShareLinkService>())
    {
        SimpleIoc.Default.Register<IShareLinkService, ShareLinkService>();
    }

    SimpleIoc.Default.Register<MainViewModel>();
}

public MainViewModel MainViewModel
{
    get
    {
        return ServiceLocator.Current.GetInstance<MainViewModel>();
    }
}

public static void Cleanup()
{
    // TODO Clear the ViewModels
}

Implementing the ViewModel

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

public class MainViewModel : ViewModelBase
{
    /// <summary>
    /// The share link service.
    /// </summary>
    private readonly IShareLinkService _shareLinkService;

    /// <summary>
    /// The public application url.
    /// </summary>
    private readonly string _appUrl;

    /// <summary>
    /// Initializes a new instance of the <see cref="MainViewModel"/> class.
    /// </summary>
    /// <param name="shareLinkService">
    /// The share Link Service.
    /// </param>
    public MainViewModel(IShareLinkService shareLinkService)
    {
        _shareLinkService = shareLinkService;

        ShareSocialNetworkCommand = new RelayCommand(ShareSocialNetwork);
        _appUrl = string.Concat("http://windowsphone.com/s?appid=8df00038-1b7a-406b-b33f-37a78b17348c");
    }

    /// <summary>
    /// Gets the share social network command.
    /// </summary>
    public ICommand ShareSocialNetworkCommand { get; private set; }

    /// <summary>
    /// The share social network.
    /// </summary>
    private void ShareSocialNetwork()
    {
        const string Message = "This application is amazing, should try it! See in";
        _shareLinkService.Show("Cimbalino Toolkit Sample", Message, new Uri(_appUrl, UriKind.Absolute));
    }
}

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.

Add the binding in the main page is as in the following:

 

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:cimbalino="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                            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="1"
                    Margin="0,5,12,396">
            <TextBlock Margin="12,0"
                       Style="{StaticResource PhoneTextTitle2Style}"
                       Text="Cimbalino Toolkit Sample" />
        </StackPanel>
        <TextBlock Grid.RowSpan="2"
                   Margin="12,50,-3,487"
                   Style="{StaticResource PhoneTextTitle3Style}"
                   TextWrapping="Wrap">
            This samples has the goal to show how to use Cimbalino Toolkit - ShareLinkService.
        </TextBlock>
        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0" />
        <i:Interaction.Behaviors>
            <cimbalino:ApplicationBarBehavior>

                <cimbalino:ApplicationBarIconButton Command="{Binding ShareSocialNetworkCommand,
                                                                      Mode=OneTime}"
                                                    IconUri="/Images/appbar.share.png"
                                                    Text="Share it" />
            </cimbalino:ApplicationBarBehavior>
        </i:Interaction.Behaviors>
    </Grid>

</phone:PhoneApplicationPage>