How to Build a Gauge Control for Universal Windows App

In this tutorial I will show you how to build a Gauge Control for your Universal Windows App. This is how it looks.

Here are the steps to building a custom Gauge control for your universal Windows app:

Step 1: Add Gauge class in the Shared Project

Add Gauge class to Controls folder in the Shared project. Replace the empty Gauge class with the following code.

Step 2: Add a Reference to Controls Directory in MainPage.xaml

Add a xmlns reference to Controls directory in MainPage.xaml.

Step 3: Add the Style for Gauge Control in Page Resources

Now add the style for Gauge control in <Page.Resources></Page.Resources>.

Instead of adding the Style in MainPage.xaml you could add the Style in SharedResources.xaml folder. Follow our tutorial on Shared theme resources to see how to use shared resources in universal Windows Apps.

Using Shared Theme Resources in Universal Windows Apps.

Step 4: Add the XAML for Gauge Control in the Page

Now simply use the Gauge control in your page.

Deploy the app to see if it works.

Feel free to download the source code for reference or clone it from Github.

Download full project Gauge.zip

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close