Click here to Skip to main content
13,248,107 members (35,431 online)
Click here to Skip to main content
Add your own
alternative version

Stats

9.2K views
220 downloads
9 bookmarked
Posted 9 Dec 2015

XAML GaugeControl (VS2015)

Rate this:
Please Sign up or sign in to vote.
XAML Gauge Control for Universal Applications, Windows 8.1 (Desktop/Windows Phone), WPF, Silverlight

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Luis Manuel Prospero Mano Batista
Software Developer (Senior) Self employed
Portugal Portugal
No Biography provided

You may also be interested in...

Comments and Discussions

 
AnswerSource Code Pin
johnbillsmith11-Dec-15 12:19
memberjohnbillsmith11-Dec-15 12:19 
QuestionScreenshot Pin
Dirk Bahle10-Dec-15 12:11
memberDirk Bahle10-Dec-15 12:11 
QuestionSource Code Pin
johnbillsmith10-Dec-15 2:47
memberjohnbillsmith10-Dec-15 2:47 
AnswerRe: Source Code Pin
Luis Manuel Prospero Mano Batista10-Dec-15 4:30
professionalLuis Manuel Prospero Mano Batista10-Dec-15 4:30 
AnswerRe: Source Code Pin
Luis Manuel Prospero Mano Batista10-Dec-15 4:33
professionalLuis Manuel Prospero Mano Batista10-Dec-15 4:33 
AnswerRe: Source Code Pin
Luis Manuel Prospero Mano Batista10-Dec-15 5:01
professionalLuis Manuel Prospero Mano Batista10-Dec-15 5:01 
Question3 - Not enough content here Pin
Kevin Marois9-Dec-15 13:56
professionalKevin Marois9-Dec-15 13:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 10 Dec 2015
Article Copyright 2015 by Luis Manuel Prospero Mano Batista
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid