This topic uses data binding and multiple ranges to demonstrate how to use gauges to display poll results. The colored ranges make the results easy to understand. Some corresponding colored labels are also added to display the names of the candidates/political parties.

This topic comprises of four steps:

• Step 1: Create a data source
• Step 2: Add Gauges and Labels
• Step 3: Add data to Gauges and Labels
• Step 4: Run the Project

The following image shows how the controls appear after completing the steps above.

Step 1: Create a data source

The following class can be used to bind gauges to data.

class ElectionData
{
    double others, wijWizards, winAchievers;

    public double Others
    {
        get { return others; }
        set { others = value; }
    }
    public double WijWizards
    {
        get { return wijWizards; }
        set { wijWizards = value; }
    }
    public double WinAchievers
    {
        get { return winAchievers; }
        set { winAchievers = value; }
    }

Back to Top

Step 2: Add Gauges and Labels

Complete the following steps to add a radial gauge to display the expected seats and a linear gauge to display the results declared. Add labels below the gauges to display the names of the parties and their seat count.

1. Add a new Content Page (for example ElectionResult.xaml) to your portable or shared project and modify the <ContentPage>tag to include the following references:

   XAML	Copy Code
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.ElectionResult" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge">

2. Initialize the controls by adding the markups between the <ContentPage></ContentPage>tags and inside the <StackLayout> </StackLayout>tags, as shown below:

   Example Title

   Copy Code

   <StackLayout> <Label Text="Poll Results" TextColor="Aqua" Font="30" /> <Label Text="Expected Seats" TextColor="#36ae69" Font="25"/> <!--Radial Gauge--> <c1:C1RadialGauge x:Name="gauge" Min="0" Max="70" ShowText="None" AutoScale = "true" ShowRanges="True"> <!--Colored ranges to represent parties--> <c1:C1RadialGauge.Ranges> <c1:GaugeRange x:Name="Range1" Color="#FF7373"/> <c1:GaugeRange x:Name="Range2" Color="#8DEB71"/> <c1:GaugeRange x:Name="Range3" Color="#8F5DB7"/> </c1:C1RadialGauge.Ranges> </c1:C1RadialGauge> <!--Labels to display party names and seat count--> <Label x:Name="lbl" TextColor="#FF7373"/> <Label x:Name="lbl1" TextColor="#8DEB71"/> <Label x:Name="lbl2" TextColor="#8F5DB7"/> <Label Text="Results Declared" TextColor="#36ae69" Font="25"/> <!--Linear Gauge--> <c1:C1LinearGauge x:Name="lGauge" Min="0" Max="70" Thickness="0.1" Direction="Right" ShowRanges="True"> <!--Colored ranges to represent parties--> <c1:C1LinearGauge.Ranges> <c1:GaugeRange x:Name="lRange1" Color="#FF7373"/> <c1:GaugeRange x:Name="lRange2" Color="#8DEB71"/> <c1:GaugeRange x:Name="lRange3" Color="#8F5DB7"/> </c1:C1LinearGauge.Ranges> </c1:C1LinearGauge> <!--Labels to display party names and seat count--> <Label x:Name="llbl" TextColor="#FF7373"/> <Label x:Name="llbl1" TextColor="#8DEB71"/> <Label x:Name="llbl2" TextColor="#8F5DB7"/> <Label x:Name="llbl4" TextColor="Fuchsia"/> <StackLayout/>

       

Step 3: Add data to Gauges and Labels

Complete the following steps to add data to gauges and labels.

1. In the Solution Explorer, expand the ElectionResult.xaml node and open ElectionResult.xaml.cs to open the C# code behind.
2. In the ElectionResult( ) class constructor, create new instances of the class ElectionData, defined in Step 1: Create a data source and add data to the controls.

   The following code shows what the ElectionResult class constructor looks like after completing this step.

   C#

   Copy Code

   // Results Declared ElectionData bds = new ElectionData() { Others = 10, WijWizards = 18, WinAchievers = 30 }; lRange1.Min = 0; lRange1.Max = lRange1.Min + bds.Others; lRange2.Min = lRange1.Max; lRange2.Max = lRange2.Min + bds.WijWizards; lRange3.Min = lRange2.Max; lRange3.Max = lRange3.Min + bds.WinAchievers; // Add data to labels llbl.Text = "Others = " + bds.Others; llbl1.Text = "WijWizards = " + bds.WijWizards; llbl2.Text = "WinAchievers = " + bds.WinAchievers; llbl4.Text = "Total = " + (bds.Others + bds.WijWizards + bds.WinAchievers).ToString(); // Expected Seats ElectionData ds = new ElectionData() { Others = 12, WijWizards = 22, WinAchievers = 30 }; Range1.Min = 0; Range1.Max = Range1.Min + ds.Others; Range2.Min = Range1.Max; Range2.Max = Range2.Min + ds.WijWizards; Range3.Min = Range2.Max; Range3.Max = Range3.Min + ds.WinAchievers; // Add data to labels lbl.Text = "Others = " + ds.Others; lbl1.Text = "WijWizards = " + ds.WijWizards; lbl2.Text = "WinAchievers = " + ds.WinAchievers;

Step 4: Run the Project

Complete the following steps

1. In the Solution Explorer, double click App.cs to open it.
2. In the class constructor App( ), set the Content Page ElectionResult as the MainPage.

   The following code shows the class constructor App( ), after completing this step.

   C#	Copy Code
   public App() { // The root page of your application MainPage = new ElectionResult(); }

3. Some additional steps are required to run the iOS and UWP apps:
   • iOS App:
     1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
     2. Add the following code to the FinishedLaunching( ) method.

        C#	Copy Code
        C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();

   • UWP App:
     1. In the Solution Explorer, expand MainPage.xaml.
     2. Double click MainPage.xaml.cs to open it.
     3. Add the following code to the class constructor.

        C#	Copy Code
        C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();

4. Press F5 to run the project.