Graphics Reference
In-Depth Information
the
y
-axis overlapping each other. Thus, we are going to rotate the hour hand 45
◦
clockwise, so the clock will show the time of 7:30. To do so, we need the third
WPF transformation type,
RotateTransform
:
1
<RotateTransform Angle=... CenterX=... CenterY=... />
To instantiate the hour hand, we use the same
Control
tagweusedforthe
minute hand; however, we attach a
RenderTransform
to this instantiation to per-
form our modeling transformation sequence. This results in the code shown in
revision V.05 in the lab.
1
2
3
4
5
6
7
8
9
<!- The hour hand: ->
<Control Name="HourHand" Template="{StaticResource ClockHandTemplate}">
<Control.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.7" ScaleY="0.7" CenterX="0" CenterY="0"/>
<RotateTransform Angle="45" CenterX="0" CenterY="0"/>
</TransformGroup>
</Control.RenderTransform>
</Control>
Note that to specify a rotation, you must provide not only the amount of rota-
tion (clockwise, in degrees), but also the center of rotation, which is the point
around which the rotation is to occur. One of the nice features of our custom
coordinate system is that (0,0) represents the center of the clock, so the origin
conveniently serves as the center of rotation for the clock hands (and also as the
center point for the scaling operation).
Our scene's XAML specification now has two uses of
RenderTransform
ele-
ments: one acting as a modeling transformation (built from two basic transforma-
tions) to “construct” the hour hand, and one acting as the display transformation
that maps the entire scene to the canvas for display.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Canvas ... >
<!- RESOURCES ATTACHED TO THE CANVAS ->
<Canvas.Resources>
<ControlTemplate x:Key=
"ClockHandTemplate"
>
<Polygon ... />
</ControlTemplate>
</Canvas.Resources>
<!- THE SCENE ->
<!- The clock face: ->
<Ellipse ... />
<!- The minute hand: ->
<Control Name=
"MinuteHand"
Template=
"{StaticResource ClockHandTemplate}"
/>
<!- The hour hand: ->
<Control Name=
"HourHand"
Template=
"{StaticResource ClockHandTemplate}"
>
<Control.RenderTransform>
The modeling transform for the hour hand should be here.
</Control.RenderTransform>
</Control>
<!- THE DISPLAY TRANSFORM ->
<Canvas.RenderTransform>
The display transform for the scene should be here.
</Canvas.RenderTransform>
</Canvas>
