Simple looking semi gauge for Windows Phone

Question

1.00/5 (1 vote)

See more:

Dear developers,

I've been looking on CodeProject.com for semi-gauge controls.
However, what i noticed is that so far actually every gauge control is more advanced then i require.

Therefore, I'm wondering if it takes a lot of time to create a simple gauge control shown as the following:
http://imageshack.us/photo/my-images/252/gauge.png/[^]

I hope one of you already have a control which is being displayed like this.
Please note that this object will be used within Windows Phone.

Yours Sincerely,
Lars

----------------
This control is being used for something like Modern Warfare Elite (CoD stats).

The max value is based on the games played which is 100%.
The blue bar (displaying the percentage) is the amount of won rounds.

There are no other special behaviours neccesary but would be nice, since people can only refresh their API twice a day.

---

another behaviour of the object could be that it's calculate like totalrounds / wonrounds which would display 1.6 or something, where one is 50% = even.

Posted 10-Nov-11 20:48pm

larssy1

Updated 10-Nov-11 21:01pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 11-Nov-11 2:50am

What's the use of this picture if you did not explain what do you want this control to do? Behavior.
--SA

larssy1 11-Nov-11 2:57am

I'm sorry, I've updated the description.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

BobJanova · Answer 1 · 2011-11-11T02:48:00

This seems like it should be utterly trivial, it's just two paths each of which includes two lines and two arcs. I haven't actually done it in WPF, since I mostly work in WinForms, but assuming you can paint a custom control it is nothing more than (half way to pseudocode)

protected override void OnPaint(Graphics g){
 float cx = Width / 2, r = cx * 0.95f, cy = Height - 10, rinner = r * 0.6f;
 GraphicsPath unfilledGuage = new GraphicsPath();
 unfilledGuage.AddArc(cx - r, cy - r, r * 2, r * 2, -180, 180);
 unfilledGuage.AddArc(cx - rinner, cy - rinner, rinner * 2, rinner * 2, 0, -180);
 unfilledGuage.CloseFigure();
 g.FillPath(unfilledBrush, unfilledGuage);

 float angle = 180 * (Value / Max);

 GraphicsPath filledGuage = new GraphicsPath();
 filledGuage.AddArc(cx - r, cy - r, r * 2, r * 2, -180, angle);
 filledGuage.AddArc(cx - rinner, cy - rinner, rinner * 2, rinner * 2, -(180 - angle), -angle);
 filledGuage.CloseFigure();
 g.FillPath(filledBrush, filledGuage);
}