How to build the next visual

Question

I am not a true designer, and I would like to know if anyone has an idea how I can create the following look:

The idea is to get 2 rings, where inside I will collect a gray amount of cake, presented as an “Interactive form or button”. Based on the number of figures, they should cover the whole circle.

In addition to this, I need to be able to interact with each pie shape, and the inner and outer edges of this shape should be an ideal arc based on the diameter of the circle.

As I am not a perfect designer, how can I present this visual? I thought of using a custom panel, but then how to draw each shape of the panel so that they become perfect inside and arc arcs and offer interactivity with each of them?

Thank you for your help. I would also appreciate the samples.

Answer 1

This is actually a Silverlight tutorial on creating something similar.

If you do not want to use this, you can always do this in javascript. Here is an example using Rapheal js

Answer 2

I would recommend exploring WPF Geometry and how you can create custom controls (such as "Custom Caliber Control" on CodeProject) using the specified geometry.

I never created a control similar to what you suggest, but I would like you to define some area that can contain children and style it so that it forms the circular shape that you want. Then adding interactive areas should be as simple as adding controls to standard containers.

Answer 3

Here is a link to "a common radial panel that can be used to place any elements" that subclasses Panel .