Best method to repeat a pattern declaratively
-
05-07-2019 - |
Question
I'm working on a little analog clock project to learn Silverlight, obviously when drawing the clock face there is a repeated pattern, all the examples I have seen actually repeat the xaml and just change the angle to get the entire face, but I'm wondering if there is a better/easier/shorter way to accomplish the same result declaratively (I know how this can be done programmatically)
This is what I have, it gets repeated after the second Canvas, being the angle the only difference
<Canvas Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="Black" Width="6" Height="8" Canvas.Top="1" Canvas.Left="47" RenderTransformOrigin="0.5,0.5" />
</Canvas>
<Canvas Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="Black" Width="6" Height="8" Canvas.Top="1" Canvas.Left="47" RenderTransformOrigin="0.5,0.5" />
<Canvas.RenderTransform>
<RotateTransform Angle="30"/>
</Canvas.RenderTransform>
</Canvas>
update: While the provided answers are on the right direction, they are not specific, plus they only address the specific scenario of the analog clock, as oppossed to the whole scope of repeating a pattern around a circle, I tried the code from the second answer and it almost gets me what I want, but I still need to figure out exactly how to get the hour/minute indicators, I have been trying and I get get lines around the circle, but not the ones in the pattern I need; so if someone comes along and gives me the specific answer I'll accept that, otherwise, I'll keep trying and will post the answer here
Solution
You could also use a Path to accomplish the same. Check out Charles Petzold's "All Xaml Clock."
<!-- Tick marks (small and large). -->
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 3.14157" />
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 7.854"
StrokeThickness="6" />
From http://www.charlespetzold.com/blog/2006/04/070132.html
Note that it's a WPF example.
OTHER TIPS
use a dash pattern with a thick ellipse. see the XAML here: http://code.msdn.microsoft.com/trainmaster and the app here.
Ball Trainmaster Cannonball Watch in Silverlight http://xmldocs.net/ball2/background.png