Introduction

In this Wiki we will see how to create and display an animated gif in a Universal Windows App (XAML and C#) with Visual Studio 2017 on Windows 10 Creators Update (10.0; Build 15063).











Create and configure the Universal Windows project

Create Universal Windows App

  • Open Visual Studio 2017 and create a new Blank App (Universal Windows): AnimatedGifProject
 

 
  • Click OK

Download the Lumia Imaging SDK UWP

The Lumia Imaging SDK is a rich set of image and video frame processing tools for developers to provide amazing visual experiences in their apps.

It is an open source project.

The source code project can be found in Lumia Imaging SDK Extras Git repository.

To install Lumia Imaging SDK UWP, run the following command in the Package Manager Console (See below).


 
Install-Package LumiaImagingSDK.UWP -Version 3.0.593

Configure the Package.appxmanifest

  • Open the Package.appxmanifest
  •  Access to the Capabilities tab
  • Select the Pictures Library
 
  • Open the Package.appxmanifest in the View Code
 

 
  • Add the following code inside Package tag:
 
<Extensions>
  <Extension Category="windows.activatableClass.inProcessServer">
    <InProcessServer>
      <Path>Lumia.Imaging.dll</Path>
      <ActivatableClass ActivatableClassId="Lumia.Imaging.StorageFileImageSource" ThreadingModel="both" />
    </InProcessServer>
  </Extension>
</Extensions>

 

Select GIF images

Create bottom App bar

·         Open the MainPage.xaml and add the following code inside the Page tag and before the Grid tag:

 
<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Icon="Add" x:Name="BtnAddPictures" Tapped="BtnAddPictures_Tapped"
                      Label="Pictures" />
    </CommandBar>
</Page.BottomAppBar>

Create GridView and button

·         In the MainPage.xaml add the following code inside the Grid tag:

 
<StackPanel Margin="20">
    <GridView x:Name="GVImages"
              >
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"
                       Height="150"
                       Width="150" />
 
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <Button Content="Create Animated Gif"
            x:Name="BtnCreateAnimatedGif"
            Tapped="BtnCreateAnimatedGif_Tapped"
            Visibility="Collapsed"
            HorizontalAlignment="Center" />
 
    <Image x:Name="MyImage" Margin="0 20 0 0"
           Height="250"
           Width="250" />
</StackPanel>

 

Display selected images

  • Open the MainPage.xaml.cs and add the following code before the MainPage contructor:
 
List<StorageFile> NamesLst = new List<StorageFile>();
List<BitmapImage> LstImages = new List<BitmapImage>();

  • In the MainPage.xaml.cs add the following code after the MainPage contructor:

/// <summary>
/// Select images gif and display them to the GridView
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private async void BtnAddPictures_Tapped(object sender, TappedRoutedEventArgs e)
{
    
    //Configure the FileOpenPicker
    FileOpenPicker picker = new FileOpenPicker();
    picker.ViewMode = PickerViewMode.Thumbnail;
    picker.SuggestedStartLocation =
        PickerLocationId.PicturesLibrary;
    picker.FileTypeFilter.Add(".gif");
 
    //Retrieve the selected gif images
    IReadOnlyList<StorageFile> files = await picker.PickMultipleFilesAsync();
 
    if (files.Count > 0)
    {
        NamesLst.Clear();
  LstImages.Clear();

        foreach (StorageFile file in files)
        {
            var stream = await file.OpenReadAsync();
            BitmapImage imageSource = new BitmapImage();
            imageSource.DecodePixelHeight = 175;
            imageSource.DecodePixelWidth = 175;
            await imageSource.SetSourceAsync(stream);
            LstImages.Add(imageSource);
            NamesLst.Add(file);
        }
 
        //Display the images to the GridView
        GVImages.ItemsSource = LstImages;
 
        //Display and Hide the CreateGif button
        if (LstImages.Count!=0)
        {
            BtnCreateAnimatedGif.Visibility = Visibility.Visible;
        }
        else
        {
            BtnCreateAnimatedGif.Visibility = Visibility.Collapsed;
        }
    }
}

Create an animated GIF

  • In the MainPage.xaml.cs add the following code:
/// <summary>
/// Create animated gif from selected images
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private async void BtnCreateAnimatedGif_Tapped(object sender, TappedRoutedEventArgs e)
{
    List<IImageProvider> sources = new List<IImageProvider>();
    
    BitmapImage bitmap =new BitmapImage();
 
    IBuffer buffer;
 
    //Create Animated GIF from selected images
    using (StorageFileImageSource FirstImageSource = new StorageFileImageSource(NamesLst[0]))
    {
 
        for (int i = 1; i < NamesLst.Count; i++)
        {
            StorageFileImageSource OtherImageSource = new StorageFileImageSource(NamesLst[i]);
            sources.Add(OtherImageSource);
        }
 
        using (GifRenderer gifRenderer = new GifRenderer(sources))
        {
            gifRenderer.Size = new Size(250, 250);
            gifRenderer.Duration = 300;
            buffer = await gifRenderer.RenderAsync();
        }
    }
 
  }

Save the animated GIF

·         In the MainPage.xaml.cs, after this using bloc:

 
using (StorageFileImageSource FirstImageSource = new StorageFileImageSource(NamesLst[0]))
{
 
  ……
 
}
Add the following code: 

//Save the created animated gif
string GifName = "myAnimatedGif.gif";
StorageFile storageFile = await KnownFolders.SavedPictures.CreateFileAsync(GifName, CreationCollisionOption.ReplaceExisting);
    using (var stream = await storageFile.OpenAsync(FileAccessMode.ReadWrite))
    {
        await stream.WriteAsync(buffer);
      }



Display an animated GIF

  In the MainPage.xaml.cs, after this using bloc:


using (var stream = await storageFile.OpenAsync(FileAccessMode.ReadWrite))
{
   ...
}


Add the following code: 


// Show the GIF
bitmap = new BitmapImage();
await bitmap.SetSourceAsync(buffer.AsStream().AsRandomAccessStream());
MyImage.Source = bitmap;

Conclusion

In this Wiki, we showed how simple it is to create and display an animated GIF in the Universal Windows Apps using the Lumia Imaging SDK.

Download

You can download all project in this link : Universal Windows App: Create and display animated GIF