I remembered seeing a clock app in the Petzold book, and I needed to make a spinning “I’m working…” indicator. It’s a fairly good book, although I’ve only read a small bit of it. So I looked back in it and found the clock app. It’s a nice simple clock app, but the source code was not quite right. After fixing the hour hand shape, which Charles or I got backwards, and after fixing the misplaced commas in the <Path> element Data attribute, the clock worked great.
I found it interesting how the code used a built in “screen is redrawing” event to handle the hand movement. The hands are not actually drawn, a path is defined for them and the path is rotated using a rotate transform. The angle is what gets changed every time the event is triggered. The code will make it all clear, hence the lack of exact class names, event names, and any other object names.
The code is fairly simple. I created a class derived from UserControl and created the clock graphics in the xaml file. There is nothing very interesting here, although I did cheat a little by making the clock a fixed size. The TranslateTransform is there so that the center of the clock can be the 0,0 coordinate. The cs file has a function that handles updating the position of the hands. What is not shown is the main page code where this function is called. A user control is not a rendering target so it does not have the CompositionTarget.Rendering event.
Now on to what I really needed; a spinner…
The code above differs from the clock code in that the animation is accomplished using a Storyboard. One important point is that it seems to be impossible to use a VisualStateGroup to start the animation. User controls don’t seem to respond to state changes properly, or normally. I’m not sure if this is a bug, a feature, or a misunderstanding. Anyhow, the constructor for the control starts the animation.
There is comment in the xaml file about how to compute the hashed line length numbers. It’s a little odd, but it works as expected.
I don’t have a video of this running. it just spins around slowly at about 20 RPM, or about 3 seconds per revolution.
I hope that these code bits help anyone who might need a quick spinning/animating user control, or a clock!