Graphics Reference
In-Depth Information
Now the code begins like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Canvas ...
<Canvas.Resources>
<ControlTemplate x:Key=
"ClockHandTemplate"
>
<Polygon
Points=
"-0.3,-1
-0.2,8
0,9
0.2,8
0.3,-1"
Fill=
"Navy"
/>
</ControlTemplate>
<ControlTemplate x:Key=
"CircleTemplate"
>
<Polygon
Points=
"1,0
0.707,0.707
0,1
-.707,.707
-1,0
-.707,-.707
0,-1
0.707,-.707"
Fill=
"LightGray"
/>
</ControlTemplate>
</Canvas.Resources>
This code defines the geometry that we'll use to create the face and hands of the
clock. With this change, the circular clock face will be defined by transforming
a template “circle,” represented by eight evenly spaced points on the unit circle.
This form of specification, although not idiomatic in WPF, is quite similar to scene
specification in many other scene-graph packages.
The actual creation of the scene now includes building the clock face from the
CircleTemplate
, and building the hands as before.
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
28
29
30
<!- 1. Background of the clock ->
<Control Name=
"Face"
Template=
"{StaticResource CircleTemplate}"
>
<Control.RenderTransform>
<ScaleTransform ScaleX=
"10"
ScaleY=
"10"
/>
</Control.RenderTransform>
</Control>
<!- 2. The minute hand ->
<Control Name=
"MinuteHand"
Template=
"{StaticResource ClockHandTemplate}"
>
<Control.RenderTransform>
<TransformGroup>
<RotateTransform Angle=
"180"
/>
<RotateTransform x:Name=
"ActualTimeMinute"
Angle=
"0"
/>
</TransformGroup>
</Control.RenderTransform>
</Control>
<!- 3. The hour hand ->
<Control Name=
"HourHand"
Template=
"{StaticResource ClockHandTemplate}"
>
<Control.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=
"1.7"
ScaleY=
"0.7"
/>
<RotateTransform Angle=
"180"
/>
<RotateTransform x:Name=
"ActualTimeHour"
Angle=
"0"
/>
</TransformGroup>
</Control.RenderTransform>
</Control>
All that remains is the transformation from
Canvas
to WPF coordinates, and the
timers for the animation, which set the
ActualTimeMinute
and
ActualTimeHour
values.
