How to Use Cimbalino Windows Phone Toolkit Media Library – MediaLibraryService

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 the media library, location services and so on. Cimbalino.Phone.Toolkit.MediaLibrary is a MVVM compatible services for media library access.

IMediaLibraryService represents an interface for a service capable of saving images to the media library. The implementation is MediaLibraryService.

Building the example code

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

Registering the service

Register the service in the ViewModelLocator constructor as highlighted below:

using Cimbalino.Phone.Toolkit.Services;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;

/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
{
    /// <summary>
    /// Initializes a new instance of the ViewModelLocator class.
    /// </summary>
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

        if (!SimpleIoc.Default.IsRegistered<INavigationService>())
        {
            SimpleIoc.Default.Register<INavigationService, NavigationService>();
        }

        if (!SimpleIoc.Default.IsRegistered<IMediaLibraryService>())
        {
            SimpleIoc.Default.Register<IMediaLibraryService, MediaLibraryService>();
        }
        if (!SimpleIoc.Default.IsRegistered<ICameraCaptureService>())
        {
            SimpleIoc.Default.Register<ICameraCaptureService, CameraCaptureService>();
        }
        SimpleIoc.Default.Register<MainViewModel>();
        SimpleIoc.Default.Register<AlbunsViewModel>();
        SimpleIoc.Default.Register<PicturesViewModel>();
    }

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

    /// <summary>
    /// Gets the albuns view model.
    /// </summary>
    /// <value>
    /// The albuns view model.
    /// </value>
    public AlbunsViewModel AlbunsViewModel
    {
        get
        {
            return ServiceLocator.Current.GetInstance<AlbunsViewModel>();
        }
    }

    /// <summary>
    /// Gets the pictures view model.
    /// </summary>
    /// <value>
    /// The pictures view model.
    /// </value>
    public PicturesViewModel PicturesViewModel
    {
        get
        {
            return ServiceLocator.Current.GetInstance<PicturesViewModel>();
        }
    }

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

Implementing the ViewModel

Then we should implement the MainViewModel as in the following.

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

    using Cimbalino.Phone.Toolkit.Services;

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

    /// <summary>
    /// This class contains properties that the main View can data bind to.
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// The navigation service
        /// </summary>
        private readonly INavigationService _navigationService;

        /// <summary>
        /// The media library service
        /// </summary>
        private readonly IMediaLibraryService _mediaLibraryService;

        /// <summary>
        /// The camera capture service
        /// </summary>
        private readonly ICameraCaptureService _cameraCaptureService;

        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        /// <param name="navigationService">The navigation service.</param>
        /// <param name="mediaLibraryService">The media library service.</param>
        /// <param name="cameraCaptureService">The camera capture service.</param>
        public MainViewModel(INavigationService navigationService, IMediaLibraryService mediaLibraryService, ICameraCaptureService cameraCaptureService)
        {
            _navigationService = navigationService;
            _mediaLibraryService = mediaLibraryService;
            _cameraCaptureService = cameraCaptureService;
            ShowAlbunsCommand =new RelayCommand(ShowAlbuns);
            ShowPicturesCommand = new RelayCommand(ShowPictures);
            SavePictureCommand = new RelayCommand(SavePicture);
        }

        /// <summary>
        /// Saves the picture.
        /// </summary>
        private void SavePicture()
        {
            _cameraCaptureService.Show(CameraCapetureResult);
        }

        /// <summary>
        /// Shows the pictures.
        /// </summary>
        private void ShowPictures()
        {
            _navigationService.NavigateTo(new Uri("/PicturesPage.xaml", UriKind.Relative));
        }

        /// <summary>
        /// Shows the albuns.
        /// </summary>
        private void ShowAlbuns()
        {
            _navigationService.NavigateTo(new Uri("/AlbunsPage.xaml", UriKind.Relative));
        }

        /// <summary>
        /// Gets the show albuns command.
        /// </summary>
        /// <value>
        /// The show albuns.
        /// </value>
        public ICommand ShowAlbunsCommand { get; private set; }
        /// <summary>
        /// Gets the show pictures command.
        /// </summary>
        /// <value>
        /// The show pictures command.
        /// </value>
        public ICommand ShowPicturesCommand { get; private set; }

        /// <summary>
        /// Gets the sava picture command.
        /// </summary>
        /// <value>
        /// The sava picture command.
        /// </value>
        public ICommand SavePictureCommand { get; private set; }

        /// <summary>
        /// Cameras the capeture result.
        /// </summary>
        /// <param name="photoResult">The photo result.</param>
        private async void CameraCapetureResult(Microsoft.Phone.Tasks.PhotoResult photoResult)
        {
            if (photoResult.ChosenPhoto != null)
            {
                _mediaLibraryService.SavePicture("CimbalinoPicture",photoResult.ChosenPhoto);
            }
        }
    }

And we should implement the PicturesViewModel as in the following.

using Cimbalino.Phone.Toolkit.Services;

    using GalaSoft.MvvmLight;

    using Microsoft.Xna.Framework.Media;

    /// <summary>
    /// This class contains properties that the main View can data bind to.
    /// </summary>
    public class PicturesViewModel:ViewModelBase
    {
        /// <summary>
        /// The media library service
        /// </summary>
        private readonly IMediaLibraryService _mediaLibraryService;

        /// <summary>
        /// Initializes a new instance of the <see cref="PicturesViewModel" /> class.
        /// </summary>
        /// <param name="mediaLibraryService">The media library service.</param>
        public PicturesViewModel(IMediaLibraryService mediaLibraryService)
        {
            _mediaLibraryService = mediaLibraryService;
        }

        /// <summary>
        /// Gets the pictures.
        /// </summary>
        /// <value>
        /// The pictures.
        /// </value>
        public PictureCollection Pictures
        {
            get
            {
                return _mediaLibraryService.Pictures;
            }
        }
    }

And we should implement the AlbunsViewModel as in the following:

using Cimbalino.Phone.Toolkit.Services;

   using Microsoft.Xna.Framework.Media;

   public class AlbunsViewModel
   {
        /// <summary>
       /// The media library service
       /// </summary>
       private readonly IMediaLibraryService _mediaLibraryService;

       /// <summary>
       /// Initializes a new instance of the <see cref="PicturesViewModel" /> class.
       /// </summary>
       /// <param name="mediaLibraryService">The media library service.</param>
       public AlbunsViewModel(IMediaLibraryService mediaLibraryService)
       {
           _mediaLibraryService = mediaLibraryService;
       }

       /// <summary>
       /// Gets a lbuns.
       /// </summary>
       /// <value>
       /// Albuns.
       /// </value>
       public AlbumCollection Albuns
       {
           get
           {
               return _mediaLibraryService.Albums;
           }
       }
   }

Implementing the View

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 PhoneTextTitle2Style}"
                       Text="MediaLibraryService" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <TextBlock TextWrapping="Wrap">This samples has the goal to show how to use Cimbalino Windows Phone Toolkit Media Library - MediaLibraryService</TextBlock>

            <Button Margin="0,209,0,303"
                    Command="{Binding SavePictureCommand}"
                    Content="Save Picture" />
            <Button Margin="2.985,332.896,-2.985,179.104"
                    Command="{Binding ShowPicturesCommand}"
                    Content="Show Pictures" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                <Button.RenderTransform>
                    <CompositeTransform SkewX="1.914" TranslateX="-2.205"/>
                </Button.RenderTransform>
            </Button>

            <Button Margin="0,447,0,65"
                    Command="{Binding ShowAlbunsCommand}"
                    Content="Show Albuns" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

The PicturesPage.xaml is as shown below:

<phone:PhoneApplicationPage x:Class="CimbalinoSample.PicturesPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"
                            xmlns:converters="clr-namespace:CimbalinoSample.Converters"
                            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 PicturesViewModel,
                                                  Source={StaticResource Locator}}"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            SupportedOrientations="Portrait"
                            shell:SystemTray.IsVisible="True"
                            mc:Ignorable="d">
    <phone:PhoneApplicationPage.Resources>
        <converters:MedialibraryConverter x:Key="medialibraryConverter" />
    </phone:PhoneApplicationPage.Resources>
    <!--  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 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 PhoneTextTitle2Style}"
                       Text="Pictures" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <ListBox ItemsSource="{Binding Pictures}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Height="100"
                                   Source="{Binding Converter={StaticResource medialibraryConverter}}"
                                   Stretch="Uniform" />
                            <TextBlock>
                                Name:<Run Text="{Binding Name}" />
                            </TextBlock>
                            <TextBlock>
                                Width:<Run Text="{Binding Width}" />
                            </TextBlock>
                            <TextBlock>
                                Height:<Run Text="{Binding Height}" />
                            </TextBlock>
                            <TextBlock>
                                Date:<Run Text="{Binding Date}" />
                            </TextBlock>
                            <TextBlock>
                                Album:<Run Text="{Binding Album}" />
                                <LineBreak />
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

The MediaLibraryConverter is:

/// <summary>
    /// The media library converter class
    /// </summary>
    public class MedialibraryConverter : IValueConverter
    {
        /// <summary>
        /// Converts the specified value.
        /// </summary>
        /// <param name="value">The value.</param>
        /// <param name="targetType">Type of the target.</param>
        /// <param name="parameter">The parameter.</param>
        /// <param name="culture">The culture.</param>
        /// <returns></returns>
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
           var image = (Microsoft.Xna.Framework.Media.Picture) value;
            return PictureDecoder.DecodeJpeg(image.GetImage());
        }

        /// <summary>
        /// Converts the back.
        /// </summary>
        /// <param name="value">The value.</param>
        /// <param name="targetType">Type of the target.</param>
        /// <param name="parameter">The parameter.</param>
        /// <param name="culture">The culture.</param>
        /// <returns></returns>
        /// <exception cref="System.NotImplementedException"></exception>
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

The AlbunsPage.xaml is as shown below:

<phone:PhoneApplicationPage x:Class="CimbalinoSample.AlbunsPage"
                            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"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            DataContext="{Binding AlbunsViewModel,
                                                  Source={StaticResource Locator}}"
                            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 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 PhoneTextTitle2Style}"
                       Text="Albuns" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0" >
            <ListBox ItemsSource="{Binding Albuns}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock>
                                Name :<Run Text="{Binding Name}" />
                            </TextBlock>
                            <TextBlock>
                                Artist: <Run Text="{Binding Artist}" />
                            </TextBlock>
                            <TextBlock>
                                Duration :<Run Text="{Binding Duration}" />
                            </TextBlock>
                            <TextBlock>
                                Genre :<Run Text="{Binding Genre}" />
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>