Wpf - Incluir un Gif animado en una ventana Wpf

Descripción general:

El artículo describe como incluir (y que funcione) un Gif animado en una ventana Wpf, para ello, crearemos un control personalizado que contenga el Gif y lo haga funcionar

Agregar el Gif al proyecto.

Usaremos la opción “Agregar archivo existente” e incluiremos el Gif en nuestro proyecto

Después hay que modificar las propiedades del archivo Gif como sigue:

[Esta etiqueta es opcional] Aquí se coloca el titulo de la lista (si existe)
  • Acción de compilación : Recurso incrustado
  • Copiar en el directorio de salida: Copiar si es posterior

Creación del control personalizado

Usaremos la opción “Agregar – nuevo elemento – control de usuario” para incluir el nuevo control

Usando el diseñador añadiremos un control “MediaElement”

en la propiedad “source” incluiremos el fichero Gif

añadiremos un controlador (un escuchador) para el evento “MediaEnded”

y el codigo de nuestro control quedará asi:


<UserControl x:Class = "UC_Preloader"
             xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local = "clr-namespace:WpfPruebaGifAnimado"
             mc:Ignorable = "d"
             d:DesignHeight = "100" d:DesignWidth = "100">
    <Grid>
        <MediaElement x:Name = "MediaElementPreloaded"
                      HorizontalAlignment = "Stretch"
                      VerticalAlignment = "Stretch"
                      Source = "preloader.gif"
                      MediaEnded = "MediaElementPreloaded_MediaEnded" />
    </Grid>
</UserControl>

La función escuchadora del evento "MediaEnded" quedará así:


   Private Sub MediaElementPreloaded_MediaEnded(sender As Object, e As RoutedEventArgs)
        CType(sender, MediaElement).Position = TimeSpan.FromMilliseconds(1)
   End Sub

Ahora incluimos el control en nuestra ventana Xml y a funcionar, el gif estará funcionando permanentemente.

Observaciones

Un gif se ejecuta durante un determinado tiempo y después se detiene y se queda con una imagen fija. En este momento, el reproductor, el control “MediaElement”, dispara el evento MediaEnded, que avisa que la reproducción del elemento que esta reproduciendo (nuestro gif) ha finalizado.

Por eso nosotros lo interceptamos, y le decimos que situé el punto de ejecución del medio que se esta reproduciendo, en la posición que corresponde a un mili segundo desde el comienzo, de esta forma cada vez que llegue al final, se vuelve a iniciar otra vez la reproducción de gif, o lo que es lo mismo, se establece una reproducción continua del gif

Y eso es todo.