venturesjae.blogg.se - Ctrl paint composition

#Ctrl paint composition how to#
#Ctrl paint composition windows 8#

For the elements that are drawn by the Composition API, it’s simple: there’s no markup available for them (yet?), so they will always be drawn in code-behind.

#Ctrl paint composition how to#

Here’s how to decide what elements to put in the style. All internal calculations are conveniently done against that 200×200 grid, but the ViewBox will stretch the gauge to any size: We defined the radial gauge control as a 200 by 200 pixels grid, inside a ViewBox. The generic.xaml file is a XAML ResourceDictionary that contains the default style with the ControlTemplate for the custom control – it can be overridden. The RadialGauge class inherits from Control, and comes with a Style definition the Themes/Generic.xaml file. In Visual Studio 2015, we created a class library and added a new item of the type ‘templated control’. On top of that, the control is templatable: a developer can hook the gauge to a custom template (provided or not by a designer) as long as some requirements are met. Using the gauge on a page should be as easy as the following one-liner:

UnitBrush: color of the unit measure text (Brush).

ValueBrush: color of the value text (Brush).

TrailBrush: color of the trail following the needle (Brush).

ScaleTickBrush: color of the ticks on the scale (SolidColorBrush).

ScaleBrush: background color of the scale (Brush).

ScaleWidth: thickness of the scale in pixels – relative to the control’s default size (double, default 26).

TickBrush: color of the outer ticks (SolidColorBrush).

NeedleBrush: color of the needle (SolidColorBrush).

TickSpacing: spacing -in value units- between ticks (int).

ValueStringFormat: StringFormat to apply to the displayed value (string).

Value: the value to represent (double, default 0).

Maximum: maximum value on the scale (double, default 100).

Minimum: minimum value on the scale (double, default 0).

Here’s the list of properties that are defined in the actual control: Here’s an overview of the important UI parts of the Modern Radial Gauge:

A radial gauge is a gauge that looks like an analog clock – so it comes with things like a Scale, Ticks, and a Needle. The screenshot proves why it’s time for a new version, and why we could use some help from the Composition API:Ī gauge is an indicator that displays a value within a range – so it needs to have things like Minimum, Maximum, Value, and probably a Unit. As a result the radial gauge does not look crisp anymore in every size and resolution.

We noticed that on some screens, the rotations and translations of the XAML elements are starting to suffer from rounding errors. Over the last couple of years, device screens have improved and the XAML engine was adapted to run on more and more platforms.

#Ctrl paint composition windows 8#

The ‘old’ gauge goes back to early versions of Windows 8 and the continuous upgrades to more recent platforms have stretched its limits. Unfortunately its implementations are not as timeless. The design of this radial gauge is timeless, thanks to Arturo Toledo.

The ‘old’ full-XAML gauge is on the left, the new version is on the right:

We’ll build yet another new version of the Modern Radial Gauge. In this article we’ll build a custom UWP control that will be drawn partly by the XAML engine and partly by the Composition API.