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:

Step 1: Create a datasource
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 datasource

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

C#	Copy Code
class ElectionData { double others, wijWizards, winAchievers, xuniChampions; 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; } } public double XuniChampions { get { return xuniChampions; } set { xuniChampions = value; } } }

Copy Code

class ElectionData
{
    double others, wijWizards, winAchievers, xuniChampions;

    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; }
    }
    public double XuniChampions
    {
        get { return xuniChampions; }
        set { xuniChampions = 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 Forms XAML Page (for example ElectionResult.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include the Xuni reference as shown below:

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:xuni="clr-namespace:Xuni.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge">

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:xuni="clr-namespace:Xuni.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge">

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

XAML	Copy Code
<StackLayout> <Label Text="Poll Results" TextColor="White" Font="30"/> <Label Text="Expected Seats" TextColor="#D3FDE5" Font="25"/> <!--Radial Gauge--> <xuni:XuniRadialGauge x:Name="gauge" Min="0" Max="70" HeightRequest="100" WidthRequest="50" ShowText="None" AutoScale = "true"> <!--Colored ranges to represent parties--> <xuni:XuniRadialGauge.Ranges> <xuni:GaugeRange x:Name="Range1" Color="#FF7373"/> <xuni:GaugeRange x:Name="Range2" Color="#8DEB71"/> <xuni:GaugeRange x:Name="Range3" Color="#8F5DB7"/> <xuni:GaugeRange x:Name="Range4" Color="#D4F320"/> </xuni:XuniRadialGauge.Ranges> </xuni:XuniRadialGauge> <!--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 x:Name="lbl3" TextColor="#D4F320"/> <Label Text="Results Declared" TextColor="#D3FDE5" Font="25"/> <!--Linear Gauge--> <xuni:XuniLinearGauge x:Name="lGauge" Min="0" Max="70" HeightRequest="50" WidthRequest="50" Thickness="0.1" Direction="Right" ShowRanges="True"> <!--Colored ranges to represent parties--> <xuni:XuniLinearGauge.Ranges> <xuni:GaugeRange x:Name="lRange1" Color="#FF7373"/> <xuni:GaugeRange x:Name="lRange2" Color="#8DEB71"/> <xuni:GaugeRange x:Name="lRange3" Color="#8F5DB7"/> <xuni:GaugeRange x:Name="lRange4" Color="#D4F320"/> </xuni:XuniLinearGauge.Ranges> </xuni:XuniLinearGauge> <!--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="llbl3" TextColor="#D4F320"/> <Label x:Name="llbl4" TextColor="White"/> </StackLayout>

XAML

Copy Code

<StackLayout>

  <Label Text="Poll Results" TextColor="White" Font="30"/>
  <Label Text="Expected Seats" TextColor="#D3FDE5" Font="25"/>

  <!--Radial Gauge-->
  <xuni:XuniRadialGauge x:Name="gauge"  Min="0" Max="70" HeightRequest="100" WidthRequest="50"
  ShowText="None" AutoScale = "true">

    <!--Colored ranges to represent parties-->
    <xuni:XuniRadialGauge.Ranges>
      <xuni:GaugeRange x:Name="Range1"  Color="#FF7373"/>
      <xuni:GaugeRange x:Name="Range2"  Color="#8DEB71"/>
      <xuni:GaugeRange x:Name="Range3"  Color="#8F5DB7"/>
      <xuni:GaugeRange x:Name="Range4"  Color="#D4F320"/>
    </xuni:XuniRadialGauge.Ranges>
  </xuni:XuniRadialGauge>

  <!--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 x:Name="lbl3" TextColor="#D4F320"/>

  <Label Text="Results Declared" TextColor="#D3FDE5" Font="25"/>

  <!--Linear Gauge-->
  <xuni:XuniLinearGauge x:Name="lGauge"  Min="0" Max="70" HeightRequest="50" WidthRequest="50"
   Thickness="0.1"   Direction="Right" ShowRanges="True">
    <!--Colored ranges to represent parties-->
    <xuni:XuniLinearGauge.Ranges>
      <xuni:GaugeRange x:Name="lRange1"  Color="#FF7373"/>
      <xuni:GaugeRange x:Name="lRange2"  Color="#8DEB71"/>
      <xuni:GaugeRange x:Name="lRange3"  Color="#8F5DB7"/>
      <xuni:GaugeRange x:Name="lRange4"  Color="#D4F320"/>
    </xuni:XuniLinearGauge.Ranges>
  </xuni:XuniLinearGauge>

  <!--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="llbl3" TextColor="#D4F320"/>
  <Label x:Name="llbl4" TextColor="White"/>

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

In the ElectionResult() class constructor, create new instances of the class ElectionData, defined in Step 1: Create a datasource and add data to the controls.

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

C#	Copy Code
public ElectionResult() { InitializeComponent(); // Results Declared ElectionData bds = new ElectionData() { Others = 1, WijWizards = 9, WinAchievers = 8, XuniChampions = 17 }; 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; lRange4.Min = lRange3.Max; lRange4.Max = lRange4.Min + bds.XuniChampions; // Add data to labels llbl.Text = "Others = " + bds.Others; llbl1.Text = "WijWizards = " + bds.WijWizards; llbl2.Text = "WinAchievers = " + bds.WinAchievers; llbl3.Text = "XuniChampions = " + bds.XuniChampions; llbl4.Text = "Total = " + (bds.Others + bds.WijWizards + bds.WinAchievers + bds.XuniChampions).ToString(); // Expected Seats ElectionData ds = new ElectionData() { Others = 3, WijWizards = 18, WinAchievers = 14, XuniChampions = 35 }; 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; Range4.Min = Range3.Max; Range4.Max = Range4.Min + ds.XuniChampions; // Add data to labels lbl.Text = "Others = " + ds.Others; lbl1.Text = "WijWizards = " + ds.WijWizards; lbl2.Text = "WinAchievers = " + ds.WinAchievers; lbl3.Text = "XuniChampions = " + ds.XuniChampions + "\n\n"; }

Copy Code

public ElectionResult()
{
    InitializeComponent();

    // Results Declared
    ElectionData bds = new ElectionData() { Others = 1, WijWizards = 9, WinAchievers = 8, XuniChampions = 17 };

    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;

    lRange4.Min = lRange3.Max;
    lRange4.Max = lRange4.Min + bds.XuniChampions;

    // Add data to labels
    llbl.Text = "Others = " + bds.Others;
    llbl1.Text = "WijWizards = " + bds.WijWizards;
    llbl2.Text = "WinAchievers = " + bds.WinAchievers;
    llbl3.Text = "XuniChampions = " + bds.XuniChampions;
    llbl4.Text = "Total = " + (bds.Others + bds.WijWizards + bds.WinAchievers + bds.XuniChampions).ToString();

    // Expected Seats
    ElectionData ds = new ElectionData() { Others = 3, WijWizards = 18, WinAchievers = 14, XuniChampions = 35 };

    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;

    Range4.Min = Range3.Max;
    Range4.Max = Range4.Min + ds.XuniChampions;

    // Add data to labels
    lbl.Text = "Others = " + ds.Others;
    lbl1.Text = "WijWizards = " + ds.WijWizards;
    lbl2.Text = "WinAchievers = " + ds.WinAchievers;
    lbl3.Text = "XuniChampions = " + ds.XuniChampions + "\n\n";
}

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 Forms XAML 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(); }
Some additional steps are required to run the iOS and WinPhone 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
    
    Xuni.Xamarin.Gauge.Platform.iOS.Forms.Init();
- WinPhone App:
  1. In the Solution Explorer, expand MainPage.xml.
  2. Double click MainPage.xml.cs to open it.
  3. Add the following code to the class constructor.
    C#
    Copy Code
    
    Xuni.Xamarin.Gauge.Platform.WinPhone.GaugeRenderer.Init();
Press F5 to run the project.