Professional C# 2008 phần 8 potx

Chapter 35: Advanced WPF 1235 < StopStoryboard BeginStoryboardName=”beginMoveEye” / > < /EventTrigger > < /DockPanel.Triggers > < /DockPanel > < /Window > Instead of starting and stopping the animation directly from event triggers in XAML, you can easily control the animation from code behind. The buttons startAnimationButton and stopAnimationButton have the event handlers OnStartAnimation and OnStopAnimation associated with them. Within the event handlers, the animation is started with the Begin() method and stopped with the Stop() method. With the Begin() method the second parameter is set to true to allow you to control the animation with a stop request. public partial class Window1 : System.Windows.Window { public Window1() { InitializeComponent(); startAnimationButton.Click += OnStartAnimation; stopAnimationButton.Click += OnStopAnimation; } void OnStartAnimation(object sender, RoutedEventArgs e) { moveEye.Begin(eye, true); } void OnStopAnimation(object sender, RoutedEventArgs e) { moveEye.Stop(eye); } } Now, you can start the application and watch the eye move as soon as one of the Start buttons is clicked. Storyboard The Storyboard class inherits from the base class Timeline but can contain multiple timelines. The Storyboard class can be used to control timelines. The following table describes the methods of the Storyboard class. Storyboard Methods Description Begin() The Begin() method starts the animations associated with the story- board. BeginAnimation() W i t h BeginAnimation() , you can start a single animation for a depen- dency property. CreateClock() The CreateClock() method returns a Clock object that you can use to control the animations. c35.indd 1235c35.indd 1235 2/19/08 5:29:37 PM2/19/08 5:29:37 PM Part V: Presentation 1236 Storyboard Methods Description Pause()Resume() W i t h Pause() and Resume() , you can pause and resume animations. Seek() With the Seek() method, you can jump in time and move the animation to a specified time interval. Stop() The Stop() method halts the clock and stops the animation. The EventTrigger class makes it possible to define actions when events occur. The following table describes the properties of this class. EventTrigger Properties Description RoutedEvent With the RoutedEvent property, you can define the event when the trig- ger should start; for example, a Click event of a Button . SourceName The SourceName property defines to what WPF element the event should connect. Trigger actions that you can put within an EventTrigger are listed in the following table. You ’ ve seen the BeginStoryboard and StopStoryboard actions in the example, but the following table shows some others. TriggerAction Classes Description SoundPlayerAction With SoundPlayerAction , you can play a .wav file. BeginStoryboard BeginStoryboard starts an animation defined by a Storyboard . PauseStoryboard PauseStoryboard pauses an animation. ResumeStoryboard ResumeStoryboard resumes an animation that was paused. StopStoryboard StopStoryboard stops a running animation. SeekStoryboard With SeekStoryboard , you can change the current time of an ani- mation. SkipStoryboardToFill SkipStoryboardToFill advances an animation to the fill period at the end. SetStoryboardSpeedRatio With SetStoryboardSpeedRatio , you can change the speed of an animation. c35.indd 1236c35.indd 1236 2/19/08 5:29:38 PM2/19/08 5:29:38 PM Chapter 35: Advanced WPF 1237 Adding 3 - D Features in WPF This section gives you an introduction to the 3 - D features of WPF. Here you’ll find the information to get started. The namespace for 3 - D with WPF is System.Windows.Media.Media3D . To understand 3 - D with WPF it is important to know the difference of the coordination system. Figure 35 - 22 shows the coordination system of WPF 3 - D. The origin is placed in the center. The x - axis has positive values to the right and negative values to the left. The y - axis is vertical with positive values up and negative values down. The z - axis defines positive values in direction to the viewer. ϩy Ϫy ϩxϪx Ϫz ϩz Figure 35-22 The most important classes and their functionality are described in the following table. Class Description ViewPort3D ViewPort3D defines the rendering surface for 3 - D objects. This element contains all the visual elements for 3 - D drawing. ModelVisual3D ModelVisual3D is contained in a ViewPort3D and contains all the visual elements. You can assign a transformation to a complete model. GeometryModel3D GeometryModel3D is contained within a ModelVisual3D and consists of a mesh and a material. Geometry3D Geometry3D is an abstract base class to define geometric shapes. The con- crete class that derives from Geometry3D is MeshGeometry3D . With MeshGeometry3D you can define positions of triangles to build a 3 - D model. c35.indd 1237c35.indd 1237 2/19/08 5:29:38 PM2/19/08 5:29:38 PM Part V: Presentation 1238 Class Description Material Material is an abstract base class to define the front and back side from the triangles defined with the MeshGeometry3D . Material is contained within a GeometryModel3D . .NET 3.5 defines several material classes, such as DiffuseMaterial , EmissiveMaterial , and SpecularMaterial . Depending on the material type, the light calculates differently. EmissiveMaterial behaves with lighting calculations that the material emits the light equal to the color of the brush. DiffuseMaterial lights with a diffuse light, and SpecularMaterial defines a specularly lit model. With the MaterialGroup class you can cre- ate a combination consisting of other materials. Light Light is the abstract base class for lighting. Concrete implementations are AmbientLight , DirectionalLight , PointLight and SpotLight . AmbientLight is an unnatural light that lights the complete scene simi- larly. You will not see edges using that light. DirectionalLight defines a directed light. Sunlight is a example of directed light. The light comes from one side and here you can see edges and shadows. PointLight is a light with a specified position and lights in all directions. SpotLight lights in a specified direction. This light defines a cone so you can get a very intensive illuminated area. Camera Camera is the abstract base class for the camera that is used to map the 3 - D scene to a 2 - D display. Concrete implementations are PerspectiveCamera , OrthographicCamera , and MatrixCamera . With the PerspectiveCamera the 3 - D objects are smaller the further away they are. This is different with the OrthographicCamera . Here the distance of the camera doesn ’ t influence the size. With the MatrixCamera you can define the view and transformation in a matrix. Transform3D Transform3D is the abstract base class for 3 - D transformations. Concrete implementations are RotateTransform3D , ScaleTransform3D , TranslateTransform3D , MatrixTransform3D , and Transform3DGroup . TranslateTransform3D allows transforming an object in the x, y, and z direction. ScaleTransform3D allows for an object resize. With the RotateTransform3D class you can rotate the object defined by an angle in the x, y, and z direction. With Transform3DGroup you can combine other transformations. Triangle This section starts with a simple 3 - D sample. A 3 - D model is made up of triangles, so a simple model is just one triangle. The triangle is defined by the Positions property of the MeshGeometry3D . The three points all use the same z coordinate, – 4, and x/y coordinates – 1 – 1, 1 – 1, and 0 1. The property TriangleIndices indicates the order of the positions in a counterclockwise way. With this property you define which side of the triangle is visible. One side of the triangle shows the color defined with the Material property of the GeometryModel3D class, and the other side shows the BackMaterial property. c35.indd 1238c35.indd 1238 2/19/08 5:29:38 PM2/19/08 5:29:38 PM Chapter 35: Advanced WPF 1239 The camera that is used to show the scenario is positioned at the coordinates 0, 0, 0, and looks into the direction 0, 0, – 8. Changing the camera position to the left side, the rectangle moves to the right and vice versa. Changing the y position of the camera, the rectangle appears larger or smaller. The light that is used in this scene is an AmbientLight to light up the complete scene with a white light. Figure 35 - 23 shows the result of the triangle. < Window x:Class=”Triangle3D.Window1” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Title=”3D” Height=”300” Width=”300” > < Grid > < Viewport3D > < Viewport3D.Camera > < PerspectiveCamera Position=”0 0 0” LookDirection=”0 0 -8” / > < /Viewport3D.Camera > < ModelVisual3D > < ModelVisual3D.Content > < AmbientLight Color=”White” / > < /ModelVisual3D.Content > < /ModelVisual3D > < ModelVisual3D > < ModelVisual3D.Content > < GeometryModel3D > < GeometryModel3D.Geometry > < MeshGeometry3D Positions=”-1 -1 -4, 1 -1 -4, 0 1 -4” TriangleIndices=”0, 1, 2” / > < /GeometryModel3D.Geometry > < GeometryModel3D.Material > < MaterialGroup > < DiffuseMaterial > < DiffuseMaterial.Brush > < SolidColorBrush Color=”Red” / > < /DiffuseMaterial.Brush > < /DiffuseMaterial > < /MaterialGroup > < /GeometryModel3D.Material > < /GeometryModel3D > < /ModelVisual3D.Content > < /ModelVisual3D > < /Viewport3D > < /Grid > < /Window > c35.indd 1239c35.indd 1239 2/19/08 5:29:39 PM2/19/08 5:29:39 PM Part V: Presentation 1240 Changing Lights Figure 35 - 23 just shows a simple triangle where you can get the same result with less effort using 2 - D. However, from here you can continue getting into 3 - D features. For example, by changing the light from an ambient light to a spotlight with the element SpotLight you can immediately see a different appearance of the triangle. With the spotlight you define a position where the light is placed, and the position to which the light is directed. Specifying - 1 1 2 for the position, the light is placed at the left corner of the triangle and the y coordinate to the height of the triangle. From there the light is directed down and to the left. You can see the new appearance of the triangle in Figure 35 - 24 . < ModelVisual3D > < ModelVisual3D.Content > < SpotLight Position=”-1 1 -2” Color=”White” Direction=”-1.5, -1, -5” / > < /ModelVisual3D.Content > < /ModelVisual3D > Figure 35-23 Figure 35-24 c35.indd 1240c35.indd 1240 2/19/08 5:29:39 PM2/19/08 5:29:39 PM Chapter 35: Advanced WPF 1241 Adding Textures Instead of using a solid color brush with the materials of the triangle, you can use a different brush such as the LinearGradientBrush as shown with the following XAML code. The LinearGradientBrush element defined with DiffuseMaterial defines gradient stops with the colors yellow, orange, red, blue, and violet. To map a 2 - D surface from an object such as the brush to a 3 - D geometry, the TextCoordinates property must be set. TextCoordinates defines a collection of 2 - D points that map to the 3 - D positions. Figure 35 - 25 shows the 2 - D coordinates of the brush from the sample application. The first position in the triangle, – 1 – 1, maps to the brush coordinates 0 1; the position 1 – 1, which is the lower corner on the right, maps to 1 1 of the brush, which is violet; and 0 1 maps to 0.5 0. Figure 35 - 26 shows the triangle with the material of the gradient brush, again with the ambient light. < ModelVisual3D > < ModelVisual3D.Content > < GeometryModel3D > < GeometryModel3D.Geometry > < MeshGeometry3D Positions=”-1 -1 -4, 1 -1 -4, 0 1 -4” TriangleIndices=”0, 1, 2” TextureCoordinates=”0 1, 1 1, 0.5 0” / > < /GeometryModel3D.Geometry > < GeometryModel3D.Material > < MaterialGroup > < DiffuseMaterial > < DiffuseMaterial.Brush > < LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1” > < GradientStop Color=”Yellow” Offset=”0” / > < GradientStop Color=”Orange” Offset=”0.25” / > < GradientStop Color=”Red” Offset=”0.50” / > < GradientStop Color=”Blue” Offset=”0.75” / > y x 1 1 0/0 Figure 35-25 (continued) c35.indd 1241c35.indd 1241 2/19/08 5:29:40 PM2/19/08 5:29:40 PM Part V: Presentation 1242 < GradientStop Color=”Violet” Offset=”1” / > < /LinearGradientBrush > < /DiffuseMaterial.Brush > < /DiffuseMaterial > < /MaterialGroup > < /GeometryModel3D.Material > < /GeometryModel3D > < /ModelVisual3D.Content > < /ModelVisual3D > (continued) Figure 35-26 You can add text or other controls in a similar way to the materials. To do this you just need to create a VisualBrush with the elements that should be painted. The VisualBrush is discussed in Chapter 34 , “ Windows Presentation Foundation. ” 3 - Dimensional Object Now let ’ s get into a real three - dimensional object: a box. The box is made up of five rectangles: the back, front, left, right, and bottom sides. Each rectangle is made up of two triangles because this is the core of a mesh. With WPF and 3 - D the term mesh is used to describe the triangle primitive for building 3 - D shapes. Here is the code of the rectangle for the front side of the box that consists of two triangles. The positions of the triangles are set in a counterclockwise order as defined by the TriangleIndices . The front side of the rectangle is done with a red brush; the back side with a gray brush. Both of these brushes are of type SolidColorBrush and defined with the resources of the Window . < ! Front > < GeometryModel3D > < GeometryModel3D.Geometry > < MeshGeometry3D Positions=”-1 -1 1, 1 -1 1, 1 1 1, 1 1 1, -1 1 1, -1 -1 1” TriangleIndices=”0 1 2, 3 4 5” / > < /GeometryModel3D.Geometry > < GeometryModel3D.Material > < DiffuseMaterial Brush=”{StaticResource redBrush}” / > c35.indd 1242c35.indd 1242 2/19/08 5:29:40 PM2/19/08 5:29:40 PM Chapter 35: Advanced WPF 1243 < /GeometryModel3D.Material > < GeometryModel3D.BackMaterial > < DiffuseMaterial Brush=”{StaticResource grayBrush}” / > < /GeometryModel3D.BackMaterial > < /GeometryModel3D > The other rectangles look very similar, just with different positions. Here you can see the XAML code of the left side of the box: < ! Left side > < GeometryModel3D > < GeometryModel3D.Geometry > < MeshGeometry3D Positions=”-1 -1 1, -1 1 1, -1 -1 -1, -1 -1 -1, -1 1 1, -1 1 -1” TriangleIndices=”0 1 2, 3 4 5” / > < /GeometryModel3D.Geometry > < GeometryModel3D.Material > < DiffuseMaterial Brush=”{StaticResource redBrush}” / > < /GeometryModel3D.Material > < GeometryModel3D.BackMaterial > < DiffuseMaterial Brush=”{StaticResource grayBrush}” / > < /GeometryModel3D.BackMaterial > < /GeometryModel3D > The sample code defines a separate GeometryModel3D with every side of the box. This is just for better understanding of the code. As long as the same material is used with every side, it ’ s also possible to de- fine a mesh containing all 10 triangles from all sides of the box. All the rectangles are combined within a Model3DGroup , so one transformation can be done with all the sides of the box: < ! the model > < ModelVisual3D > < ModelVisual3D.Content > < Model3DGroup > < ! — GeometryModel3D elements for every side of the box > < /Model3DGroup > With the Transform property of the Model3DGroup element, all the geometries inside this group can be transformed. Here a RotateTransform3D is used that defines an AxisAngleRotation3D . To rotate the box during runtime, the Angle property is bound to the value of a Slider control. < ! Transformation of the complete model > < Model3DGroup.Transform > < RotateTransform3D CenterX=”0” CenterY=”0” CenterZ=”0” > < RotateTransform3D.Rotation > < AxisAngleRotation3D x:Name=”axisRotation” Axis=”0, 0, 0” Angle=”{Binding Path=Value, ElementName=axisAngle}” / > < /RotateTransform3D.Rotation > < /RotateTransform3D > < /Model3DGroup.Transform > c35.indd 1243c35.indd 1243 2/19/08 5:29:41 PM2/19/08 5:29:41 PM Part V: Presentation 1244 To see the box, a camera is needed. Here the PerspectiveCamera is used so that the box gets smaller the further the camera is. The position and direction of the camera can be set during runtime. < ! Camera > < Viewport3D.Camera > < PerspectiveCamera x:Name=”camera” Position=”{Binding Path=Text, ElementName=textCameraPosition}” LookDirection=”{Binding Path=Text, ElementName=textCameraDirection}” / > < /Viewport3D.Camera > The application uses two different light sources. One light source is a DirectionalLight : < ! directional light > < ModelVisual3D > < ModelVisual3D.Content > < DirectionalLight Color=”White” x:Name=”directionalLight” > < DirectionalLight.Direction > < Vector3D X=”1” Y=”2” Z=”3” / > < /DirectionalLight.Direction > < /DirectionalLight > < /ModelVisual3D.Content > < /ModelVisual3D > The other light source is a SpotLight . With this light source it is possible to highlight a specific area on the box. The SpotLight defines the properties InnerConeAngle and OuterConeAngle to define the area of the full illumination: < ! spot light > < ModelVisual3D > < ModelVisual3D.Content > < SpotLight x:Name=”spotLight” InnerConeAngle=”{Binding Path=Value, ElementName=spotInnerCone}” OuterConeAngle=”{Binding Path=Value, ElementName=spotOuterCone}” Color=”#FFFFFF” Direction=”{Binding Path=Text, ElementName=spotDirection}” Position=”{Binding Path=Text, ElementName=spotPosition}” Range=”{Binding Path=Value, ElementName=spotRange}” / > < /ModelVisual3D.Content > < /ModelVisual3D > When running the application you can change the rotation of the box, the camera, and lights as shown in Figure 35 - 27 . Creating a 3 - D model that consists of just rectangles or triangles is easy to do. You would not manually create more complex models; instead you would use one of several tools. You can find 3 - D tools for WPF at www.codeplex/3DTools . c35.indd 1244c35.indd 1244 2/19/08 5:29:41 PM2/19/08 5:29:41 PM [...]... Stroke=”Blue” StrokeThickness=”4” Data=”M 62,125 Q 95,122 102,1 08 /> ... Windows Forms control still looks like a Windows Forms control and does not have all the resizing and styling features you get with WPF Figure 35-29 12 48 c35.indd 12 48 2/19/ 08 5:29:42 PM Chapter 35: Advanced WPF WPF Browser Application Visual Studio 20 08 has another WPF project template: a WPF Browser Application Such an application can run within Internet Explorer, but still the NET Framework version... AcquireLifetimeToken() returns an identifier for the lifetime token, and this identifier must be used to invoke the RevokeLifetimeToken() method So these methods are always called in pairs 12 58 c36.indd 12 58 2/19/ 08 5:29: 58 PM Chapter 36: Add-Ins Usually you do not have to deal with invoking the AcquireLifetimeToken() and RevokeLifetimeToken() methods Instead you can use the ContractHandle class that invokes... with this technology For more information on WPF, you should read a book that focuses on WPF; for example, Professional WPF Programming: NET Development with the Windows Presentation Foundation by Chris Andrade et al (Wiley Publishing, 2007) 1249 c35.indd 1249 2/19/ 08 5:29:43 PM c35.indd 1250 2/19/ 08 5:29:43 PM Add - Ins Add-ins allow you to add functionality to an application at a later time You can... System.Windows.Forms.Control, and can be used like any other Windows Forms control in a Windows Forms application ElementHost hosts and manages WPF controls 1245 c35.indd 1245 2/19/ 08 5:29:41 PM Part V: Presentation Let’s start with a simple WPF control With Visual Studio 20 08, you can create a WPF User Control Library The sample control is derived from the base class UserControl and contains a grid and a button with a custom... application configuration file to match your directory structure using using using using using using System; System.AddIn.Hosting; System.AddIn.Pipeline; System.IO; System.Linq; System.Windows; 12 68 c36.indd 12 68 2/19/ 08 5:30:03 PM Chapter 36: Add-Ins using System.Windows.Controls; using Wrox.ProCSharp.AddIns.Properties; namespace Wrox.ProCSharp.AddIns { public partial class CalculatorHostWindow : Window {... the Windows Forms application, you can see both the WPF control as well the Windows Forms control inside one form, as shown in Figure 35- 28 Of course, you can add methods, properties, and events to the WPF control and use them the same way as other controls Figure 35- 28 Windows Forms Controls Within WPF Applications You can integrate Windows Forms and WPF in the other direction as well by placing a Windows... in the following table The table lists the assemblies that need to be referenced With the references to the other projects within the solution you need to set the property 1259 c36.indd 1259 2/19/ 08 5:29: 58 PM Part V: Presentation Copy Local to False, so that the assembly does not get copied One exception is the HostApp console project that needs a reference to the HostView project This assembly needs... \Pipeline\ HostSideAdapters\ The host adapter maps the host view to the contract Thus, it needs to reference both of these projects The hosting application activates the add-in 1260 c36.indd 1260 2/19/ 08 5:29: 58 PM Chapter 36: Add-Ins Calculator Contract Let’s start by implementing the contract assembly Contract assemblies contain a contract interface that defines the protocol for communication between the... WPF Button You can see a view of the WPF . class, and the other side shows the BackMaterial property. c35.indd 1238c35.indd 12 38 2/19/ 08 5:29: 38 PM2/19/ 08 5:29: 38 PM Chapter 35: Advanced WPF 1239 The camera that is used to show the. (continued) Figure 35-29 c35.indd 1248c35.indd 12 48 2/19/ 08 5:29:42 PM2/19/ 08 5:29:42 PM Chapter 35: Advanced WPF 1249 WPF Browser Application Visual Studio 20 08 has another WPF project template:. StrokeThickness=”4” / > < Line X1=”92” X2= 82 ” Y1=”146” Y2=”1 68 Stroke=”Blue” StrokeThickness=”4” / > < Line X1=” 68 X2= 83 ” Y1=”160” Y2=”1 68 Stroke=”Blue” StrokeThickness=”4” / >