Embedding text in pointer knobs

Gauge for WPF Forum

Posted 10 years ago by D
Version: 4.5.0480
Avatar
I downloaded the latest build of WPF Studio today because of the additional features added to gauge. One feature I'm trying to make use of is the interactive circular gauge. Specifically, I want to make a knob (I customized the needle knob to look like a circle) that can be turned by dragging the mouse across it. I've done this, but when the knob turns, I need to have text that is on the knob to turn with it. Is there any way to embed text and paths (like an arrow illustration) onto pointer needles, or knobs, and have them move with the knob itself?

Comments (10)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
I'm assuming you customized the pointer using a custom Geometry. If so, then you can use a GeometryGroup or CombinedGeometry to create more complex objects.

Embedding text is also possible, but I don't believe you can do it through XAML alone. You would need to construct your Geometry object using code-behind and set the pointer's Geometry property.

The following link shows how a Geometry (which can be combined or grouped with your circle) can be generated from text: http://blogs.msdn.com/wpfsdk/archive/2006/12/24/using-text-as-a-decorative-graphic.aspx


Actipro Software Support

Posted 10 years ago by D
Avatar
Yes, I was using custom geometry for my needle...haven't gotten it quite the way I'd like it yet. It would be nice if I could just go into Expression Blend and add what I want to the needle, but it doesn't work the way I'd like that way.

I would like to make a suggestion that you add easy access for adding text to needles in the future. Inevitably, some knob on a control somewhere will have lettering (and designs...I have both!) on it, so it would be a nice addition to be able to easily add such lettering to the needle. I feel that it would be absolutely necessary to give this additional flexibility to customizing the pointer needles.

That said, I'm very happy just to have seen the additional interactivity that your circular gauge now possesses.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
You might be able to accomplish the desired look using a CircularTickLabelCustom. You would need to:

1. Add a CircularTickLabelCustom, and set it's Text property to what you want.
2. Bind the Value property to the DisplayValue of the associated needle.
3. Move the label up in the z-order, so it's on top of the needle. This can be done by setting the ZIndex property to 1 (assuming you don't use z-index feature yet).

This should move the label and it's value along with the needle. Best of all, this would allow the text to either rotate with the need to to always remain horizontal (based on TextOrientation).


Actipro Software Support

Posted 10 years ago by D
Avatar
That works great for my text. I set the TextOrientation to "Rotated" and adjusted the ScaleOffset so that the text would center on the needle. This is definitely something good to know for when I start working on some more complex gauges.

I'm still trying to figure out how to draw a line and a basic shape over the needle face so that I can have what appears to be an arrow. I'm not entirely sure how to do that yet. Is it even possible to use CustomGeometry to draw something onto the needle face, and have it be a different color than the actual needle? I haven't seen a CustomGeometry example for this yet, but I'm about to start looking.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
You wouldn't be able to use a different color in a single geometry in a single pointer. But you could use multiple pointers to accomplish that also. You would:

1. Add your knob pointer on the bottom
2. Add another pointer (with your arrow) on top of that
3. Bind the Value of the arrow pointer to the DisplayValue of the knob
4. You should probably set DampeningMaximumDuration to 0 for your arrow pointer, since it does not need to animate itself


Actipro Software Support

Posted 10 years ago by D
Avatar
Okay, I think I see what you're saying: use CustomGeometry to make a pointer that looks like an arrow, then bind the data and display appropriately.

I was thinking something similar, but my idea involved drawing the shape the way I wanted, then binding that shape to the pointer value. Unfortunately, that idea won't work without a value converter of some sort. That would seem a little complicated as a first attempt (the best way usually is the simplest), so I'll start with your suggestion. I'll post an update once I figure out how to draw my shape...I'm no master of geometries.
Posted 10 years ago by D
Avatar
I can get this to work with two pointers...sort of. What I've done so far:
-I drew an arrow in Expression Blend.
-I copied the Data from that path and pasted it into a CustomGeometry needle.

My arrow looks exactly the way I want it to, but it is centered on top of the knob, otherwise known as the "other needle." No matter how I adjust the arrow on top of this knob (it would seem like the capability to use ScaleOffset would make this work correctly, but it doesn't), it doesn't move the way it should. Instead, the arrow rotates around its own center point, from what I can tell. So if I place the arrow needle, for example, above the text (which is centered) on my knob needle, they rotate together, but the arrow is just rotating outside of the visible bounds of its "containing" knob. I hope that makes sense.

In order for me to get the look I want (arrow at top of knob, text in center, both rotating around the same center point), I have to adjust the PointerAscent and PointerExtent. This works with the exact rotation pattern I need...but the arrow ends up all stretched out and much thicker than I want.

I think this is mostly a problem with how I have the CustomGeometry configured...admittedly, this isn't easy, at least not to me. Drawing anything semi-complex with geometries looks like a very difficult thing without a graphic-drawing program. So I'm not sure how to fix that part...whatever I draw by manual coding always looks much better when I attempt to draw it in a program like Expression Blend. What would be extremely nice is if I could just adjust the ScaleOffset for this arrow needle and have it rotate as needed that way...but I can't.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
You should probably use a CircularPointerMarker instead. This pointer allows custom geometries as well, but follows the scale bar and has a ScalePlacement/Offset.


Actipro Software Support

Posted 10 years ago by D
Avatar
So far I've determined that the needle likes to be located at the center of the scale. Moving it around produces some strange results, even when ScaleOffset is used. I've adjusted my drawing so that the right part of the arrow is pointing to the right value on the gauge tickmarks that I have set up. I figured that was an issue with the geometries, but not exactly an obvious one when you're just sticking geometry data into the XAML code.

I've also determined that ScaleOffset doesn't seem to be helping as I had thought it would. It just seems to make it more difficult to adjust the arrow, as far as I can tell. Making the arrow into another PointerNeedle seems to work best...I just can't get it out of the center of the gauge. It looks perfect at the center, but I need it at the top. Adjusting the vertical alignment doesn't fix this issue, I can't seem to specify any transforms or coordinates without interfering with how the arrow moves, you get the idea. I've looked at the Flight Simulation example in your sample browser for some guidance...the needles (the rectangles) on the Compass Gauge seem to do something similar to what I want...I just want to do it with a geometry path, not rectangles. This has to be possible somehow...I just haven't figured out that part yet.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
If you can email over a sample of your gauge to our support address then we can take a look.


Actipro Software Support

The latest build of this product (v2018.1 build 0675) was released 14 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.