Windowscommunitytoolkit: Re-template RadialGauge to remove ViewBox (was: Setting RadialGauge Height and Width scales the text (Value and Unit))

[harvinders]

I'm submitting a bug

Current behavior

When setting the Height and Width of RadialGauge to say 100,

• the text is also scaled down.
• the result diagram looks not so sharp

Expected behavior

• The Value and Unit size should not change. Maybe it should also be possible to independently set font size for them if so desired.
• The gauge diagram should look sharp.

Minimal reproduction of the problem with instructions

<controls:RadialGauge
    Value="10000"
    Minimum="0" Maximum="40000" TickSpacing="2000"
    Unit="rpm"
    Height ="100" Width = "100"
    Header="Motor speed " />

Environment

### Nuget Package(s): 
Microsoft.Toolkit.Uwp.UI.Controls
### Package Version(s): 
3.0.0

Windows 10 Build Number:
- [ ] Creators Update (15063)
- [x] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Creators Update (15063)
- [x] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] Insider Build (xxxxx)

Device form factor:
- [x] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [x] 2017 (version: )
- [ ] 2017 Preview (version: )

[Bmartin2013]

Given the nature of the control, I don't think it'd be possible to keep the text of the value and unit at the configured text size. Maybe changing the design so that both the value and the unit are outside of the gauge, we could make them respect the text size regardless of the gauge scaling.

Does this image reproduce the issue correctly?

BTW, I couldn't get VS to recognize the header property, even with the packages from the 3.0.0 version. How did you use it?

[harvinders]

@Bmartin2013 Yes, the image is representative. The issue I have using the control as it is, is that 200x200 is too big for us and when I reduce the size to 150x150 the number becomes small, and does not go well with other controls.

Given the nature of the control, I don't think it'd be possible to keep the text of the value and unit at the configured text size.

Maybe, putting the text in the center and bringing it out of the ViewBox could help (up too an extent).

About Header, it was typo on my part. I am deriving another control to add header to the control. As you would have noticed most of the basic controls, from ComboBox to TextBox, has Header. I think adding a Header to control would also make sense if you have couple of gauges, header could help put a context to them, especially if the unit is same.

[Bmartin2013]

After looking into it, I think that changing the text layout could be a breaking change. Instead, we could add a property to the control in order to hide the default text, giving you the freedom to handle the text layout anyway you want. What do you think?

[nmetulev]

This control needs to be rewritten IMO, the entire layout depends on a single ViewBox that is causing these issues and needs to be removed. It's a breaking change, but I think it's for the better. Let's keep this issue open for tracking. Opening up to the community.

(P.S. In the meantime, you could re-template the control in your app directly and remove any properties not needed)

[avknaidu]

If this needs to be rewriten, @JerryNixon 's Speedometer Sample should be a good start

[harvinders]

@Bmartin2013 @nmetulev @avknaidu

While we are at refactoring/rewriting I think following should be consider .

1. Header for the control (just like common controls such as TextBox and ComboBox).
2. Radial gauge support 180 and ~300 degree view. Current control can be made to look like semi-circle but wastes space below.
3. Change size, without impacting the text size
4. Override text size if required for very small or very large gauges
5. Value text size same as standard controls.
6. Support Compact mode (that is expected in 1809). This and above point may translate to using proper ThemeResource
7. Support UIAutomation (currently Value and Unit are shown at the root level of application)

@nmetulev

In the meantime, you could re-template the control in your app directly and remove any properties not needed

This is precisely I am trying to do. I am taking above as requirements and working on it. One thing that I don't understand is the UI automation. See this related question on stack.

[mdtauk]

Whilst there is a consideration for re-thinking this Radial Gauge control, perhaps there should be some thought to having a default design which fits with the Microsoft Design Language, and Fluent design principles.

[Bmartin2013]

If we are going to redesign this control we should keep in mind high contrast accessibility, as currently, the control has issues with it.

[XamlBrewer]

I'm definitely in favor of a more fluent default look and feel. After all, the current version was specifically designed for Windows 8.

As far as templating concerns: it's easy to pull the text boxes out of the view box and override their font size (just did it: it still looks sharp at a size of 80). We could do this change in the toolkit, and add two more properties to the control: _ValueFontSize_ and _UnitFontSize_.

Initializing default colors from theme resources (including high contrast) is also something we could do. All default colors are hard-coded now.

[gbarcho]

Whats the current status?