Gráficos, animación y multimedia en WPF

1. 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

2. 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

3. Lección 1. Creación y
visualización de gráficos
1. Pinceles y lápices
2. Dibujando formas
3. Transformaciones
4. Efectos

4. 1. Pinceles y lápices

5. 1. Pinceles y lápices
SolidColorBrush.
<Rectangle Fill="Red" Width="150" Height="150" />

6. <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.

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

8. 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.

9. <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.

10. 1. Pinceles y lápices
ImageBrush.
<Grid.Background>
<ImageBrush ImageSource="icono.png"
Stretch="Fill" Viewport="0,0,.5,.5"
TileMode="FlipXY" >
</ImageBrush>
</Grid.Background>

11. 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>

12. 1. Pinceles y lápices
Lápices.
Flat
Square
Round
Triangle
Bevel
Round
Miter
Miter Limit = 3

13. 1. Pinceles y lápices
Lápices.

14. 2. Dibujando formas

15. 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"/>

16. 2. Dibujando formas
Elipse.
<Ellipse Width="100" Height="60"
Stroke="Maroon" Fill="Tomato"/>

17. 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"/>

18. 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>

19. 2. Dibujando formas
Paths.
◦ CombinedGeometry
◦ EllipseGeometry
◦ GeometryGroup
◦ LineGeometry
◦ PathGeometry
◦ RectangleGeometry
◦ StreamGeometry
<Path Fill="LightCoral">
<Path.Data>
<EllipseGeometry RadiusX="40" RadiusY="50"/>
</Path.Data>
</Path>

20. 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>

21. 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>

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

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

24. 3. Transformaciones
ScaleTransform
 Flipping:
• ScaleX="-1"
• ScaleY="-1"
<Image Source="Penguins.jpg" Height="200">
<Image.RenderTransform>
<ScaleTransform ScaleY="3"/>
</Image.RenderTransform>
</Image>

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

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

27. 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>

28. 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>

29. 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#

30. 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)

31. 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…

32. 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>

33. 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>

34. 2. Storyboards
Acciones de StoryBoard:
BeginStoryboard
PauseStoryboard
ResumeStoryboard
SeekStoryboard
SetStoryboardSpeedRatio
SkipStoryboardToFill
StopStoryboard

35. 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>

36. 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>

37. 3. Líneas de tiempo

38. 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

39. 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

40. 4. Animación Double
DoubleAnimation
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
To="200"
Duration="0:0:3"/>
</Storyboard>

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

42. 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>

43. 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>

44. 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" />

45. 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;

46. 8. Animaciones desde C#
2. Iniciando la animación:
button1.BeginAnimation(
Button.HeightProperty,
animacion);

47. Lección 3. Agregando
contenido multimedia en WPF
1. Usando el Sound Player
2. Media Player y Media Element

48. 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.

49. 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();

50. 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>

51. 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.

52. 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.

53. 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();

54. 2. Media Player y Media
Element
2. MediaElement:
 Declarado en XAML:
 Iniciado desde C#:
<MediaElement
Source="video.mp4"
LoadedBehavior="Manual"
Name="mediaElement1"/>
mediaElement1.Play();