ComponentOne Xamarin Edition
Poll Results
Controls > Gauge > User Scenario > Poll Results

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:

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.

C#
Copy Code
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/>
        
Back to Top

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;

Back to Top

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.

Back to Top

See Also