XAML GaugeControl (VS2015)

• Download source code - 3.9 MB

Introduction

I needed a Gauge control for WPF and decided to create a control that works not only on WPF, but also on all the plataforms they use, so far, the XAML technology. I came across several compatibility issues between them which I will try to explain how I overtook.

Using the code

Using the Visual Studio Community 2015, I created a solution based on Windows 10 Applications named "GaugeApp" and the project named "GaugeAppTest", then I added a class library named "GaugeCustomControl". Immediately, I added to the various platforms (WPF, Silverlight, Windows 8.1) a project with the same name, and a class library. And I began the development of the control. 0 I added a TemplateControl named "Gauge.cs" derived from "Control" and I found the first compatibility issue: We can not use DependecyPropertyKey. No problem with that, normally we use that when we have ReadOnly properties, so I used the DependecyProperty like this:

public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register("Radius", typeof(Double), typeof(Gauge));

[EditorBrowsable(EditorBrowsableState.Never)]
public Double Radius
{
    get
    {
        return (Double)GetValue(RadiusProperty);
    }
    private set
    {
        SetValue(RadiusProperty, value);
    }
}

I found another compatibility issue: We can only use, on DependecyProperty, PropertyMetadata and we cannot use UIPropertyMetadata, neither FrameworkPropertyMetadata like in WPF and also PropertyMetadata doesn't have CoerceValueCallback. Once again, no probem with that, PropertyMetadata its enough for our purpose.

One more compatibility issue: On WPF static constructor we assign the default style like this:

static Gauge()
{
#if WPF
    DefaultStyleKeyProperty.OverrideMetadata(typeof(Gauge), new FrameworkPropertyMetadata(typeof(Gauge)));
#endif
}

And on Windows 10, Windows 8.1 and Silverlight applications we assign the default style in this way:

public Gauge()
{
#if !WPF
    DefaultStyleKey = typeof(Gauge);
#endif
}

I found more compatibility issues but you can review the code because I use the Conditional Compilation Symbols WPF and SILVERLIGHT in the "Gauge.cs". After that I added a ResourceDictonary named "Gauge.xaml" to styling the control. And again more compatibility issues: In WPF and Silverlight

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:local="clr-namespace:Microsoft.UI.Xaml.Controls" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <datatemplate x:key="GaugeScaleDataTemplate">
        <rectangle fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=local:Gauge}}" height="{Binding Height}" width="{Binding Width}">
            <rectangle.rendertransform>
                <transformgroup>
                    <translatetransform x="{Binding TransformX}" y="{Binding TransformY}">
                    <rotatetransform angle="{Binding Angle}">
                </rotatetransform>
            </translatetransform>
        </transformgroup>
    </rectangle.rendertransform>
</rectangle>
</datatemplate></resourcedictionary>

In Windows 10 and Windows 8.1

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:local="using:Microsoft.UI.Xaml.Controls" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <datatemplate x:key="GaugeScaleDataTemplate">
        <rectangle fill="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" height="{Binding Height}" width="{Binding Width}">
            
        </rectangle>
    </datatemplate>
</resourcedictionary>

Also we need to remember that we can only use {x:Type local:Gauge} in WPF

And when I added this ResourceDictonary to "Generic.xaml" In WPF and Silverlight

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <resourcedictionary.mergeddictionaries>
        <resourcedictionary source="/GaugeCustomControl;component/UI/Xaml/Control/Gauge.xaml">
    </resourcedictionary>
</resourcedictionary.mergeddictionaries>
</resourcedictionary>

In Windows 10 and Windows 8.1

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <resourcedictionary.mergeddictionaries>
        <resourcedictionary source="ms-appx:///GaugeCustomControl/UI/Xaml/Controls/Gauge.xaml">
    </resourcedictionary>
</resourcedictionary.mergeddictionaries>
</resourcedictionary>

I hope this can help to anyone who tries to do the same