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.

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; }
    }

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.

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:

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

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

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

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.

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

In the Solution Explorer, double click App.cs to open it.
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.
```
public App()
{
    // The root page of your application
    MainPage = new ElectionResult();
}
```
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.
```
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.
```
C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();
```
Press F5 to run the project.

Poll Results

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

See Also