×
Namespaces

Variants
Actions

How to use Cimbalino Windows Phone Toolkit Media Library - ScreenshotService

From Nokia Developer Wiki
Jump to: navigation, search

This code example shows how take screenshots of the current page using ScreenshotService from the Cimbalino Windows Phone Toolkit Media Library.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
Article Metadata
Code Example
Source file: ScreenshotService Sample(github)
Tested with
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Devices(s): Nokia Lumia 800, Nokia Lumia 920
Platform Security
Capabilities: ID_CAP_MEDIALIB_PHOTO
Article
Created: saramgsilva (05 Dec 2013)
Last edited: saramgsilva (16 Dec 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. Cimbalino.Phone.Toolkit.MediaLibrary is a MVVM compatible services for media library access

The Cimbalino Toolkit's "Screenshot service" takes a screenshot of the current screen and saves it to the MediaLibrary with either a specified name of a name based on a GUID. The kit provides both the IScreenshotService interface and its implementationScreenshotService 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.

Building the example code

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


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

Registering the service

Register the service in the ViewModelLocator constructor as highlighted below

  1.    using Cimbalino.Phone.Toolkit.Services;
  2.     using GalaSoft.MvvmLight;
  3.     using GalaSoft.MvvmLight.Ioc;
  4.     using Microsoft.Practices.ServiceLocation;
  5.  
  6.     /// This class contains static references to all the view models in the
  7.     /// application and provides an entry point for the bindings.
  8.     public class ViewModelLocator
  9.     {
  10.         /// Initializes a new instance of the ViewModelLocator class.
  11.         public ViewModelLocator()
  12.         {
  13.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  14.             if (!SimpleIoc.Default.IsRegistered<IScreenshotService>())
  15.             {
  16.                 SimpleIoc.Default.Register<IScreenshotService, ScreenshotService>();
  17.             }
  18.             SimpleIoc.Default.Register<MainViewModel>();
  19.         }
  20.  
  21.         /// Gets the main view model.
  22.         public MainViewModel MainViewModel
  23.         {
  24.             get
  25.             {
  26.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  27.             }
  28.         }
  29.  
  30.         public static void Cleanup()
  31.         {
  32.             // TODO Clear the ViewModels
  33.             var viewModelLocator = (ViewModelLocator)App.Current.Resources["Locator"];
  34.             viewModelLocator.MainViewModel.Cleanup();
  35.         }
  36.     }


Implementing the ViewModel

Then we should implement the MainViewModel as following. Note how the model takes a IScreenshotService - the ViewModelLocator automatically creates a registered object of this type to satisfy the dependency.

  1.     using System.Windows;
  2.     using System.Windows.Input;
  3.     using System.Windows.Threading;
  4.  
  5.     using Cimbalino.Phone.Toolkit.Services;
  6.  
  7.     using GalaSoft.MvvmLight.Command;
  8.     using GalaSoft.MvvmLight;
  9.  
  10.     /// This class contains properties that the main View can data bind to.
  11.     public class MainViewModel : ViewModelBase
  12.     {
  13.         /// The screenshot service
  14.         private readonly IScreenshotService _screenshotService;
  15.  
  16.         /// Initializes a new instance of the MainViewModel class.
  17.         public MainViewModel(IScreenshotService screenshotService)
  18.         {
  19.             _screenshotService = screenshotService;
  20.             TakeScreenshotCommand = new RelayCommand(TakeScreenshot);
  21.         }
  22.  
  23.         /// Gets the take screenshot command.
  24.         public ICommand TakeScreenshotCommand { get; private set; }
  25.  
  26.         /// Command to take screenshot.
  27.         private void TakeScreenshot()
  28.         {
  29.             _screenshotService.TakeScreenshot("CimbalinoScreenshot");
  30.         }
  31.     }

Implementing the View

The MainPage.xaml is as shown below.

  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.                             DataContext="{Binding MainViewModel,
  9.                                                   Source={StaticResource Locator}}"
  10.                             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11.                             FontSize="{StaticResource PhoneFontSizeNormal}"
  12.                             Foreground="{StaticResource PhoneForegroundBrush}"
  13.                             Orientation="Portrait"
  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="ScreenshotService" />
  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.             <TextBlock TextWrapping="Wrap">This samples has the goal to show how to use Cimbalino Windows Phone Toolkit Media Library - ScreenshotService</TextBlock>
  42.  
  43.             <Button Margin="0,219,0,293"
  44.                     Command="{Binding TakeScreenshotCommand}"
  45.                     Content="Take Screenshot" />
  46.         </Grid>
  47.     </Grid>
  48. </phone:PhoneApplicationPage>
This page was last modified on 16 December 2013, at 19:33.
130 page views in the last 30 days.