Silverlight design – Creating a segmented Arc

by SeuJogo 8. August 2010 23:11

It is fun to create a basic shape, which can be used in a larger scene. For example, I created a usercontrol to present an arc bow with arc segments.

This control has uses two parameters, “Radius” and “Thickness”. With Radius I can make the outer part of the circle larger, which drags the inner part of the circle with it.

As you can see, the Radius has now a larger number and the arc is bigger. With the Thickness parameter I can decrease the size of the inner circle part.

Both parameters are dependency properties, so that they can be used in a Storyboard. It is not very hard to create this control. It is actually a list of 6 arc segment controls, with the correct rotation and position settings. The Radius and Thickness parameters are both wired to all these 6 arc segment controls.

Make sure to use the Nerd Plus Art Silverlight code snippets for Dependency Properties. I used the “sldpc” macro to create the Dependency Properties for the Radius and Thickness parameters. In the change handler, the new value assigned to one of the parameters will be propagated to the whole list of arc segments.

So really, all the magic is in the arc segment control.

The arc segment is a Path geometry, and it is created in Visual Studio. This is a XAML snippet for the arc:

<Path x:Name="FillObject" Stroke="Black" StrokeThickness="1">
                <PathGeometry >
                        <PathFigure x:Name="StartPoint" StartPoint="100,0" IsClosed="True">
                                <ArcSegment x:Name="OuterArc" Point="86,-50" Size="100,100" SweepDirection="Counterclockwise" IsLargeArc="False"/>
                                <LineSegment x:Name="ToInnerArc" Point="77.94, -45" />
                                <ArcSegment x:Name="InnerArc" Point="90,0" Size="90,90" SweepDirection="Clockwise" IsLargeArc="False"/>


Notice the usage of x:Name. Naming the path figure segments gives you control over these segments. You need to be careful when working in Blend, because Blend converts these segments into Path data, and you lose all x:Name declarations and control over your shape.



The Arc control has three parameters to control it, all are Dependency Properties: Radius, Angle and Thickness. Radius and Thickness ofcourse work as described above. Angle sets the angle between the x-axis and the end of the arc, where a positive angle starts in quadrant 1 (upper-right).

Each time one of the parameters is changed, the shape is recalculated. When angle is larger than 180, the “IsLargeArc” parameter is set to true.

For the finishing touch, the UserControl’s properties “Fill” and “Stroke” are rewired to our shape:

     public new Brush Fill
                return FillObject.Fill;
                FillObject.Fill = value;


        public new Brush Stroke
                return FillObject.Stroke;
                FillObject.Stroke = value;

Now all coloring of the shape can be done in Blend, using the common features for this, including the gradient tool.

What is it good for? Well, I thought the segmented arc could give a radar-like effect, to draw attention to a new enemy, entering the playfield of a game.




Tags: , , ,


Comments are closed

Powered by BlogEngine.NET

About the author

SeuJogo is portugese for "Your Game". After contributing to several websites, the day had come for my own site. It has been my passion to create games for many years. Microsoft Silverlight became the right tool to pick up an old hobby.

Month List