DOC

HOL-PRSHOL08

By Nathan Reed,2014-09-09 07:22
9 views 0
Page i Hands-On Lab Lab Manual Creating Rich 2D and 3D Content with Windows Presentation Foundation Please do not remove this manual from the lab Page ii Information in this document is subject to change without notice. The example companies, organizations, products, people, and events depicted herein are fictitious. No a..

Hands-On Lab

    Lab Manual

    Creating Rich 2D and 3D Content with Windows Presentation Foundation

    Please do not remove this manual from the lab

    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

Contents

    LAB 1: RICH CONTENT IN WPF ........................................................................................................................ 1 Lab Objective .................................................................................................................................................. 1 Exercise 1 Create Static 2D Content ............................................................................................................. 1 Task 1 Create a Circle .............................................................................................................................. 2 Task 2 Create a More Complex Shape Using a Path ................................................................................ 7 Exercise 2 Add Animations and Media ........................................................................................................ 13 Task 1 Add Animations ........................................................................................................................... 14 Task 2 Add Video ................................................................................................................................... 17 Exercise 3 Create 3-D Content ................................................................................................................... 20 Task 1 Create a 3D Scene ...................................................................................................................... 20 Task 2 Create a Cube ............................................................................................................................. 26 Task 3 Map Other Content to the Surface of Your Cube .......................................................................... 29 Task 4 Map Your Animated 2-D Content onto the Cube .......................................................................... 31 Lab Summary ................................................................................................................................................ 38

    Page iii

Lab 1: Rich Content in WPF

Lab Objective

    Estimated time to complete this lab: 60 minutes

    The objective of this lab is to demonstrate the integration of the Windows Presentation Foundation’s

    rendering system, as well as to show the power of XAML. You will create 2-D content, animate it, add video, and finally map it onto a rotating 3-D surface and you will do all of this without writing a single

    line of C++, C#, or Visual Basic.

    ; Create static 2-D content

    ; Add animations and media

    ; Add 3-D

    Note: Code snapshots representing the start-point for each task in the lab are available beneath the c:\Microsoft Hands-On-Lab\HOL-PRSHOL08\Source folder. These may be useful if you want to begin the lab somewhere in the middle, or if your project gets into an unrecoverable state. The Microsoft WinFX Software Development Kit (SDK) has been installed on this computer, and is available by clicking the ―WinFX SDK‖ shortcut in the Start menu. Users are encouraged to keep the

    SDK open during their lab experience in order to develop a deeper knowledge of relevant concepts and find answers to common questions. Application Programming Interface (API) reference documentation is also available within the SDK.

    Exercise 1 Create Static 2-D Content

    In this exercise, you will create a drawing of two circles and some text. You'll learn how to outline and fill Shape objects with solid colors, gradients, and visual objects. You’ll also learn how to use text as a

    background.

    Your first task is to create a circle. To draw a circle, you create an Ellipse object and set its Width

    and Height properties so that they are equal to each other. In this example, you'll create an Ellipse ththat is 300 device-independent pixels (each device independent pixel, or DIP, is equal to 1/96 of an

    inch) wide by 300 device-independent pixels tall. You'll paint its outline (Stroke) and interior (Fill)

    with a brush.

    Page 1

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

    2. From the main menu, select File > Open > Project/Solution.

    3. Navigate to C:\Microsoft Hands-On-Lab\HOL-PRSHOL08\Source\Ex1\Task1\. In this lab,

    each task has its own Visual Studio Project and folder.

    4. Open RichContent.sln.

    5. View the Window1.xaml file. Notice that this file is composed of a tag and its closing

     tag, as well as and 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.

    6. Note that the Canvas is contained within the Window, but that the Canvas is empty: <Window x:Class="RichContent.Window1"

     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

     Title="RichContent"

     >

     <Canvas>

     Canvas>

    Window>

    7. Create a circle. You do this by creating an Ellipse object and giving it equal Width and

    Height settings. To make the Ellipse visible, give it a Stroke setting and a

    StrokeThickness. Run the application. Ellipse is just one of the predefined 2D shapes that

    are available to you. Instead of Ellipse, you could just as easily use Line, Polygon,

    Polyline, Rectangle, or Path. You’ll learn more about the Path shape in the next task.

<Window x:Class="RichContent.Window1"

     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

     Title="RichContent"

     >

     <Canvas>

     <Ellipse Width="300" Height="300" Stroke="Purple" StrokeThickness="20">

     Ellipse>

     Canvas>

Window>

    Page 2

Figure 1: A circle with a purple outline

    When you set the ellipse's Stroke property to "Purple", you used abbreviated syntax to paint

    the ellipse's stroke with a purple SolidColorBrush. Alternatively, you could have written the

    following:

     <Ellipse Width="300" Height="300" StrokeThickness="20">

     <Ellipse.Stroke>

     <SolidColorBrush Color="Purple" />

     Ellipse.Stroke>

     Ellipse>

    In WPF, a Brush describes how to paint an area of the screen. A SolidColorBrush, for

    instance, paints an area with a solid color. Other types of brushes include

    LinearGradientBrush, RadialGradientBrush, ImageBrush, DrawingBrush, and

    VisualBrush. You will use a LinearGradientBrush in the next step to paint the circle's

    interior.

    8. Use a LinearGradientBrush to paint the circle interior with a linear gradient that transitions

    from yellow to red. A LinearGradientBrush paints a gradient along a line. The line’s start point and

    end point are defined by the LinearGradientBrush’s StartPoint and EndPoint properties This is

    not to be confused with its color interpolation scheme, which is also linearall gradient brushes

    interpolate colors linearly between their gradient stops.

    A LinearGradientBrush’s StartPoint and EndPoint properties define its gradient axis,

    the line along which the gradient blends its colors. If you don’t specify a StartPoint or

    EndPoint, they default to (0,0) and (1,1), which creates a diagonal gradient that starts at the top

    left corner of the area being painted and extends to the bottom-right corner. Note that these

    coordinates are relative to the size of the output area.

    You use GradientStop objects to describe the colors that make up the gradient. Each gradient

    stop describes a color and that color’s position along gradient axis. Make the first gradient stop

    Page 3

    yellow and set its Offset property to 0, which places the gradient stop at the gradient’s

    StartPoint, (0,0). Make the second gradient stop red and set its Offset property to 1, which

    places the gradient stop at the gradient’s EndPoint, (1,1). Between these two points the color is

    linearly interpolated. After changing these, run your application again.

<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: The circle from the previous step, now with a gradient fill

    Because you did not specify a StartPoint or EndPoint, the LinearGradientBrush creates

    a diagonal gradient. Feel free to change the LinearGradientBrush’s StartPoint and

    EndPoint properties, as well as the Offset and Color values of the GradientStop objects.

    You may also add additional gradient stops.

    9. Give your circle a dashed outline by setting its StrokeDashArray property to “0.5 2”. <Ellipse Width="300" Height="300"

     Stroke="Purple" StrokeThickness="20"

     StrokeDashArray="0.5,2">

    Page 4

    Figure 3: The circle, after giving it a dashed outline

    Each value of the StrokeDashArray setting specifies the length of a dash or gap, relative to the

    shape's StrokeThickness. With the previous code (StrokeDashArray=“0.5,2"), you

    created a pattern composed of a dash that's 50% as long as the StrokeThickness followed by

    a space that's twice as long as the StrokeThickness.

    10. Give the dashes rounded edges by setting the ellipse’s StrokeDashCap to Round.

    <Ellipse Width="300" Height="300"

     Stroke="Purple" StrokeThickness="20"

     StrokeDashArray="0.5,2" StrokeDashCap="Round">

    Page 5

    Figure 4: The circle, with rounded dashes

    Other dash styles include Flat, Square, and Triangle.

    11. Replace the ellipse’s purple solid color stroke with a linear gradient that transitions from black to

    white. First, delete the Stroke property from within the Path tag. Then add the following XAML

    inside of your Ellipse tag.

    <Window x:Class="RichContent.Window1"

     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

     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>

     LinearGradientBrush>

    Page 6

     Ellipse.Stroke>

     Ellipse>

     Canvas >

Window>

Figure 5: The circle, with a gradient outline

    Task 2 Create a More Complex Shape Using a Path The Path class represents a more generalized shape than the predefined shape objects (Line, Rectangle, Ellipse, Polyline, Polygon). It enables you to create complex figures, such as

    curves, arcs, and combined shapes. In this task, you’ll create a path that’s equivalent to the circle you created in the previous task. You’ll then use the circle as part of a more complex shape.

    1. Replace the Ellipse that you created in the previous task with a Path. Give the Path the same

    Stroke and Fill settings that you gave the ellipse. Set its Width and Height properties to

    800. Describe the path's contents (the shape to draw) using its Data property. The Data

    property accepts a Geometry. A Geometry is an abstract description of screen area, and

    depends on other objects to display it. To create a circle, you can use an EllipseGeometry, a

    predefined geometry similar to the predefined Ellipse shape you used earlier.

<Window x:Class="RichContent.Window1"

     xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

     xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

     Title="RichContent"

     >

    Page 7

Report this document

For any questions or suggestions please email
cust-service@docsford.com