Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# Windows XAML Phone
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 21:48pm
larssy1367
Edited 10-Nov-11 22:01pm
v3
Comments
SAKryukov at 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 at 11-Nov-11 2:57am
   
I'm sorry, I've updated the description.

1 solution

Rate this: bad
good
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);
 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);
}
  Permalink  
Comments
larssy1 at 11-Nov-11 9:15am
   
I doubt this will work, since WP7 doesn't have a System.Drawing library.
BobJanova at 11-Nov-11 9:52am
   
Does it not have an equivalent? It must be possible to draw custom controls in some fashion.
BobJanova at 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: http://msdn.microsoft.com/en-us/library/ms751808.aspx. 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
0 OriginalGriff 490
1 Maciej Los 305
2 Richard MacCutchan 270
3 Mathew Soji 220
4 BillWoodruff 210
0 OriginalGriff 8,834
1 Sergey Alexandrovich Kryukov 7,477
2 DamithSL 5,689
3 Maciej Los 5,329
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web02 | 2.8.1411028.1 | Last Updated 11 Nov 2011
Copyright © CodeProject, 1999-2014
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