Windows Presentation Foundation

Windows Presentation Foundation CS 525 John Stites

Table of Contents Introduction... 3 Separation of Presentation and Behavior... 3 XAML Object Elements... 3 2-D Graphics... 6 3-D Graphics... 9 Microsoft Expression Studio... 11 References... 12 Page 2 of 12

Introduction This document is intended to give a brief overview of the new features contained in the Windows Presentation Foundation (WPF). It describes the overall goal of the WFP application model and shows a few examples of how a WPF application is developed using the built-in controls, 2-D graphics, and 3-D object rendering. Separation of Presentation and Behavior In the traditional ASP programming model, the coding logic and the presentation HTML are intertwined in the same file. This made writing and maintaining the code a cumbersome process that was prone to mistakes. To improve on this programming paradigm, ASP.NET introduced the concept of separating the presentation from behavior by creating the model of a code-behind file. This separated the HTML code, the presentation of the web page, from the application code, which defined the functional logic of the page. The.NET platform, version 3.0, continues this trend by extending the separation concept to forms-based applications, which previously followed the same ASP model of combining the presentation and the logic. In the new model, the presentation of the application is defined using a new language called XAML (pronounced zammel) which is an XML-based language to describe the layout and appearance of objects. The overall application model of using XAML with code-behind as well as all of the services that can be utilized within this model is called the Windows Presentation Foundation, or WPF. XAML Object Elements XAML is an XML-based language used to define objects in an application. It defines their appearance, properties, relationships with other objects, and interactions within the application. Each element in a XAML file will result in a corresponding object being created at runtime. In this way, it is considered a declarative language, declaring the objects up front that will be created. In its simplest form, the layout of a XAML application begins with the topmost object of the document: <Window x:class="windowsapplication.window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Page 3 of 12

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="My Application" Height="200" Width="500" > </Window> <!-- Instantiate contained objects here --> In this example, a Window object is declared with attributes describing the XML namespace for the rest of the document, as well as some default appearance properties like Title, Height, and Width. The namespace declarations tell the object loader which objects to create based on the elements found in the document. The Window element also describes the.net class, WindowsApplication.Window1, that will be used to provide the application logic for the Window. The elements that would appear on the windows form can be declared within the Window element. WPF provides a comprehensive set of controls that can be created within your application. It also provides the means to easily create your own controls if the default ones don t meet your needs. The standard controls are: Category Controls Editing List Selection CheckBox, ComboBox, PasswordBox, RadioButton, RichTextBox, Slider, TextBox ListBox, ListView, TreeView User Information Label, ProgressBar, Popup, ToolTip Action Appearance Button, ContextMenu, Menu, Separator, StatusBar, Thumb, ToolBar Border, BulletDecorator, Decorator, Image, Viewbox Dialog boxes OpenFileDialog, PrintDialog, SaveFileDialog Containers Layout Navigation Expander, GroupBox, RepeatButton, ScrollBar, ScrollViewer, TabControl Canvas, DockPanel, Grid, GridSplitter, Panel, StackPanel, VirtualizingStackPanel, WrapPanel Frame, Hyperlink Documents DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer Table 1: Standard UI Controls Page 4 of 12

Using a control can be as simple as declaring it in the XAML document in its proper location: <Button Background="Blue" Foreground="Red" Content="This is a button"/> For this declaration, a button will be created with a blue background and red text stating This is a button : Figure 1: Colored Button Appearance properties can be set on the object to change the way it interacts with its surrounding environment in this case, the window: <Button Content="Click me"> <Button.Margin> <Thickness Left="10" Top="20" Right="10" Bottom="30"/> </Button.Margin> </Button> Which appears as: Page 5 of 12

Figure 2: Formatted Button The application logic contained in the code-behind file determines what happens when the button is clicked. Because the logic is separated from the XAML, it acts independently of the appearance of the button. 2-D Graphics WPF provides new graphics features not previously available to windows developers without resorting to using GDI drawing primitives or interacting directly with the DirectX framework. Out of the box, WPF provides a set of commonly used shapes, such as rectangles and ellipses, which developers can add to their applications using XAML. These vector-drawn 2-D shapes can be programmed using the same code-behind model as the control elements used in the previous section. For instance, an ellipse can be drawn to a form and used as a button element: <Ellipse Fill="Blue" Name="myBlueEllipse" MouseUp="myBlueEllipse_MouseUp" /> When this application is run, the following ellipse is drawn to the window: Page 6 of 12

Figure 3: Ellipse By default, WPF provides the ability to draw the ellipse to the screen. It additionally includes support for input from the user, in this case a mouse click. It automatically creates boundaries for the ellipse object that include only the blue ellipse, not the white portions at the corners. If the user clicks the white portion, nothing happens. Only when the user s mouse pointer enters the blue region and clicks does the MouseUp event occur. When the simple 2-D objects included in the foundation are not enough for the user, custom geometries can easily be created to provide more advanced shapes. By using geometries, developers can create custom lines by setting the start and end points of the line. They can create custom rectangles by specifying the top-left point and the x and y lengths. Or they can create custom ellipses by specifying the center point as well as the x and y radii. For example: <Image Source="sampleImages\Waterlilies.jpg" Width="200" Height="150" HorizontalAlignment="Left"> <Image.Clip> <EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/> </Image.Clip> </Image> This example creates an image which clips the edges off outside of the defined EllipseGeometry. The result would look like the following, with the unclipped image on the left and the clipped image on the right: Page 7 of 12

Figure 4: Clipped Image But even these simple shapes have limitations. WPF provides the ability to break more complex shapes into segments that can be drawn individually to compose an overall shape. Developers can use LineSegments, BezierSegments, and ArcSegments, to name a few, to compose more complex shapes. WPF also provides the ability to create brush effects on the shapes and objects created in an application. The following is an example of how different brush objects can be used to change the appearance of objects: Figure 5: Brush Effects Page 8 of 12

All effects shown can be created declaratively using XAML without involving a single line of application code. 3-D Graphics The WPF is built upon the DirectX framework, therefore allowing the developer to create 3-D scenes and graphics. The developer can use the 3-D coordinate space to render any scenes that fit the application s needs. The developer can use Cameras and Projections to change the point of view of the scene for the viewer, as well as illuminate the scene with lighting objects. This can all be done in the same declarative XAML format as the 2-D graphics, giving the developer more control in separating the presentation from the application logic. The developer creates 3-D primitives by describing them using a Mesh Geometry. A 3-D primitive is a collection of vertices that form a single 3-D entity. By describing the primitive, providing a light source and a camera angle, and brushing the primitive, the developer can build up more complex 3-D objects like the following: Figure 6: Rendered 3-D Object This object is described completely using XAML code: Page 9 of 12

<Viewport3D Name="myViewport" > <!-- Add a camera. --> <Viewport3D.Camera> <PerspectiveCamera FarPlaneDistance="20" LookDirection="0,0,1" UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,-3" FieldOfView="45" /> </Viewport3D.Camera> <!-- Add models. --> <ModelVisual3D> <ModelVisual3D.Content> <Model3DGroup > <!-- Lights, MeshGeometry3D and DiffuseMaterial objects are added to the ModelVisual3D. --> <DirectionalLight Color="#FFFFFFFF" Direction="3,-4,5" /> <!-- Define a red cone. --> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="{removed for clarity}" Normals="{removed for clarity} TriangleIndices="{removed for clarity} /> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <SolidColorBrush Color="Red" Opacity="1.0"/> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> </GeometryModel3D> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D> Page 10 of 12

This can all be done using XAML. However, the developer is still free to react to user input, like dragging the image or rotating it by programmatically changing the camera position. In this way, complex interactions, animations, and scenes can be rendered within the WPF application framework. Microsoft Expression Studio With the ability to separate an application s appearance from its logic, Microsoft has created the ability to divide the work between the designers and the developers more cleanly. It has created a suite of tools that let designers create application designs that can then be handed to developers who develop the application logic behind the design. Microsoft Expression lets designers create sophisticated vector assets that can be transferred to developers by way of XAML. That is, a vector-based design can be saved into its equivalent XAML representation that the developer is then free to add application logic to. Developers no longer need to try to re-create visual aspects of an application that a designer created in a non-compatible tool. Instead, they work directly with the output of the designer s efforts. Page 11 of 12

References Microsoft Developer s Network: http://msdn2.microsoft.com/en-us/library/ms742119.aspx http://msdn2.microsoft.com/en-us/library/ms747437.aspx http://msdn2.microsoft.com/en-us/library/aa970268.aspx#controls http://msdn2.microsoft.com/en-us/library/ms747393.aspx http://msdn2.microsoft.com/en-us/library/ms747437.aspx Microsoft Expression Studio http://www.microsoft.com/products/expression/en/expression-studio/default.mspx Wikipedia.org http://en.wikipedia.org/wiki/code-behind http://en.wikipedia.org/wiki/model-view-controller Page 12 of 12