Click here to Skip to main content
12,760,014 members (33,797 online)
Rate this:
Please Sign up or sign in to vote.
See more: C# Windows XAML Phone
Dear developers,

I've been looking on 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:[^]

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,

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 21:48pm
Updated 10-Nov-11 22:01pm
SAKryukov 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.
larssy1 11-Nov-11 2:57am
I'm sorry, I've updated the description.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 2

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);
 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);
 g.FillPath(filledBrush, filledGuage);
larssy1 11-Nov-11 9:15am
I doubt this will work, since WP7 doesn't have a System.Drawing library.
BobJanova 11-Nov-11 9:52am
Does it not have an equivalent? It must be possible to draw custom controls in some fashion.
BobJanova 11-Nov-11 9:57am
Looks like you can put a path in a XAML template, e.g. look at some of the more complex examples here: You should be able to apply a {Binding Value} expression to the angle on an arc.

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

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170217.1 | Last Updated 11 Nov 2011
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100