Gráficos, Animación y Multimedia D A N A E A G U I L A R G U Z M Á N

M C T , M C P , M C T S

D A N A E A G U I L A R @ G M A I L . C O M

Contenido del Módulo Lección 1. Creación y visualización de gráficos

Lección 2. Animación

Lección 3. Agregando contenido multimedia en WPF

Lección 1. Creación y visualización de gráficos

1. Pinceles y lápices

2. Dibujando formas

3. Transformaciones

4. Efectos

1. Pinceles y lápices

1. Pinceles y lápices

SolidColorBrush.

<Rectangle Fill="Red" Width="150" Height="150" />

<Rectangle Width="150" Height="150"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,1" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

1. Pinceles y lápices LinearGradientBrush.

1. Pinceles y lápices Dirección del gradiente en LinearGradientBrush.

1. Pinceles y lápices Propiedad Spread de LinearGradientBrush.

Valor de Spread

Descripción

Pad Es el valor por defecto, usa el color sólido de los extremos del gradiente.

Reflect Hace que el gradiente se extienda de manera inversa (como el reflejo en un espejo)

Repeat Hace que el gradiente se repita en la misma dirección.

<Rectangle Width="150" Height="150"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

1. Pinceles y lápices RadialGradientBrush.

1. Pinceles y lápices ImageBrush.

<Grid.Background> <ImageBrush ImageSource="icono.png" Stretch="Fill" Viewport="0,0,.5,.5" TileMode="FlipXY" > </ImageBrush> </Grid.Background>

1. Pinceles y lápices VisualBrush.

<Rectangle Width="350" Height="250"> <Rectangle.Fill> <VisualBrush Viewport="0,0.5,0.5,0.15" TileMode="Tile" Stretch="Uniform"> <VisualBrush.Visual> <StackPanel Background="Yellow" Orientation="Horizontal"> <Button>Aceptar</Button> <Button>Cancelar</Button> </StackPanel> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle>

1. Pinceles y lápices Lápices.

Flat

Square

Round

Triangle

Bevel

Round

Miter

Miter Limit = 3

1. Pinceles y lápices Lápices.

2. Dibujando formas

2. Dibujando formas Rectángulo.

<Rectangle Width="100" Height="60" Stroke="Green" Fill="LightGreen"/>

<Rectangle Width="100" Height="60" Stroke="Green" Fill="LightGreen" RadiusX="10" RadiusY="10"/>

2. Dibujando formas Elipse.

<Ellipse Width="100" Height="60" Stroke="Maroon" Fill="Tomato"/>

2. Dibujando formas Línea.

Poli Línea

<Line X1="20" Y1="20" X2="100" Y2="80" Stroke="Blue"/>

<Polyline Stroke="Red" Points="100, 100 200, 200 200, 100 300, 200 300, 100"/>

2. Dibujando formas Polígonos.

<Viewbox Width="150" Height="150"> <Polygon Points="10,40 32,40 40,10 48,40 70,40 53,53 60,80 40,65 20,80 27,53" Fill="Gold" Stroke="DarkGoldenrod"/> </Viewbox>

2. Dibujando formas Paths.

◦ CombinedGeometry ◦ EllipseGeometry ◦ GeometryGroup ◦ LineGeometry ◦ PathGeometry ◦ RectangleGeometry ◦ StreamGeometry

<Path Fill="LightCoral"> <Path.Data> <EllipseGeometry RadiusX="40" RadiusY="50"/> </Path.Data> </Path>

2. Dibujando formas GeometryGroup

<Path Fill="LightSkyBlue" Margin="70,70"> <Path.Data> <GeometryGroup FillRule="Nonzero"> <EllipseGeometry RadiusX="50" RadiusY="50"/> <RectangleGeometry Rect="0,0,50,100"/> </GeometryGroup> </Path.Data> </Path>

2. Dibujando formas CombinedGeometry

<Path Fill="Lime" Margin="70,70"> <Path.Data> <CombinedGeometry GeometryCombineMode="Exclude"> <CombinedGeometry.Geometry1> <EllipseGeometry RadiusX="40" RadiusY="50"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <RectangleGeometry Rect="0,0,20,100"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path>

3. Transformaciones TranslateTransform

<Grid> <Image Source="Penguins.jpg" Height="200"> <Image.RenderTransform> <TranslateTransform X="50" Y="100"/> </Image.RenderTransform> </Image> </Grid>

3. Transformaciones RotateTransform

<Image Source="Penguins.jpg" Height="200"> <Image.RenderTransform> <RotateTransform Angle="45"/> </Image.RenderTransform> </Image>

3. Transformaciones ScaleTransform

Flipping: • ScaleX="-1"

• ScaleY="-1"

<Image Source="Penguins.jpg" Height="200"> <Image.RenderTransform> <ScaleTransform ScaleY="3"/> </Image.RenderTransform> </Image>

3. Transformaciones SkewTransform

<Grid VerticalAlignment="Top"> <Image Source="Penguins.jpg" Height="100"> <Image.RenderTransform> <SkewTransform AngleY="45"/> </Image.RenderTransform> </Image> </Grid>

3. Transformaciones TransformGroup

<Image Source="Penguins.jpg" Height="100"> <Image.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <SkewTransform AngleY="45"/> </TransformGroup> </Image.RenderTransform> </Image>

3. Transformaciones Clipping

<Button Height="100" Width="100" Name="Button1"> <Button.Clip> <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="30"/> </Button.Clip> <Button.Content> Boton </Button.Content> </Button>

4. Efectos BlurEffect y DropShadowEffect.

<Border> <Border.Effect> <BlurEffect /> </Border.Effect> <Button Width="100" Height="50" Content="Aceptar"> <Button.Effect> <DropShadowEffect Color="Green" BlurRadius="10" /> </Button.Effect> </Button> </Border>

Lección 2. Animación 1. Fundamentos de Animación

2. Storyboards

3. Líneas de tiempo

4. Animación Double

5. Animación de Color

6. Animación de Puntos

7. Animaciones con KeyFrames

8. Animaciones desde C#

1. Fundamentos de Animación 1. Es modificar el valor de una propiedad de dependencia en un

intervalo de tiempo.

2. Usar una clase de animación correspondiente al tipo de la propiedad: DoubleAnimation

PointAnimation

StringAnimationUsingKeyFrames

Etc… (en System.Windows.Animation namespace)

1. Fundamentos de Animación 3. Hay 3 tipos de animación:

1. Transición interpolada: DoubleAnimation

ColorAnimation

PointAnimation

Etc…

2. Transición abrupta (Key Frames): ◦ DoubleAnimationUsingKeyFrames

◦ ColorAnimationUsingKeyFrames

◦ StringAnimationUsingKeyFramesEtc…

3. Basadas en Paths (Path Based Animations) ◦ DoubleAnimationUsingPath

◦ PointAnimationUsingPath

◦ Etc…

2. Storyboards Creando un StoryBoard:

* Usando Attached Properties:

<Storyboard TargetName="Button1" TargetProperty="Height"> <DoubleAnimation Duration="0:0:10" From="1" To="200" /> </Storyboard>

<Storyboard> <DoubleAnimation Duration="0:0:10" From="1" To="200" Storyboard.TargetName="Button1" Storyboard.TargetProperty="Height" /> </Storyboard>

2. Storyboards Iniciando la animación con EventTrigger:

EventTrigger: ◦ En un Style

◦ O en la colección Triggers de cualquier elemento.

<EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> ... </EventTrigger.Actions> </EventTrigger>

2. Storyboards Acciones de StoryBoard:

BeginStoryboard

PauseStoryboard

ResumeStoryboard

SeekStoryboard

SetStoryboardSpeedRatio

SkipStoryboardToFill

StopStoryboard

2. Storyboards <Button Width="80" Height="30" Content="Hacer Click!"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="200" Duration="0:0:3" Storyboard.TargetProperty="Width"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button>

2. Storyboards Iniciando la animación con otro tipo de Triggers: (Trigger, MultiTrigger, DataTrigger, y MultiDataTrigger)

Tienen las colecciones EnterActions y ExitActions

<Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard Name="stb1"> <Storyboard> <DoubleAnimation To="20" Duration="0:0:.5" Storyboard.TargetProperty="FontSize" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <StopStoryboard BeginStoryboardName="stb1" /> </Trigger.ExitActions> </Trigger>

3. Líneas de tiempo

3. Líneas de tiempo

Propiedad Descripción

BeginTime Agrega un tiempo de retardo antes de que la animación comience. Útil para sincronizar el inicio de varias animaciones.

Duration La duración de la animación de inicio a fin.

SpeedRatio Aumenta (mayor a 1) o reduce (menor a 1) la velocidad de la animación. Normalmente es 1. Ej: 0.5 tomará el doble de tiempo.

AccelerationRatio y DecelerationRatio

Hace que la velocidad de la animación no sea lineal. El total de ambos valores no puede ser mayor a 1.

Propiedades de la líneas de tiempo

3. Líneas de tiempo

Propiedad Descripción

AutoReverse Con el valor True hará que la animación corra en reversa una vez que termine y así regrese a su valor inicial.

FillBehavior Que sucede cuando termina la animación. Mantiene su valor final (HoldEnd), o usa el valor inicial (Stop)

RepeatBehavior Repetir la animación un nuero de veces por un intervalo de tiempo o repetir para siempre (Forever)

Propiedades de la líneas de tiempo

4. Animación Double DoubleAnimation

<Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:3"/> </Storyboard>

5. Animación de Color ColorAnimation

<Storyboard> <ColorAnimation Storyboard.TargetName="miBrush" Storyboard.TargetProperty="Color" From="Red" To="Yellow" Duration="0:0:5" /> </Storyboard>

6. Animación de Puntos PointAnimation

<Storyboard> <PointAnimation Storyboard.TargetName="miElipse" Storyboard.TargetProperty="Fill.GradientOrigin" From="0.7,0.3" To="0.3,0.7" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever"/> </Storyboard>

7. Animaciones con KeyFrames 1. KeyFrames Lineales:

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height"> <LinearDoubleKeyFrame Value="10" KeyTime="0:0:1" /> <LinearDoubleKeyFrame Value="100" KeyTime="0:0:2" /> <LinearDoubleKeyFrame Value="30" KeyTime="0:0:4"/> </DoubleAnimationUsingKeyFrames>

7. Animaciones con KeyFrames 2. KeyFrames Discretos:

3. KeyFrames Spline:

<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content"> <DiscreteStringKeyFrame Value="Hola" KeyTime="0:0:0" /> <DiscreteStringKeyFrame Value="Cola" KeyTime="0:0:1" /> <DiscreteStringKeyFrame Value="Cala" KeyTime="0:0:2" /> <DiscreteStringKeyFrame Value="Casa" KeyTime="0:0:3" /> <DiscreteStringKeyFrame Value="Casi" KeyTime="0:0:4" /> </StringAnimationUsingKeyFrames>

<SplineDoubleKeyFrame Value="300" KeyTime="0:0:6" KeySpline="0.1,0.8 0.6,0.6" />

8. Animaciones desde C# 1. Creando una animación:

var animacion = new System.Windows.Media.Animation.DoubleAnimation(); animacion.From = 20; animacion.To = 300; animacion.Duration = new Duration(new TimeSpan(0, 0, 5)); animacion.FillBehavior = FillBehavior.Stop;

8. Animaciones desde C# 2. Iniciando la animación:

button1.BeginAnimation( Button.HeightProperty, animacion);

Lección 3. Agregando contenido multimedia en WPF

1. Usando el Sound Player

2. Media Player y Media Element

1. Usando el Sound Player 1. Liviano y fácil de usar.

2. Solo reproduce .wav files descomprimidos.

3. No hay control de volumen, balance, velocidad.

4. No se puede pausar.

1. Usando el Sound Player 1. En C#:

var miPlayer = new System.Media.SoundPlayer(); miPlayer.SoundLocation = "C:\\audio.wav"; miPlayer.Load(); // miPlayer.LoadAsync(); miPlayer.Play(); // miPlayer.PlaySync();

1. Usando el Sound Player 2. En XAML:

<Button Height="30" Width="80" Content="Hacer Click!"> <Button.Style> <Style> <Style.Triggers> <EventTrigger RoutedEvent="Button.MouseEnter"> <SoundPlayerAction Source="C:\audio.wav"/> </EventTrigger> </Style.Triggers> </Style> </Button.Style> </Button>

2. MediaPlayer y MediaElement MediaPlayer y MediaElement:

1. Mayor soporte para reproducción de audio y video

2. Soportan varios formatos.

3. Usan del Windows Media Player 10 o +

4. Permiten Pausar, controlar volumen, velocidad, etc.

2. MediaPlayer y MediaElement Diferencias:

1. MediaPlayer carga audio y video pero no tiene una representación visual (no muestra el video por si mismo)

2. MediaElement envuelve al MediaPlayer dándole una representación visual

3. MediaPlayer no es fácilmente usado en XAML, pero MediaElement si.

2. Media Player y Media Element 1. MediaPlayer, en C#:

var miPlayer = new System.Windows.Media.MediaPlayer(); miPlayer.Open(new Uri("mp3Audio.mp3")); miPlayer.Play();

2. Media Player y Media Element

2. MediaElement:

Declarado en XAML:

Iniciado desde C#:

<MediaElement Source="video.mp4" LoadedBehavior="Manual" Name="mediaElement1"/>

mediaElement1.Play();