In this step you'll set up the application by adding C1RadialGauge,  C1LinearGauge, and C1Knob controls to the project.

To set add the gauge controls to your application, following these steps:

1. In the XAML window of the project, place the cursor between the <StackPanel x:Name="sp2"> and </StackPanel> tags.

2. Navigate to the Toolbox and double-click the C1Knob icon to add the control to the StackPanel. This will add the reference and XAML namespace automatically.
3. Give your control a name by adding x:Name="c1kb1" to the <Gauge:C1Knob> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1Knob x:Name="c1kb1">

By giving it a unique identifier, you'll be able to access the control in code.

4. Resize your control a margin by adding Width="150" to the <Gauge:C1Knob> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1Knob x:Name="c1kb1" Width="150">

The control will appear smaller when the application is run.

5. Give your control a margin by adding Margin="5" to the <Gauge:C1Knob> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5">

This will add spacing between the C1Knob and other controls you will add to the page.

6. Set the minimum and maximum values by adding Minimum="0" Maximum="100" to the <Gauge:C1Knob> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5" Minimum="0" Maximum="100">

This determines the highest and lowest values available in the knob.

7. In the XAML window of the project, place the cursor between the </Gauge:C1Knob> and </StackPanel> tags.

8. Navigate to the Toolbox and double-click the C1RadialGauge icon to add the control to the StackPanel.

9. Customize the control by adding x:Name="c1rg1" Margin="5" Minimum="0" Maximum="100"  Height="300" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge x:Name="c1rg1" Margin="5" Minimum="0" Maximum="100" Height="300" Value="100" StartAngle="0" SweepAngle="300"></Gauge:C1RadialGauge>

This will give the C1RadialGauge a name, resize the control, and set the minimum and maximum values of the control.

10. Add the following markup between the x <Gauge:C1RadialGauge> and </Gauge:C1RadialGauge> tags to change the appearance of the gauge:

Markup	Copy Code
<Gauge:C1GaugeRange To="40" Location="0.8" Fill="#088080" Width="0.2" Opacity="0.6" /> <Gauge:C1GaugeRange From="75" Fill="#088080" Location="0.9" EndWidth="0.2" Opacity="0.3" /> <Gauge:C1GaugeMark Interval="20" /> <Gauge:C1GaugeMark Interval="10" /> <Gauge:C1GaugeMark Interval="1" /> <Gauge:C1GaugeLabel Interval="20" Alignment="In" AlignmentOffset="10" FontSize="16" />

This will set the appearance of the gauge range and tick marks.

11. In the XAML window of the project, place the cursor between the first and second </StackPanel> tags.

12. Navigate to the Toolbox and double-click the Slider icon to add the standard control to the StackPanel.

13. Customize the control by adding x:Name="s1" Height="400" Minimum="0" Maximum="100" ValueChanged="s1_ValueChanged_1" Orientation="Vertical" to the <Slider> tag so that it appears similar to the following:

Markup	Copy Code
<Slider x:Name="s1" Height="400" Minimum="0" Maximum="100" ValueChanged="s1_ValueChanged_1" Orientation="Vertical"/>

This will give the Slider a name, resize the control, and set the minimum and maximum values. You will add code for the event handler in a later step.

14. In the XAML window of the project, place the cursor between the </Slider> and </StackPanel> tags.

15. Navigate to the Toolbox and double-click the C1LinearGauge icon to add the control to the StackPanel.

16. Customize the control by adding x:Name="c1lg1" Minimum="0" Maximum="100"  Width="120" Height="500" to the <Gauge:C1LinearGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1LinearGauge x:Name="c1lg1" Minimum="0" Maximum="100" Width="120" Height="500" Orientation="Vertical" XAxisLocation="0.05" XAxisLength="0.9" YAxisLocation="0.2"></Gauge:C1LinearGauge>

This will give the C1LinearGauge control a name, resize the control, and set the minimum and maximum values.

17. Add the following markup between the x <Gauge:C1LinearGauge> and </Gauge:C1LinearGauge> tags to change the appearance of the gauge:

Markup

Copy Code

<Gauge:C1GaugeMark Interval="20" /> <Gauge:C1GaugeMark Interval="10" /> <Gauge:C1GaugeMark Interval="2" /> <Gauge:C1GaugeLabel Interval="20" Format="n0" Alignment="Out" AlignmentOffset="30" FontSize="16"/> <Gauge:C1GaugeRange To="40" Location="0" Fill="#088080" Width="0.2" Opacity="0.2"/> <Gauge:C1GaugeRange From="40" To="80" Location="0" Fill="#088080" Width="0.2" Opacity="0.4"/> <Gauge:C1GaugeRange From="80" To="100" Location="0" Fill="#088080" Width="0.2" Opacity="0.6"/>

This will set the appearance of the gauge range and tick marks.

You've successfully set up your application's user interface. You've added Gauges for UWP controls to the application and customized those controls. In the next step you'll add code to your application.