Universal Windows Platform – Gauge Control

Gauge Control demonstrates how to create a Gauge Control

Step 1

If not already, follow Setup and Start on how to Install and get Started with Visual Studio 2017 or in Windows 10 choose Start, and then from the Start Menu find and select Visual Studio 2017.

Step 2

Once Visual Studio Community 2017 has started, from the Menu choose File, then New then Project…

Step 3

From New Project choose Visual C# from Installed, Templates then choose Blank App (Universal Windows) and then type in a Name and select a Location and then select Ok to create the Project

Step 4

Then in New Universal Windows Project you need to select the Target Version this should be at least the Windows 10 Fall Creators Update (10.0; Build 16299) and the Minimum Version to be the same.

The Target Version will control what features your application can use in Windows 10 so by picking the most recent version you’ll be able to take advantage of those features. To make sure you always have the most recent version, in Visual Studio 2017 select Tools Extensions and Updates… then and then see if there are any Updates

Step 5

Once done select from the Menu, Project, then Add New Item…

Step 6

From the Add New Item window select Visual C#, then XAML from Installed then select User Control from the list, then type in the Name as Gauge.xaml before selecting Add to add the file to the Project

Step 7

Once in the Design View for Gauge.xaml between the Grid and /Grid elements the following should be entered:

<Viewbox>
	<Canvas Name="Display" Height="300" Width="300" Loaded="Display_Loaded"/>
</Viewbox>

In the Gauge.xaml a Canvas has been defined, this will be where the Gauge itself will appear within.

Step 8

From the Menu choose View and then Code

Step 9

Once in the Code View, below the end of public Gauge() { … } the following Code should be entered:

private Windows.UI.Xaml.Shapes.Rectangle _needle;
private int _needleWidth = 2;
private int _needleLength = 0;
private double _diameter = 0;
private bool _initialised = false;

private TransformGroup TransformGroup(double angle, double x, double y)
{
	TransformGroup transformGroup = new TransformGroup();
	TranslateTransform firstTranslate = new TranslateTransform()
	{
		X = x,
		Y = y
	};
	transformGroup.Children.Add(firstTranslate);
	RotateTransform rotateTransform = new RotateTransform()
	{
		Angle = angle
	};
	transformGroup.Children.Add(rotateTransform);
	TranslateTransform secondTranslate = new TranslateTransform()
	{
		X = _diameter / 2,
		Y = _diameter / 2
	};
	transformGroup.Children.Add(secondTranslate);
	return transformGroup;
}

private void Indicator(int value)
{
	Init(ref Display);
	double percentage = (((double)value / (double)Maximum) * 100);
	double position = (percentage / 2) + 5;
	_needle.RenderTransform = TransformGroup(position * 6,
	-_needleWidth / 2, -_needleLength + 4.25);
}

private void Init(ref Canvas canvas)
{
	canvas.Children.Clear();
	_diameter = canvas.Width;
	double inner = _diameter;
	Windows.UI.Xaml.Shapes.Ellipse face = new Windows.UI.Xaml.Shapes.Ellipse()
	{
		Height = _diameter,
		Width = _diameter,
		Fill = Fill
	};
	canvas.Children.Add(face);
	Canvas markers = new Canvas()
	{
		Width = inner,
		Height = inner
	};
	for (int i = 0; i < 51; i++)
	{
		Windows.UI.Xaml.Shapes.Rectangle marker = new Windows.UI.Xaml.Shapes.Rectangle()
		{
			Fill = Foreground
		};
		if ((i % 5) == 0)
		{
			marker.Width = 4;
			marker.Height = 16;
			marker.RenderTransform = TransformGroup(i * 6, -(marker.Width / 2),
			-(marker.Height * 2 + 4.5 - face.StrokeThickness / 2 - inner / 2 - 16));
		}
		else
		{
			marker.Width = 2;
			marker.Height = 8;
			marker.RenderTransform = TransformGroup(i * 6, -(marker.Width / 2),
			-(marker.Height * 2 + 12.75 - face.StrokeThickness / 2 - inner / 2 - 16));
		}
		markers.Children.Add(marker);
	}
	markers.RenderTransform = new RotateTransform()
	{
		Angle = 30,
		CenterX = _diameter / 2,
		CenterY = _diameter / 2
	};
	canvas.Children.Add(markers);
	_needle = new Windows.UI.Xaml.Shapes.Rectangle()
	{
		Width = _needleWidth,
		Height = (int)_diameter / 2 - 30,
		Fill = Foreground
	};
	canvas.Children.Add(_needle);
	Windows.UI.Xaml.Shapes.Ellipse middle = new Windows.UI.Xaml.Shapes.Ellipse()
	{
		Height = _diameter / 10,
		Width = _diameter / 10,
		Fill = Foreground
	};
	Canvas.SetLeft(middle, (_diameter - middle.ActualWidth) / 2);
	Canvas.SetTop(middle, (_diameter - middle.ActualHeight) / 2);
	canvas.Children.Add(middle);
}

public static readonly DependencyProperty FillProperty =
DependencyProperty.Register("Fill", typeof(Brush),
typeof(Gauge), null);

public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(double), typeof(Gauge),
new PropertyMetadata(25));

public static readonly DependencyProperty MinimumProperty =
DependencyProperty.Register("Minimum", typeof(int), typeof(Gauge),
new PropertyMetadata(0));

public static readonly DependencyProperty MaximumProperty =
DependencyProperty.Register("Maximum", typeof(int), typeof(Gauge),
new PropertyMetadata(100));

public Brush Fill
{
	get { return (Brush)GetValue(FillProperty); }
	set { SetValue(FillProperty, value); }
}

public int Value
{
	get { return (int)GetValue(ValueProperty); }
	set
	{
		if (value >= Minimum && value <= Maximum)
		{
			SetValue(ValueProperty, value);
			Indicator(value);
		}
	}
}

public int Minimum
{
	get { return (int)GetValue(MinimumProperty); }
	set { SetValue(MinimumProperty, value); }
}

public int Maximum
{
	get { return (int)GetValue(MaximumProperty); }
	set { SetValue(MaximumProperty, value); }
}

private void Display_Loaded(object sender, RoutedEventArgs e)
{
	Indicator(Value);
}

Below the Gauge() Method are the Members that make up the various elements of the Gauge. The TransformGroup Method is used by Indicator to help position a Rectangle Control that will be the indicator or Needle of the Gauge. Init is used to create the look-and-feel of the control which is made up of a filled Ellipse Control for the background plus an Array of Markers made up of Canvas Controls that will make up the outer-dial of the Gauge. There are some Dependency Properties for the Control including Fill to set the Background of the Gauge, Value to set the position of the Indicator plus Minimum and Maximum which are used to set the beginning and end values possible. Display_Loaded is used to set the initial gauge look-and-feel and the indicator position.

Step 10

Once done select from the Menu, Build, then Build Solution

Step 11

In the Solution Explorer select MainPage.xaml

Step 12

From the Menu choose View and then Designer

Step 13

The Design View will be displayed along with the XAML View and in this between the Grid and /Grid elements, enter the following XAML:

<local:Gauge Margin="50" Value="25" Foreground="WhiteSmoke" Fill="{ThemeResource SystemControlHighlightAccentBrush}"/>

The block of XAML represents the Gauge Control and it will be displayed in the Designer along with the indicated Value.

Step 14

That completes the Universal Windows Platform Application so Save the Project then in Visual Studio select the Local Machine to run the Application

Step 15

After the Application has started the Application should then appear displaying the Gauge Control with the Value indicated

Step 16

To Exit the Application select the Close button in the top right of the Application