このトピックでは、データ連結と複数の範囲を使用して、ゲージで投票の結果を表示する方法を示します。色付き範囲により、結果がわかりやすくなります。対応するいくつかの色付きラベルを追加して、候補者/政党の名前も表示します。

このトピックは 4 つの手順で構成されます。

• 手順 1：データソースの作成
• 手順 2：ゲージとラベルの追加
• 手順 3：ゲージとラベルへのデータの追加
• 手順 4：プロジェクトの実行

次の図は、上記の手順を実行した後のコントロールを示しています。

手順 1：データソースの作成

次のクラスを使用して、ゲージをデータに連結することができます。

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

手順 2：ゲージとラベルの追加

円形ゲージを追加して予想議席を表示し、直線型ゲージを追加して発表された結果を表示するには、次の手順を実行します。ゲージの下にラベルを追加して政党の名前とその議席数を表示します。

1. 新しい Content Page（ElectionResult.xaml など）を Portable または Shared プロジェクトに追加し、<ContentPage> タグを変更して、以下のように参照を含めます。

   XAML	コードのコピー
   <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. コントロールを初期化します。それには、<ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、次のようにマークアップを追加します。

   XAML

   コードのコピー

   <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"> <!--パーティーを表す色付き範囲--> <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> <!--政党名と座席数を表示するためのラベル--> <Label x:Name="lbl" TextColor="#FF7373"/> <Label x:Name="lbl1" TextColor="#8DEB71"/> <Label x:Name="lbl2" TextColor="#8F5DB7"/> <Label Text="結果" TextColor="#36ae69" Font="25"/> <!--Linear Gauge--> <c1:C1LinearGauge x:Name="lGauge" Min="0" Max="70" Thickness="0.1" Direction="Right" ShowRanges="True"> <!--パーティーを表す色付き範囲--> <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> <!--政党名と座席数を表示するためのラベル--> <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/>

手順 3：ゲージとラベルへのデータの追加

ゲージとラベルにデータを追加するには、次の手順に従います。

1. ソリューションエクスプローラーで、ElectionResult.xaml ノードを展開し、ElectionResult.xaml.cs を開いて、C# コードビハインドを開きます。
2. ElectionResult() クラスコンストラクタで、クラス ElectionData（「手順 1：データソースの作成」で定義済み）の新しいインスタンスを作成し、データをコントロールに追加します

   次のコードは、上の手順を実行した後の ElectionResult クラスコンストラクタを示します。

   C#

   コードのコピー

   // 発表された結果 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; //ラベルにデータを追加する llbl.Text = "その他 = " + bds.Others; llbl1.Text = "WijWizards = " + bds.WijWizards; llbl2.Text = "WinAchievers = " + bds.WinAchievers; llbl4.Text = "合計 = " + (bds.Others + bds.WijWizards + bds.WinAchievers).ToString(); // 予想議席 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; // ラベルにデータを追加する lbl.Text = "その他 = " + ds.Others; lbl1.Text = "WijWizards = " + ds.WijWizards; lbl2.Text = "WinAchievers = " + ds.WinAchievers;

手順 4：プロジェクトの実行

次の手順を実行します。

1. ソリューションエクスプローラーで、App.cs をダブルクリックして開きます。
2. クラスコンストラクタ App() で、Content Page ElectionResult を MainPage として設定します。

   次のコードは、この手順を実行した後のクラスコンストラクタ App() を示します。

   C#	コードのコピー
   public App() { // アプリケーションのルートページ MainPage = new ElectionResult(); }

3. iOS および UWP アプリを実行するには、いくつかの追加手順が必要です。
   • iOS アプリ：:
     1. ソリューションエクスプローラーで、YourAppName.iOS プロジェクト内の AppDelegate.cs をダブルクリックして開きます。
     2. 次のコードを FinishedLaunching() メソッドに追加します。

        C#	コードのコピー
        C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();

   • UWP アプリ:
     1. ソリューションエクスプローラーで、MainPage.xaml を展開します。
     2. MainPage.xaml.cs をダブルクリックして開きます。
     3. 次のコードをクラスコンストラクタに追加します。

        C#	コードのコピー
        C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();

4. ［F5］キーを押してプロジェクトを実行します。