Manos a la obra!!

Manual de laboratorio Creando Rich Content 2D y 3D con Windows Presentation Foundation

Page i

Information in this document is subject to change without notice. The example companies, organizations, products, people, and events depicted herein are fictitious. No association with any real company, organization, product, person or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarked, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. 2005 Microsoft Corporation. All rights reserved. Microsoft, MS-DOS, MS, Windows, Windows NT, MSDN, Active Directory, BizTalk, SQL Server, SharePoint, Outlook, PowerPoint, FrontPage, Visual Basic, Visual C++, Visual J++, Visual InterDev, Visual SourceSafe, Visual C#, Visual J#, and Visual Studio are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. Other product and company names herein may be the trademarks of their respective owners.

Page ii

Contenidos

LAB 1: RICH CONTENT EN WPF.............................................................................................................................1 Objetivo del laboratorio ..........................................................................................Error! Marcador no definido. Ejercicio 1 Crear Content 2-D esttico................................................................................................................1 Task 1 Crear un circulo..................................................................................................................................2 Task 2 Crear una forma ms compleja usando un Path ...............................................................................8 Exercise 2 Aadir animaciones y Media .............................................................Error! Marcador no definido. Task 1 Aadir animaciones............................................................................Error! Marcador no definido. Task 2 Aadir video .......................................................................................Error! Marcador no definido. Exercise 3 Crear Content 3-D .............................................................................Error! Marcador no definido. Task 1 Crear una escena 3-D........................................................................Error! Marcador no definido. Task 2 Crear un Cubo....................................................................................Error! Marcador no definido. Task 3 Colocar otro Content en la superficie del cubo..................................Error! Marcador no definido. Task 4 Colocar tu Content 2-D en la superficie del cubo ..............................Error! Marcador no definido. Sumario ..................................................................................................................Error! Marcador no definido.

Page iii

Lab 1: Rich Content en WPF

Objetivo del laboratorio

Tiempo estimado para completar el laboratorio: 60 minutos El objetivo de este laboratorio es demostrar la integracin del sistema de renderizado de WPF, a la vez que mostrar el poder de XAML. Crearemos un Content 2-D, lo animaremos, le aadiremos video y finalmente lo colocaremos en una superficie de un cubo en 3-D y todo eso sin escribir ni una sola linea de C++, C#, o Visual Basic.

Crear content 2-D esttico Aadir animaciones y Media. Aadir 3-D

Ejercicio 1 Crear Content 2-D esttico.

En este ejercicio crearemos un par de circulos y algo de texto. Aprenderemos como subrayar y rellenar formas con colores solidos, gradientes, y objetos visuales. Tambin aprenderemos como usar texto como fondo. La primera tarea esc rear un circulo. Para crear un circulo, crearemos una objeto elipse y establerecemos sus propiedades Width y Height con el mismo valor. En este ejemplo, crearemos una elipse de 300 device-independent pixels de ancho, por 300 de alto (cada device-independent pxel, o DIP, es igual a 1/96th de una pulgada). Pintaremos su alrededor (Stroke) e interior (Fill) con la brocha.

Page 1

Tarea 1 Create a Circle

1.

Launch Visual Studio: from the Start menu, select All Programs > Microsoft Visual Studio 2005 Beta 2 > Microsoft Visual Studio 2005 Beta 2. From the main menu, select File > Open > Project/Solution. Navigate to C:\Labs\DEV009 Creating Rich 2D and 3D Content in WPF\Source \Ex1\Task1\. In this lab, each task has its own Visual Studio Project and folder. Open RichContent.sln. View the Window1.xaml file. Notice that this file is composed of a <Window> tag and its closing </Window> tag, as well as <Canvas> and </Canvas> tags inside of the Window. In this lab, all content will be placed between the Window tags, where the Canvas is now. Compile and run the code by pressing CTRL + F5. Note that the Canvas is contained within the Window, but that the Canvas is empty:

2. 3.

4. 5.

6.

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> </Canvas> </Window>

7.

Crear un circulo. Haremos esto creando un objeto elipse y asignando el mismo valor a las propiedades Width y Height. Para hacer visible el objeto Ellipse, debemos asignarle la propiedad Stroke y StrokeThickness. Ejecute la aplicacin. Ellipse es solo uno de las formas 2-D predefinidas que estn disponibles. Al igual que el objeto Ellipse, podriamos usar facilmente los objetos Line, Polygon, Polyline, Rectangle, o Path. Aprenderemos ms sobre el Path en la siguiente tarea.

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> <Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20"> </Ellipse> </Canvas> </Window>

Page 2

Figure 1: Circulo con circunferencia purpura.

Cuando establecemos la propiedad stroke del elipse con el valor purple, estamos usando sintaxis abreviada. Alternativamente podriamos haber escrito lo siguiente:
<Ellipse Width="300" Height="300" StrokeThickness="20"> <Ellipse.Stroke> <SolidColorBrush Color="Purple" /> </Ellipse.Stroke> </Ellipse>

En WPF, una brocha describe cmo pintar un rea en la pantalla. Una solidColorBrush, por ejemplo, pinta un rea con color slido. Otros tipos de brochas incluidas son LinearGradientBrush, RadialGradientBrush, ImageBrush, DrawingBrush, y VisualBrush. Usaremos el tipo LinearGradientBrush en el siguiente paso para pintar el interior del circulo.

Page 3

8.

Usa un LinearGradientBrush para pintar el interior del circulo con un gradiente lineal de Amarillo a rojo. Un LinearGradientBrush pinta un gradiente a lo largo de una linea. El punto de inicio y el punto de final del LinearGradientBrush estn definidos por las propiedades StartPoint y EndPoint. Las propiedades StartPoint y EndPoint definen el gradiente de la linea. Si no se especifica un starpoint o el endpoint, se usan por defecto los puntos (0,0) y (1,1) que crean un gradiente diagonal. Usamos los objetos GradientStop para definir los coores del gradiente. Cada GradientStop define un color y la posicion de ese color a lo largo del gradiente. Crea el primer gradientStop amarillo y define su propiedad OffSet a 0, la cual posiciona el gradientStop en el StartPoint (0,0) del gradiente. Crea el segundo GradientStop de color rojo y su propiedad Offset con valor = 1 la cual posiciona el gradientStop en el StartPoint (1,1). Entre estos 2 puntos el color est linealmente interpolado. Despus de estos cambios, ejecuta la aplicacin.

<Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20"> <Ellipse.Fill> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>

Figure 2: el circulo del paso anterior, ahora con gradiente

Page 4

Debido a que no especificamos un Startpoint o EndPoint, el LinearGradientBrush ha creado un gradiente diagonal.

9.

Daremos a nuestro crculo una circunferencia punteada estableciendo la propiedad StrokeDashArray con los valores 0.5 2.

<Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20" StrokeDashArray="0.5,2">

Figure 3: El circulo, con su circunferencia punteada.

10.

Crearemos puntos redondeados estableciendo la propiedad StrokeDashCap, del objeto ellipse con el valor Round.

<Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20" StrokeDashArray="0.5,2" StrokeDashCap="Round">

Page 5

Figure 4: El circulo con puntos redondeados.

Otros estilos incluidos son Flat (plano), Square (Cuadrado) y Triangle (triangulo)
11.

Reemplazamos el color slido de la circunferencia por un gradiente (de negro a blanco). Primero, borramos la propiedad Stroke del interior de la etiqueta Path. Entonces aadimos el siguiente cdigo XAML dentro de la etiqueta Ellipse.

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> <Ellipse Width="300" Height="300" StrokeThickness="20" StrokeDashArray="0.5,2" StrokeDashCap="Round"> <Ellipse.Fill> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.Stroke> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops>

Page 6

</LinearGradientBrush> </Ellipse.Stroke> </Ellipse> </Canvas > </Window>

Figure 5: El circulo, con gradiente en la circunferencia.

Page 7

Task 2 Crear una figura ms compleja usando Path La clase Path representa una figura ms generalizada que las formas de objetos predefinidos (Line, Rectangle, Ellipse, Polyline, Polygon). Con esta clase podemos crear figuras complejas, como curvas, arcos, y figuras combinadas. En este punto, crearemos un Path equivalente al circulo que creamos anteriormente. Usaremos el circulo como parte de una figura mas compleja.
1.

Cambiamos el Ellipse que creamos por un Path. Le asignamos los mismo valores para las propiedades Stroke y Fill. Asignamos el valor 800 a las propiedades Width y Height. Describimos el contenido del Path usando la propiedad Data. Esta propiedad acepta un Geometry (una descripcin abstracta del area de la pantalla que depende de otro objeto para mostrarla). Para crear un circulo, podemos usar un EllipseGeometry que es un geometry predefinido similar al ellipse que usamos antes.

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> <Path Width="800" Height="800" StrokeThickness="20" StrokeDashArray="0.5,2" StrokeDashCap="Round" > <Path.Data> <EllipseGeometry RadiusX="150" RadiusY="150" Center = "200,200" /> </Path.Data> <Path.Fill> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Fill> <Path.Stroke> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Stroke> </Path> Page 8

</Canvas> </Window>

Figure 6: Un circulo creado usando Path

Hemos creado un Path equivalente al Ellipse que creamos en la primera tarea. Ahora aprovechemos las ventajas de las posibilidades de Path y hagamos una figura ms compleja usando un CombinedGeometry para crear una figura compuesta. La clase CombinedGeometry crea un solo Geometry usando dos Geometries y un modo de combinacin. Podemos controlar como se combinan los geometries que forman el CombinedGeometry estableciendo la propiedad GeometryCombineMode (Union, Intersect, Exclude, o XOR). Un CombinedGeometry es en si un Geometry, y debe ser usado para establecer la propiedad Data de un Path.
2.

Creamos un CombinedGeometry que combina dos objetos EllipseGeometry usando el modo de combinacin Union

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> <Path Width="800" Height="800" StrokeThickness="20" StrokeDashArray="0.5,2" StrokeDashCap="Round" > Page 9

<Path.Data> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" /> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" /> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data>

<Path.Fill> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Fill> <Path.Stroke> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Stroke> </Path> </Canvas> </Window>

Page 10

Figure 7: Un CombinedGeometry

Anteriomente usamos un SolidColorBrush para pintar un area con un color solido y un LinearGradientBrush para pintar un area con un gradiente lineal. Ahora usaremos VisualBrush para pintar un area con un Visual. Hay muchos tipos de objetos Visual: controles, paneles, y shapes son todos tipos de objetos visual. El numero y variedad de objetos visual hacen de VisualBrush una de las ms poderosas y versatiles clases de Windows Presentation Foundation. En el siguiente paso, usaremos VisualBrush para pintar el interior de nuestro Path con un texto.
3.

Creamos un VisualBrush y lo usamos para pintar el interior del Path. Para describir el contenido del VisualBrushs , editamos su propiedad Visual con un TextBlock. Le damos al TextBlock un fondo con gradiente linea (de rojo a Amarillo), como antes. Cambiamos el texto del TextBlock's o los colores del gradiente si quieres.

<Path.Fill> <VisualBrush> <VisualBrush.Visual> <TextBlock Text="Hello World" FontWeight="Bold" Padding="10"> <TextBlock.Background> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops>

Page 11

</LinearGradientBrush> </TextBlock.Background> </TextBlock> </VisualBrush.Visual> </VisualBrush> </Path.Fill>

Figure 8: El path relleno con un VisualBrush

VisualBrush tiene muchas mas capacidades de las que se muestran aqui. Por ejemplo, editando su propiedad Viewport a "0,0,0.1,0.1" y editando su TileMode a Tile, puedes crear un patron del texto que contiene.

Page 12

Ejercicio 1 Codigo Final

<Window x:Class="RichContent.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RichContent" > <Canvas> <Path Width="800" Height="800" StrokeThickness="20" StrokeDashArray="0.5,2" StrokeDashCap="Round" > <Path.Data> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <EllipseGeometry Center="200,200" RadiusX="150" RadiusY="150" /> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" /> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data>

<Path.Fill> <VisualBrush> <VisualBrush.Visual> <TextBlock Text="Hello World" FontWeight="Bold" Padding="10"> <TextBlock.Background> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Yellow" /> <GradientStop Offset="1" Color="Red" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </TextBlock.Background> </TextBlock> </VisualBrush.Visual> </VisualBrush> </Path.Fill>

<Path.Stroke> <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Stroke> </Path>

Page 13

</Canvas> </Window>

Page 14