Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Expression Design

Expression Design

Expression Design is a vector graphics editor by Microsoft, which makes it possible to export figures and shapes into XAML. It is extremely simple to use this software, and, therefore, we would like to introduce it through an illustrative example. Let us edit the Path that was used in the examples in the Sections Hiba! A hivatkozási forrás nem található. and Hiba! A hivatkozási forrás nem található..

From the Toolbox of Expression Design, one can choose building components that are needed for the wanted shape. We are going to use a polyline and a curve (B-Spline); as can be seen in Figure 25, one can display the menu containing these components by right click. First, draw the polyline to form the bottom part of the shape (Figure 26). Then, for the sake of example, modify the polyline: add new anchor points to it, and move one of them (Figure 27). Finally, draw a spline as the missing part of the border (Figure 28). Of source, one might continue with adding design to the shape, e.g., by setting the width or color of lines, or applying transformations, etc. Nevertheless, our aim is now only to export a “bare” shape into XAML; design steps can be applied afterwards to the WPF form that will use this shape (c.f. Sections Hiba! A hivatkozási forrás nem található. and Hiba! A hivatkozási forrás nem található.).

XVIII.25. Toolbox - Polyline, Anchor Point and B-Spline

XVIII.26. Drawing a Polyline

XVIII.27. Adding and moving Anchor Points

XVIII.28. Drawing a B-Spline

There is only one thing left to do: to export the shape (into XAML). For this, one need to select the shape, and then to click the „File/Export” menu item. There exist several options for choosing the output format; let use choose „WPF Canvas”, as can be seen in Figure 29.

XVIII.29. Exporting as a WPF Canvas

By doing so, the shape is exported as a Path (included by a Canvas). The Canvas is actually unnecessary (and can be deleted); the Path itself is what matters, and so is, in particular, its Data property, in which the “command sequence” to draw the shape takes place (c.f. Section VII.2.3).[25]

<Canvas xmlns=

                xmlns:x="" Width="112.313"

                Height="50.5" Clip="F1 M 0,0L 112.313,0L 112.313,50.5L 0,50.5L 0,0">

        <Path Width="112.354" Height="50.5" Canvas.Left="-0.041048" Canvas.Top="0"

                 Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"

                 Data="F1 M 21.8125,0.500015C 14.3125,0.500015 6.8125,0.500015 3.3125,2.50002C         -0.1875,4.50002 0.312508,8.5 0.812508,12.5L 4.81251,50L 54.3125,50L 65.8125,37.5L         72.3125,50L 111.813,50L 89.8125,0.5L 21.8125,0.500015 Z " />


[25] By using another output format, the “XAML WPF Resource Dictionary”, one can export a shape as a DrawingBrush (Section VI.2.5).