Graphics Reference
In-Depth Information
The WPF element type
Polygon
is used to create an outlined or filled
polygon via a sequential (either clockwise or counterclockwise) specification of the
vertices. Here is the XAML specification of our canonical clock hand, to be filled
with a navy color; note the use of spaces to separate coordinate pairs. Also notice
that we define the clock hand using our application's abstract coordinate system.
<Polygon
Points=
"-0.3, -1
1
2
3
-0.2, 8
0, 9
0.2, 8
0.3, -1"
Fill=
"Navy"
/>
We want this
Polygon
element to be a reusable template, defined once and
then
instantiated
(added to the scene) any number of times. A control template
is specified in the resource section of the root element (in this case, the
Canvas
element). Each template must be given a unique name (using the
x:Key
attribute)
so that it can be referenced for the purpose of instantiation.
<Canvas ... >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!- First, we define reusable resources,
giving each a unique key: ->
<Canvas.Resources>
<ControlTemplate x:Key="ClockHandTemplate">
<Polygon ... />
</ControlTemplate>
</Canvas.Resources>
<!- THE SCENE ->
<Ellipse ... />
<!- THE DISPLAY TRANSFORM ->
<Canvas.RenderTransform> ... </Canvas.RenderTransform>
</Canvas>
If we were to execute our application now, with this new template specifica-
tion, we would not detect any change. Still, only the gray clock face would be
visible. We must instantiate this template to actually change the displayed scene.
To do so, we add a
Control
element—which instantiates by reference to the
ClockHandTemplate
resource—to our scene, resulting in revision V.04:
<!- THE SCENE ->
1
2
3
4
5
6
7
8
<!- The clock face ->
<Ellipse ... />
<!- The minute hand: ->
<Control Name="MinuteHand"
Template="{StaticResource ClockHandTemplate}"/>
How will this new revision of our application look on the screen? Because
the display-transformation sequence is attached to the entire canvas, the minute-
hand polygon will be subjected to the entire display sequence—in essence, it
will “tag along” with the circle through the transformation sequence, as shown in
Figures 2.16 through 2.18.
