lunes, 17 de enero de 2011

Transición de imagenes con silverlight 4.0

EL año pasado para ser más exactos a fines del mes de diciembre me encargaron hacer una postal con fondo de nieve y animación de imágenes en silverlight 4.0 y como aún no conocia las bondades del objeto DoubleAnimation pense en usar un objeto Timer... pero después me dí cuenta que no era una excelente idea, aquí les paso el siguiente ejemplo: http://cid-f11a91861874c761.office.live.com/self.aspx/.Public/SilverlightApplication2.rar

XAML

<UserControl x:Class="SilverlightApplication2.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="700" Height="540" Background="{x:Null}" xmlns:FallingSnow="clr-namespace:SilverlightApplication2" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

    <Canvas x:Name="LayoutRoot">
        <StackPanel Orientation="Vertical">
            <StackPanel.Resources>
                <Storyboard x:Name="FadeIn" BeginTime="0" Completed="FadeIn_Completed">
                    <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:0" />
                    <DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:2" />
                    <DoubleAnimation Storyboard.TargetName="image3" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:4" />
                    <DoubleAnimation Storyboard.TargetName="image4" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:6" />

                    <DoubleAnimation Storyboard.TargetName="image5" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:8" />
                    <DoubleAnimation Storyboard.TargetName="image6" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:10" />

                    <DoubleAnimation Storyboard.TargetName="image7" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:8" />
                    <DoubleAnimation Storyboard.TargetName="image8" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:10" />

                    <DoubleAnimation Storyboard.TargetName="image9" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:12" />
                   
                    <DoubleAnimation Storyboard.TargetName="image10" Completed="FadeIn_Completed" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:14" />
                    <DoubleAnimation Storyboard.TargetName="image11" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:16" />
                    <DoubleAnimation Storyboard.TargetName="image10_1" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:18" />
                    <DoubleAnimation Storyboard.TargetName="image11_1" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:20" />
                    <DoubleAnimation Storyboard.TargetName="image10_2" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:22" />
                    <DoubleAnimation Storyboard.TargetName="image11_2" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:24" />

                    <DoubleAnimation Storyboard.TargetName="image12" Storyboard.TargetProperty="Opacity" From="0.0" To="2.0" Duration="0:0:1.5" BeginTime="0:0:26" />

                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>
        <Image x:Name="image1"  Source="/SilverlightApplication2;component/imagenes/postal1.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image2" Source="/SilverlightApplication2;component/imagenes/postal2.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />      
        <Image x:Name="image3" Source="/SilverlightApplication2;component/imagenes/postal3.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image4" Source="/SilverlightApplication2;component/imagenes/postal4.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image5" Source="/SilverlightApplication2;component/imagenes/postal5.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image6" Source="/SilverlightApplication2;component/imagenes/postal6.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image7" Source="/SilverlightApplication2;component/imagenes/postal7.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image8" Source="/SilverlightApplication2;component/imagenes/postal8.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image9" Source="/SilverlightApplication2;component/imagenes/postal9.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image10" Source="/SilverlightApplication2;component/imagenes/postal10.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image11" Source="/SilverlightApplication2;component/imagenes/postal11.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image10_1" Source="/SilverlightApplication2;component/imagenes/postal10.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image11_1" Source="/SilverlightApplication2;component/imagenes/postal11.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image10_2" Source="/SilverlightApplication2;component/imagenes/postal10.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image11_2" Source="/SilverlightApplication2;component/imagenes/postal11.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />
        <Image x:Name="image12" Source="/SilverlightApplication2;component/imagenes/postal12.jpg"  Opacity="0" Canvas.Left="0" Canvas.Top="0" />



      


        <HyperlinkButton  Canvas.Left="80" Canvas.Top="372" Height="58" Name="hyperlinkButton1" TargetName="_blank"  NavigateUri="http://www.comunidadesmicrosoft.org" Width="177" />
        <HyperlinkButton  Canvas.Left="394" Canvas.Top="372" Height="58" Name="hyperlinkButton2" TargetName="_blank" NavigateUri="http://msdn.microsoft.com" Width="232" />
        <HyperlinkButton  Canvas.Left="44" Canvas.Top="451" Height="58" Name="hyperlinkButton3" TargetName="_blank" NavigateUri="http://technet.microsoft.com" Width="232" />
        <HyperlinkButton  Canvas.Left="295" Canvas.Top="451" Height="58" Name="hyperlinkButton4" TargetName="_blank" NavigateUri="http://www.ustream.tv/channel/microsoft-cafe" Width="190" />
        <HyperlinkButton  Canvas.Left="498" Canvas.Top="451" Height="58" Name="hyperlinkButton5"  NavigateUri="http://www.microsoft.com/peru" Width="190" />

    </Canvas>
  
</UserControl>
CODE



using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using SilverlightApplication2.Efectos;
using System.Windows.Media.Imaging;

namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            PopulateSnowFlakes();
        }

        System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();
        static private Random randomNumber = new Random();
        private void PopulateSnowFlakes()
        {
           /* for (int i = 0; i < 200; i++)
            {
                SnowFlake snowFlake = new SnowFlake();

                // 500 and 300 is the width/height of the application
                snowFlake.SetInitialProperties(500, 300);
                LayoutRoot.Children.Add(snowFlake);

                SnowFlakeX snowFlakeX = new SnowFlakeX();

                // 500 and 300 is the width/height of the application
                snowFlakeX.SetInitialProperties(500, 300);
                LayoutRoot.Children.Add(snowFlakeX);
            }*/

            hyperlinkButton1.Visibility = Visibility.Collapsed;
            hyperlinkButton2.Visibility = Visibility.Collapsed;
            hyperlinkButton3.Visibility = Visibility.Collapsed;
            hyperlinkButton4.Visibility = Visibility.Collapsed;
            hyperlinkButton5.Visibility = Visibility.Collapsed;
            FadeIn.Begin();
            /*myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 2000); // 100 Milliseconds
            myDispatcherTimer.Tick += new EventHandler(Each_Tick);
            myDispatcherTimer.Start();*/
          
        }
        static int i = 2;
        int intentos = 0;
        public void Each_Tick(object o, EventArgs sender)
        {
           /* string ruta_logo = String.Format("Imagenes/postal{0}.jpg", i.ToString());
            Foto.Source = new BitmapImage(new Uri(ruta_logo, UriKind.RelativeOrAbsolute));


            if (i == 11 && intentos <= 3)
            {
                ruta_logo = String.Format("Imagenes/postal{0}.jpg", i.ToString());
                Foto.Source = new BitmapImage(new Uri(ruta_logo, UriKind.RelativeOrAbsolute));
                for (int c = 0; c < 200; c++)
                {
                    SnowFlake snowFlake = new SnowFlake();

                    // 500 and 300 is the width/height of the application
                    snowFlake.SetInitialProperties(700, 540);
                    LayoutRoot.Children.Add(snowFlake);
                }
                myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000);
                i -= 2;
                intentos++;

            }
            if (i == 12)
            {
                hyperlinkButton1.Visibility = Visibility.Visible;
                hyperlinkButton2.Visibility = Visibility.Visible;
                hyperlinkButton3.Visibility = Visibility.Visible;
                hyperlinkButton4.Visibility = Visibility.Visible;
                hyperlinkButton5.Visibility = Visibility.Visible;
                i = 1;
                myDispatcherTimer.Stop();
            }
            i++;*/
        }

        private void FadeIn_Completed(object sender, EventArgs e)
        {
            hyperlinkButton1.Visibility = Visibility.Visible;
            hyperlinkButton2.Visibility = Visibility.Visible;
            hyperlinkButton3.Visibility = Visibility.Visible;
            hyperlinkButton4.Visibility = Visibility.Visible;
            hyperlinkButton5.Visibility = Visibility.Visible;
            for (int c = 0; c < 200; c++)
            {
                SnowFlake snowFlake = new SnowFlake();

                // 500 and 300 is the width/height of the application
                snowFlake.SetInitialProperties(700, 540);
                LayoutRoot.Children.Add(snowFlake);
            }
        }
      
    }
}

No hay comentarios:

Publicar un comentario