WinRT XAML (Part 12) Gauges

March 08 2013

Script 12: Gauges in Studio for WinRT XAML

Add some flare to your dashboards with modern looking and interactive gauges. ComponentOne Gauges™ for WinRT XAML includes several gauge controls to enhance your data visualizations and business dashboards. They provide you an attractive way to display your data on a Windows tablet.

Seven Gauge Controls

Gauges for WinRT XAML includes 7 controls with different shapes. Select the most appropriate gauge for your data:

�
- C1RadialGauge
- C1LinearGauge
- C1Knob
- C1RegionKnob
- C1RulerGauge
- C1SpeedometerGauge
- C1VolumeGauge
Interactive Gauges

The C1Knob control enables the end-user to drag the pointer to a value. Also included is the unique C1RegionKnob with customizable regions. Interactive gauges offer an alternative to text-based editors or sliders and a very engaging experience for your users.

Tick Marks and Labels

Define marks and labels in XAML or code. Use simple properties to customize their interval, location, and appearance. Apply formatting to the gauge labels; for example, format labels in currency or percentage format using standard format strings.

Ranges

Add colored ranges to the gauge to draw attention to a certain range of values. Use simple properties to customize their start and end points, as well as location, size, and appearance. Create non-linear ranges by specifying a start and end width to show growth and add visual appeal to any gauge.

Pointer Customization

Use simple properties to customize the appearance and location of the pointer and pointer cap.

Scale Customization

Use simple properties to set the start and sweep angle of the gauge scale. Gauges for WinRT XAML also supports logarithmic scales.

Off Mode Support

If there is no value, you can set the off position outside the range.

Easily Change Colors with ClearStyle

Gauges for WinRT XAML supports ComponentOne ClearStyle™ technology that allows you to easily change control colors without having to change control templates. By just setting a few color properties in Visual Studio you can easily change the look of any gauge.

Getting Started with Gauges:

Step 1 of 4: Setting up the Application

In this step you'll begin in Visual Studio to create a application using Gauges for WinRT XAML and add StackPanel panels to customize the layout of the controls you'll be adding to the application.

To set up your project, complete the following steps:

In Visual Studio, select File | New | Project.
In the New Project dialog box, expand a language in the left pane, under the language select Windows Metro style, and in the templates list select Blank App (XAML). Enter a Name for your project and click OK to create your project.

Open MainPage.xaml if it isn't already open, place the cursor between the and tags, and click once.
Navigate to the Toolbox and double-click the StackPanel icon to add the panel to MainPage.xaml.

Snippet drags both stackpanels

Add x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" to the tag so that it appears similar to the following:

Elements in the panel will now appear centered and vertically positioned.

In the XAML window of the project, place the cursor between the and tags.
Navigate to the Toolbox and double-click the StackPanel icon to add the panel to the existing StackPanel.
Add x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" to the tag so that it appears similar to the following:

Elements in the panel will now appear centered and horizontally positioned.

You've successfully created a new WinRT style project and set up your application. In the next step you'll added ComponentOne Gauges for WinRT XAML controls to the application and customize those controls.

Step 2 of 4: Adding Controls

In this step you'll set up the application by adding C1RadialGauge, C1LinearGauge, and C1Knob controls to the project as well as a standard TextBox control which will display the current value of the gauge controls.

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

In the XAML window of the project, place the cursor between the and tags.
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.

Gauge:C1Knob/
Give your control a name by adding x:Name="c1kb1" to the Gauge:C1Knob and Resize your control a margin by adding Width="150" Margin="5" as well as minimunm and maximum values by adding Minimum="0" Maximum="100" so that it appears similar to the following:

<Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5" Minimum="0" Maximum="100">
```
       </Gauge:C1Knob>
```

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

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

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

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:

<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.

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

<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.

In the XAML window of the project, place the cursor between the first and second tags.
Navigate to the Toolbox and double-click the Slider icon to add the standard control to the StackPanel.
Customize the control by adding x:Name="s1" Height="400" Minimum="0" Maximum="100" ValueChanged="s1_ValueChanged_1" Orientation="Vertical" to the tag so that it appears similar to the following:

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.

In the XAML window of the project, place the cursor between the and tags.
Navigate to the Toolbox and double-click the C1LinearGauge icon to add the control to the StackPanel.

Gauge:C1LinearGauge/
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:

<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 controla name, resize the control, and set the minimum and maximum values.

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

<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 ComponentOne Gauges for WinRT XAML controls to the application and customized those controls. In the next step you'll add code to your application.

Step 3 of 4: Adding Code to the Application

In the previous step you created a new WinRT style project and added Gauges for WinRT XAML controls to the application. In this step you'll add code to your application to customize it.

Complete the following steps:

Select View | Code to switch to Code view.
Add the following imports statements to the top of the page:

using C1.Xaml; using C1.Xaml.Gauge;

Add the code for the s1_ValueChanged_1 event handler to set the gauge and slider control values. It will look like the following:

private void s1_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e) { this.c1lg1.Value = this.s1.Value; this.c1rg1.Value = this.s1.Value; this.c1kb1.Value = this.s1.Value; }

In this step you completed adding code to your application. In the next step you'll run the application and observe run-time interactions.

Step 4 of 4: Running the Application in Simulator

(Vertical orientation)

Now that you've created a WinRT style application and customized the application's appearance and behavior, the only thing left to do is run your application. To run your application and observe Gauges for WinRT XAML's run-time behavior, complete the following steps:

From the Debug menu, select Start Debugging to view how your application will appear at run time.

The application will appear similar to the following:

Click and drag the slider's thumb button. Notice that the values of the C1Knob , C1RadialGauge, and C1LinearGauge controls change:

Congratulations! You've completed the Gauges for WinRT XAML quick start and created an application using the C1RadialGauge, C1LinearGauge, and C1Knob controls and viewed some of the run-time capabilities of your application.

Next: Blog Series (Part 13) ListBox: Windows 8 Studio for WinRT XAML

MESCIUS inc.