Jugando con Imágenes en WPF – Parte 3 – SlideShow y efecto de Transición


Para seguir jugando con las imágenes en WPF, vamos a continuar con nuestro proyecto, pero vamos a crear un pequeño “slideshow” o un visor de imágenes, y cada vez que cambiemos de imágenes, vamos a ver un efecto de desvanecencia.

Voy a traer imágenes que ya se encuentran publicadas en internet, pero si lo desean pueden crear una lista donde van a agregar imágenes de sus computadores.

Navegando por internet para encontrar galerías, encontré dos sitios donde concuerdan con nuestro ejemplo, y es que tienen publicadas fotos, y cada foto esta nombrada secuencialmente, o sea, foto1, foto2, foto3, etc., Así se nos va a ser la vida fácil al recorrerlas.

Bien, en nuestro proyecto anterior, creamos dos Storyboards, uno para volver transparente la imagen y otro para volverlo opaca:

<Window.Resources>

            <Storyboard x:Name="AnimacionTransparente" x:Key="AnimacionTransparente">

                  <DoubleAnimation Duration="00:00:01.50" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="image1" />

            </Storyboard>

            <Storyboard x:Name="AnimacionOpaca" x:Key="AnimacionOpaca">

                  <DoubleAnimation Duration="00:00:01.50" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="image1" />

            </Storyboard>

</Window.Resources>

Como lo dije el primer StoryBoard, lo que hace es modificar la propiedad Opacity de la imagen, en nuestro caso se llama image1, y la modifica de 1 a 0 en 1.50 segundos, el segundo hace lo contrario, modifica la propiedad de 0 a 1 en el mismo tiempo.

Brevemente, lo que tengo en mente es que se llama la animación que vuelve transparente una imagen, luego cuando esté totalmente transparente cambiar de imagen  y llamar la animación que la vuelve opaca, así se verá la animación de desvanecencia.

A las animaciones les podemos crear eventos, para que cuando se dispare un evento, hagamos algo, a la animación AnimacionTransparente, le adicionamos lo siguiente:

<Storyboard x:Name="AnimacionTransparente" x:Key="AnimacionTransparente" Completed="AnimacionTransparente_Completed">

Esto es para que cuando la animación acabe, llame el evento AnimacionTransparente_Completed.

Adicionamos un botón al formulario, para pasar las imágenes, desde ahora comienza todo :D, el botón dira siguiente y tendrá el siguiente código c#:

private void button3_Click(object sender, RoutedEventArgs e)

        {

            String URL = String.Format(@"http://colombianadas.net/albums/colombianadas/normal_colombianadas_0{0}{1}.jpg", numero1, numero2);

            BitmapImage imagen = new BitmapImage(new Uri(URL));

            image1.Source = imagen;

 

             Storyboard AnimacionTransparente = (Storyboard)FindResource("AnimacionTransparente");

            AnimacionTransparente.Begin();

            numero2++;

            if (numero2 == 10)

            {

                numero2 = 0;

                numero1++;

            }

        }

  • Lo primero que hacemos es crear un objeto de tipo String, donde vamos a guardar la dirección de la imagen, luego convertimos la cadena con el método Format, que asigna los valores de las variables entre los corchetes {} de la cadena.
  • Otra cosa es que antes de ejecutar el código debemos declarar como variables globales los objetos numero1 y numero2, estos objetos son de tipo entero, y van a guardar la secuencia de las imágenes:
  • Int32 numero1 = 0;
    Int32 numero2 = 0;
    
  • A la image1 le asignamos a su propiedad Source un objeto de timo BitmapImage que tendrá la imagen de la dirección web.
  • Para ejecutar la animación desde el código debemos antes declarar un tipo Storyboard y luego buscar en el XAML la animación, luego ejecutamos el método Begin.
  • Las imágenes viene de la página de Colombianadas.net, allí las imágenes están nombradas secuencialmente: normal_colombianadas_000, normal_colombianadas_001, normal_colombianadas_005, normal_colombianadas_010, normal_colombianadas_065, etc, es por esto que cada vez que nuestra variable numero2 que representa el último digito llegue a 10, se aumenta la otra variable y volemos a empezar el conteo, mmm es algo confuso pero ya lo entenderán.

Bien, ahora vamos a nuestro evento declarado: AnimacionTransparente_Completed y escribimos lo siguiente:

private void AnimacionTransparente_Completed(object sender, EventArgs e)

{

            String URL = String.Format(@"http://colombianadas.net/albums/colombianadas/normal_colombianadas_0{0}{1}.jpg", numero1, numero2);

            BitmapImage imagen = new BitmapImage(new Uri(URL));

            image1.Source = imagen;

            Storyboard AnimacionOpaca = (Storyboard)FindResource("AnimacionOpaca");

            AnimacionOpaca.Begin();

}

Lo que hacemos es parecido a lo de arriba, convertir la url en una imagen, luego asignarla a nuestra imagen, declarar un tipo Storyboard y asignarlo a nuestra segunda animación, luego iniciar la animación.

Si ejecutamos todo, veremos como al cambiar de imagen se desvanece y vuelve opaca la imagen, si queremos podemos disminuir el tiempo de las animaciones:

 slideshow1slideshow2

 

Para el botón de atrás el siguiente código:

private void button6_Click(object sender, RoutedEventArgs e)

        {

            URL = String.Format(@"http://colombianadas.net/albums/colombianadas/normal_colombianadas_0{0}{1}.jpg", numero1, numero2);

            BitmapImage imagen = new BitmapImage(new Uri(URL));

            image1.Source = imagen;

 

            Storyboard AnimacionTransparente = (Storyboard)FindResource("AnimacionTransparente");

            AnimacionTransparente.Begin();

            numero2--;

            if (numero2 == 0)

            {

                numero2 = 9;

                numero1--;

            }

        }

Y como regalito, podemos adicionar un botón de descargar y en el código escribimos:

 

using(WebClient cliente =new WebClient())

            {

                try

                {

                    cliente.DownloadFile(URL, @"C:\Temporal\" + numero1 + numero2 + ".jpg");

                }

                catch (Exception)

                {

                   

                }

            }

Estoy haciendo algo indebido al dejar el catch sin nada de código, aunque ustedes pueden dejar un mensaje o que se yo.

El webclient puede descargar archivos y guardarlos en un directorio de nuestra maquina, en este ejemplo puse el directorio C:\Temporal, luego el nombre del archivo va a quedar: 10.jpg, 02.jpg, etc.

Como último regalo les dejo en código de la aplicación, pero con un botón adicional para pasar unas fotos obtenidas de la página de SOHO, jejeje, ya muchos querrán bajar la aplicación :D.

Como mejora, pueden quitar el botón y dejar un Timer, para que en cierto tiempo se cambie la foto 😛

 slideshow3

Espero Comentarios!!!

Código Aquí.

Anuncios

14 pensamientos en “Jugando con Imágenes en WPF – Parte 3 – SlideShow y efecto de Transición

  1. Pingback: La página de Google cambia, ahora lo ves, ahora no lo ves! « Escarbando Código

  2. Pingback: SlideShowExtender – Visor de Imágenes vía Ajax « Escarbando Código

    • Hola, guardar una imagen en xaml no sé como hacerlo, he visto como guardar el xaml en imagen, pero al contrario no, de pronto te refieres a guardar una imagen en wpf en el disco, o guardar las imagenes que se muestran en el post en el disco, si es así, puedes usar la clase jpegbitmapencoder, ejemplo:

      using (FileStream fileStream = new FileStream(Directory + "\\" + FileName + ".jpg", FileMode.Create))
      {
      JpegBitmapEncoder encoder = new JpegBitmapEncoder();
      encoder.Frames.Add(BitmapFrame.Create((BitmapImage)imagen));
      encoder.QualityLevel = 100;
      encoder.Save(fileStream);
      }

    • hola, mira como cambiar la imagen de fondo de un button, se supone que las dos imágenes se llaman: imagen1 e imagen2: <Window.Resources>
      <Style x:Key=”MouseOverButtonStyle” TargetType=”Button”>
      <Setter Property=”Template”>
      <Setter.Value>
      <ControlTemplate TargetType=”Button”>
      <ControlTemplate.Resources>
      <Style x:Key=”ShadowStyle”>
      <Setter Property=”Control.Foreground” Value=”LightGray” />
      </Style>
      </ControlTemplate.Resources>
      <Border Name=”border” BorderThickness=”1″ Padding=”4,2″ BorderBrush=”DarkGray” CornerRadius=”3″ Background=”{TemplateBinding Background}”>
      <Grid >
      <ContentPresenter HorizontalAlignment=”Center” VerticalAlignment=”Center” Name=”contentShadow” Style=”{StaticResource ShadowStyle}”>
      <ContentPresenter.RenderTransform>
      <TranslateTransform X=”1.0″ Y=”1.0″ />
      </ContentPresenter.RenderTransform>
      </ContentPresenter>
      <ContentPresenter HorizontalAlignment=”Center” VerticalAlignment=”Center” Name=”content”/>
      </Grid>
      </Border>
      <ControlTemplate.Triggers>
      <Trigger Property=”IsMouseOver” Value=”True”>
      <Setter Property=”Background” TargetName=”border”>
      <Setter.Value>
      <ImageBrush ImageSource=”Imagen2.png” />
      </Setter.Value>
      </Setter>

      </Trigger>
      </ControlTemplate.Triggers>
      </ControlTemplate>
      </Setter.Value>
      </Setter>
      </Style>
      </Window.Resources>
      <Grid>
      <Button Style=”{StaticResource MouseOverButtonStyle}” Height=”117″ HorizontalAlignment=”Left” Margin=”78,92,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”263″ >
      <Button.Background>
      <ImageBrush ImageSource=”Imagen1.png” />
      </Button.Background>
      </Button>
      </Grid>

  3. hola yo estoy haciendo un visor de imágenes cargadas desde una carpeta del proyecto o también desde una BD pero tengo un problema al cargar las imágenes de cualquiera de las dos formas no puedo pasarlas.
    Podrías ayudarme?

  4. si claro!
    Lo hago desde un botón el cual esta programado así:

    private void GuardImagBD_Click(object sender, RoutedEventArgs e)
    {
    byte[] imgData = File.ReadAllBytes(txtRuta.Text);
    using (IDbConnection _conn = comunBD.obtenerConeccion())
    {
    string Sql = “Insert Into GuardarImagenes(imagen)Values(@imagen)”;
    _conn.Open();

    SqlCommand cmd = new SqlCommand(Sql, _conn as SqlConnection);
    cmd.Parameters.AddWithValue(“@imagen”, imgData);
    cmd.ExecuteNonQuery();
    _conn.Close();
    }
    MessageBox.Show(“Se Guardo la imagen en la BD”);
    }

    • Me imagino que el cargar la imagen, debes obtener el array de bytes de la base de datos y luego conviertes eso en la imagen? sino, con este método puedes obtener la imagen a través de los bytes:
      public Image byteArrayToImage(byte[] byteArrayIn)
      {
      MemoryStream ms = new MemoryStream(byteArrayIn);
      Image returnImage = Image.FromStream(ms);
      return returnImage;
      }
      Intenta agregando el Image que devuelve el método anterior al source del image1 y me cuentas.

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s