Universal Windows App: Create and display animated GIF

아티클
1/17/2024

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): Animated GIF Project

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))
{
   ...
}