Question

So Here is the Problem, I am trying to get that circle to align on the number. When I do that in blend it shows me I have a Left (23), I try to do that programmaticly Canvas.SetLeft(thePanel,23) it overshoots. Better yet, if anyone knows of a control like this in silverlight let me know. What this does is when the user clicks on a number the green circle is suppose to go to that number so it looks like the user has selected it.

Answer 1

On your Circle object you have to set the Radius of the circle and the TranslateTransform attribute. Lets say your Circle has a radius of 15:

private const double Radious = 15.0;

private double _x = Radious;
private double _y = Radious;

private TranslateTransform _translation = new TranslateTransform();

and properties to handle the Circle’s X and Y coordinates,

public double X
    {
        get { return this._x; }
        set
        {
            this._x = value;
            _translation.X = this._x - Radious;
        }
    }

    public double Y
    {
        get { return this._y; }
        set
        {
            this._y = value;
            _translation.Y = this._y - Radious;
        }
    }

and in Silverlight you can get where the user has clicked on a Canvas, setting this code on the Click Event of the panel, and set the center of the circle to where the user has clicked:

//Get the points where it was clicked
Point clickPoint = e.GetPosition(Canvas);

MyCircle.X = clickPoint.X;
MyCircle.Y = clickPoint.Y;

Now, if you want them to always fall in fixed positions, you can set conditions that, if a user clicks around a number, then set the center of the circle to the center of the number, or just change the X value of your circle to move to the desired position.