By studying the previous chapter, Geometry class represents an abstract shape or path. Drawing abstract class plays a complementary role, which represents a 2D drawing (Drawing) - in other words, it contains all the information display vector or bitmap images required.
Although there are several types of drawing class, but the class can be used only GeometryDrawing have studied geometry. It adds to decide how to graph brush and fill in the details. GeometryDrawing shape vector objects may be considered in the illustration. For example, a standard window can be converted metafile format (.wmf) to be inserted into a set of user interface objects GeometryDrawing.
Analysis of a simple example helpful. As already seen how to define a triangle represents PathGeometry objects:
<PathGeometry> <PathFigure IsClosed="True" StartPoint="0,100"> <LineSegment Point="100,100"/> <LineSegment Point="100,50"/> </PathFigure> </PathGeometry>
PathGeometry GeometryDrawing create objects using the object, as follows:
<GeometryDrawing Brush="Yellow" > <GeometryDrawing.Pen> <Pen Brush="Blue" Thickness="3"></Pen> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,100"> <LineSegment Point="100,100" /> <LineSegment Point="100,50" /> </PathFigure> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing>
Now, PathGeometry defines the shape of the object (triangle). GeometryDrawing defines the external shape of the object (yellow triangle having a blue border). PathGeometry GeometryDrawing objects and the object is not an element, it can not be used directly in any of these two objects is a window to add their own content to draw, and the need to use another supported drawing class.
WPF GeometryDrawing class is not always the only picture type (although when using 2D vector graphics, a class is the most relevant class). In fact, Drawing class is used to represent all types of 2D graphics, and there is a group class inherits from the class. The following table lists all of these classes.
Table drawing class
A display picture
Since the class is not inherited from the Drawing elements, so that they can not be placed into the user interface. In order to display a picture, a need to use the three classes listed in the following table.
Table class for displaying a picture
All of these classes there are common themes. Very simple, they provide a way to use fewer system resources to display 2D content.
For example, if you want to use a vector to create a chart image for the button. The easiest way (also the most resource method occupancy) is placed in a Canvas control button, and place a series of elements inherited from the Shape class in the Canvas control:
<Button ...> <Canvas ...> <Polyline ...> <Polyline ...> <Rectangle ...> <Ellipse ...> <Polygon ...> </Canvas> </Button>
It is now known that if you are using this method, each element is completely independent, with its own memory area and event handlers. A better approach is to reduce the number of elements Path element. Because each one has a separate stroke and fill, it still requires a lot of Path objects, but it was able to reduce the number of elements to a certain extent:
<Button ...> <Canvas ...> <Path ...> <Path ...> ... </Canvas> </Button>
Path element once started, will separate into a different geometric shape. Geometry can be extracted, and a filling stroke from the path information and converts them into a picture, so add a layer of abstraction. The pictures can then be fused together in a DrawingGroup objects, and objects into DrawingImage DrawingGroup object, the object in turn is placed into DrawingImage Image element. Here is the new labeling process created:
<Button ...> <Image ...> <Image.Source> <DrawingImage> <DrawingImage.Drawing> <DrawingGroup> <GeometryDrawing ...> <GeometryDrawing ...> <GeometryDrawing ...> ... </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> </Image.Source> </Image> </Button>
This is a significant change. This simplified embodiment not labeled, except that instead of each of the objects GeometryDrawing Path object. However, due to the reduced number of elements, thus reducing the overhead required. Created in the previous example, contained in the Canvas control buttons, and add a separate element for each path. However, the embodiment requires only a nested elements: a button located in the Image element. The price paid is not reprocessed events for each different path (for example, can not detect the mouse click operation separate areas in the picture). But in a still image for the button's not necessarily need to use this feature.
Although DrawingImage object has saved a lot of resources, but can still further improve the efficiency of the aid Drawing delete another element.
The basic idea is encapsulated object DrawingImage DrawingBrush object, as follows:
<Button ...> <Button.Background> <DrawingBrush> <DrawingBrush.Drawing> <DrawingGroup> <GeometryDrawing ...> <GeometryDrawing ...> <GeometryDrawing ...> <....> </DrawingGroup> </DrawingBrush.Drawing> </DrawingBrush> </Button.Background> </Button>
DrawingBrush and DrawingImage method previously described methods are not identical. Image element to change the default way because its content is different. Default Image.Stretch property is Uniform, the setting will fit into the available space for enlarging or reducing the image. The default value of the attribute is DrawingBrush.Stretch Fill, this setting could distort the image.
When changing the Stretch property DrawingBrush, to clarify the position and size distorted picture padding region, it may also be desirable to adjust the settings Viewport. For example, the following marking scale view of the brush used to paint a picture, to occupy 90% of the fill area:
<DrawinBrush Stretch="Fill" Viewport="0,0 0.9,0.9">
For example a button which is very useful. Because it can leave some space around the button's border. Not because DrawingBrush elements, so you can not use WPF layout process. This means that the different elements and Image, the content of DrawingBrush placement does not consider Button.Paddin property values.
DrawingBrush a strange problem with the way that the contents when the mouse over the button will disappear, and will use a new brush to draw the button face. But when using the Image mode, the picture will not be affected. To solve this problem, you need to create a custom button control template for a button, use a different template to draw the background of a button.
Either in itself DrawingImage graphics, or graphics package used DrawingBrush, resources should be considered an exploded tag. The basic idea is as different resources for each DrawingImage or DrawingBrush object definitions, so when you need to reference objects can be defined. If you want to display the same content in multiple elements or window, this is a particularly good idea, because only need to reuse resources, without having to copy the entire mark. As shown in the example below:
<Window x:Class="Drawing.Drawings" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Drawings" Height="300" Width="300"> <Window.Resources> <GeometryDrawing x:Key="Drawing" Brush="Yellow" > <GeometryDrawing.Pen> <Pen Brush="Blue" Thickness="3"></Pen> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,100"> <LineSegment Point="100,100" /> <LineSegment Point="100,50" /> </PathFigure> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </Window.Resources> <StackPanel Orientation="Horizontal" Margin="5"> <Button Width="30" Height="30"> <Image> <Image.Source> <DrawingImage Drawing="{StaticResource Drawing}"> </DrawingImage> </Image.Source> </Image> </Button> <Button Width="30" Height="30"> <Button.Background> <DrawingBrush Stretch="Uniform" Viewport="0,0 0.9,1" Drawing="{StaticResource Drawing}"> </DrawingBrush> </Button.Background> </Button> </StackPanel> </Window>
Second, export illustrations
While all of these examples are inline declare their pictures, but the more common method is to put some part of the resource dictionary, which can be reused (not a place to make changes) throughout the application. The user to decide how to split resource these tags, but the two methods are commonly used, to store a full DrawingImage object dictionary, a dictionary storage, or object storage DrawingBrush. In addition, the Geometry objects may be separated, and store them as separate resources. As shown in the example above.
Of course, few developers will manually write a lot of graphics. Instead, they will use XAML content specially designed tools needed for export. Most design tools do not currently support the XAML export feature, but there are a lot of plug-ins and conversion tools can make up for this deficiency. Here are a few examples:
- http://www.mikeswanson.com/XAMLExport/ have a free XAML plug-in for Adobe Illustrator tool on
- http://www.mikeswanson.com/swf2xaml/ have a free XAML file conversion tools for Adobe Flash.
- Microsoft Expression Design is a graphic design company and insertion procedures, built XAML export feature. The program can read a variety of vector graphics file formats, including .wmf (Windows Metafile format) files, you may also be introduced into existing illustrations and export to XAML format.
However, even with one of these tools, the knowledge learned previously about the graphics and pictures is still very important, mainly due to the following:
First, many programs allow selected as a combination of Canvas is to control the individual elements of the export picture, or hope as a collection of resources DrawingBrush or DrawingImage export picture. Typically, the first option is selected by default, because it retains many of the features. However, if you use a lot of pictures, and the picture is very complex, or just want to minimize memory requirements and use static graphics, such as buttons graphics, better use of resources DrawingImage DrawingBrush or more. Further, some of these formats and other user interfaces are independent, it is easy to update them later.
The reason why understanding the basics of 2D graphics is important, another reason is so you can more easily control them. For example, alternative standard 2D graphics in the following ways: modifying Videos for drawing brushes of various shapes, for a single application of the geometry changes, or change the opacity to transform the entire shape of the layer (DrawingGroup by the object). More dramatic is that you can add, remove, and replace single geometry.