Today we are going to create a circular Dial (knob) for windows Phone 8, as we know that there isn’t much out there that is similar to a dial control for windows Phone, and sometimes we are in need of one, I believe after this tutorial, this would be resolved and developers would use them in the applications.
The sole purpose behind this tutorial is to have the ability to create immersive user experience, and eye-catching applications, and this might help in achieving that.

Open Visual studio and create a blank windows Phone Application, name the project and click OK

 

Right click on the Solution of the solution Explorer > Add > New Project

Select Windows Phone Class Library and Name it Dial

 

Once the other project is created, you are going to see a cs file by the name Class1. Select this and from the properties change the name to Dial

 

A Pop up is going to appear, asking to rename all the references in the Project, click YES

 

Right click the Dial project and select Add > New Folder, Name it Themes

 

Right click on the Themes Folder and select Add > New Item, Select Text File and Name it Generic.xaml

 

In The XAML pane, type the following Code

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:Dial">

<Style TargetType="local:Dial">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:Dial">

<Grid x:Name="Knob">

<ContentPresenter x:Name="DialFace" Content="{TemplateBinding Face}"/>

<ContentPresenter x:Name="DialKnob" Content="{TemplateBinding Knob}" RenderTransformOrigin="0.5,0.5">

<ContentPresenter.RenderTransform>

<TransformGroup>

<RotateTransform x:Name="DialValue" Angle="0"/>

</TransformGroup>

</ContentPresenter.RenderTransform>

</ContentPresenter>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

 

Double click Dial.cs and add the following code in it.

namespace Dial

{

public class Dial : Control

{

Grid _knob;

RotateTransform _value;

bool _hasCapture = false;



public static readonly DependencyProperty ValueProperty =

DependencyProperty.Register("Value", typeof(double),

typeof(Dial), null);



public static readonly DependencyProperty MinimumProperty =

DependencyProperty.Register("Minimum", typeof(double),

typeof(Dial), null);



public static readonly DependencyProperty MaximumProperty =

DependencyProperty.Register("Maximum", typeof(double),

typeof(Dial), null);



public static readonly DependencyProperty KnobProperty =

DependencyProperty.Register("Knob", typeof(UIElement),

typeof(Dial), null);



public static readonly DependencyProperty FaceProperty =

DependencyProperty.Register("Face", typeof(UIElement),

typeof(Dial), null);



public double Value

{

get { return (double)GetValue(ValueProperty); }

set { SetValue(ValueProperty, value); }

}



public double Minimum

{

get { return (double)GetValue(MinimumProperty); }

set { SetValue(MinimumProperty, value); }

}



public double Maximum

{

get { return (double)GetValue(MaximumProperty); }

set { SetValue(MaximumProperty, value); }

}



public UIElement Knob

{

get { return (UIElement)GetValue(KnobProperty); }

set { SetValue(KnobProperty, value); }

}



public UIElement Face

{

get { return (UIElement)GetValue(FaceProperty); }

set { SetValue(FaceProperty, value); }

}



double AngleQuadrant(double width, double height, Point point)

{

double radius = width / 2;

Point centre = new Point(radius, height / 2);

Point start = new Point(0, height / 2);

double triangleTop = Math.Sqrt(Math.Pow((point.X - centre.X), 2)

+ Math.Pow((centre.Y - point.Y), 2));

double triangleHeight = (point.Y > centre.Y) ?

point.Y - centre.Y : centre.Y - point.Y;

return ((triangleHeight * Math.Sin(90)) / triangleTop) * 100;

}



double GetAngle(Point point)

{

double diameter = _knob.ActualWidth;

double height = _knob.ActualHeight;

double radius = diameter / 2;

double rotation = AngleQuadrant(diameter, height, point);

if ((point.X > radius) && (point.Y <= radius))

{

rotation = 90.0 + (90.0 - rotation);

}

else if ((point.X > radius) && (point.Y > radius))

{

rotation = 180.0 + rotation;

}

else if ((point.X < radius) && (point.Y > radius))

{

rotation = 270.0 + (90.0 - rotation);

}

return rotation;

}



private void SetPosition(double rotation)

{

if (Minimum > 0 && Maximum > 0 && Minimum < 360 && Maximum <= 360)

{

if (rotation < Minimum) { rotation = Minimum; }

if (rotation > Maximum) { rotation = Maximum; }

}

_value.Angle = rotation;

Value = rotation;

}



public Dial()

{

this.DefaultStyleKey = typeof(Dial);

}



public override void OnApplyTemplate()

{

base.OnApplyTemplate();

_knob = ((Grid)GetTemplateChild("Knob"));

_value = ((RotateTransform)GetTemplateChild("DialValue"));

if (Minimum > 0 && Minimum < 360) { SetPosition(Minimum); }

_knob.MouseLeftButtonUp += (object sender, MouseButtonEventArgs e) =>

{

_hasCapture = false;

};

_knob.MouseLeftButtonDown += (object sender, MouseButtonEventArgs e) =>

{

_hasCapture = true;

SetPosition(GetAngle(e.GetPosition(_knob)));

};

_knob.MouseMove += (object sender, MouseEventArgs e) =>

{

if (_hasCapture)

{

SetPosition(GetAngle(e.GetPosition(_knob)));

}

};

_knob.MouseLeave += (object sender, MouseEventArgs e) =>

{

_hasCapture = false;

};

}

}



}

 

Build the Solution by Pressing F6

When the Build is completed, return to the MainPage.XAML Designer by double clicking on it.

Add the Following line on the top of the XAML

 

xmlns:my="clr-namespace:Dial;assembly=Dial"

From the Toolbar, Add Dial onto the Stage.

And change the XAML between the Content Grid  to this,

<my:Dial x:Name="Dial" Height="400" Width="400" Minimum="0.0" Maximum="360.0">

<my:Dial.Knob>

<Grid>

<Ellipse Fill="{StaticResource PhoneAccentBrush}"/>

<Rectangle Height="50" Width="50" Margin="0,0,350,0"

RadiusX="25" RadiusY="25" Fill="{StaticResource PhoneForegroundBrush}"/>

</Grid>

</my:Dial.Knob>

</my:Dial>

 

The page will look something like this,

 

While still in the XAML,

Add a textBlock, using the XAML below

<TextBlock x:Name="myTextblock" Text="{Binding ElementName=Dial, Path=Value}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

 Save the Project and Run it, you now have a fully functional Dial that is bound to a Textblock.
you can also change the minimum and Maximum of the Dial from the XAML to your likings.

Happy Developing