このセクションでは、移植可能なアプリまたは共有アプリに BulletGraph コントロールを追加し、そこにデータを追加する方法について説明します。C# または XAML で Xuni コンポーネントを追加する方法については、「C# による Xuni コンポーネントの追加」または「XAML による Xuni コンポーネントの追加」を参照してください。

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

• 手順 1：BulletGraph コントロールの追加
• 手順 2：プロジェクトの実行

次の図は、上記の手順を実行した後の BulletGraph を示しています。

手順 1：BulletGraph コントロールの追加

Value プロパティは、ゲージの値を示します。1 つのゲージに複数の範囲を追加し、範囲の Min および Max プロパティで範囲の位置を定義します。ゲージの IsReadOnly プロパティを false に設定すると、ユーザーはゲージをタップして値を編集できます。

メモ：XuniBulletGraph.Origin プロパティを使用して、BulletGraph ポインタの原点を変更できます。デフォルトでは、原点は 0 に設定されています。

C# または XAML で BulletGraph コントロールを初期化するには、次の手順を実行します。

C# のコード

1. 新しいクラス（QuickStart.cs など）を Portable/Shared プロジェクトに追加し、以下のように Xuni Gauge および Xamarin 参照を含めます。

   C#	コードのコピー
   using Xuni.Forms.Gauge; using Xamarin.Forms;

2. BulletGraph コントロールを新しいメソッド GetBulletGraph()（または GetRadialGauge() / GetBulletGraph() 内でインスタンス化します）。

   C#

   コードのコピー

   public static XuniBulletGraph GetBulletGraph() { //ブレットグラフのインスタンスを作成し、プロパティを設定します。 XuniBulletGraph gauge = new XuniBulletGraph(); gauge.Value = 80; gauge.HeightRequest = 25; gauge.WidthRequest = 50; gauge.Min = 0; gauge.Max = 100; gauge.Thickness = 0.1; gauge.Direction =LinearGaugeDirection.Right; gauge.PointerColor = Color.Black; //ゲージのGood、BadおよびTargetを設定します。 gauge.Good = 100; gauge.GoodRangeColor = Color.FromHex("#CCCCCC"); gauge.Bad = 50; gauge.BadRangeColor = Color.FromHex("#666666"); gauge.Target = 75; gauge.TargetColor = Color.Black; return gauge; }

XAML のコード

1. 新しい Forms XAML ページ（QuickStart.xaml など）を Portable または Shared プロジェクトに追加し、<ContentPage> タグを変更して、以下のように Xuni 参照を追加します。

   XAML	コードのコピー
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge">

2. BulletGraph コントロールを初期化します。それには、コントロールの <ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、次のようにマークアップを追加します。

   XAML	コードのコピー
   <StackLayout> <xuni:XuniBulletGraph Value="80" Min="0" Max="100" HeightRequest="50" WidthRequest="50" Thickness="0.1" Good="100" GoodRangeColor="#CCCCCC" Bad="50" BadRangeColor="#666666" Target="75" TargetColor="Black" PointerColor="Black" Direction="Right"> </xuni:XuniBulletGraph> </StackLayout>

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

1. ソリューションエクスプローラーで、App.cs をダブルクリックして開きます。
2. BulletGraph コントロールを表示するには、次の手順を実行します。
   • C# クラスを返すには、次の手順を実行します。 クラスコンストラクタ App() で、新しい ContentPage を MainPage として設定し、コントロールを ContentPage の Content に割り当てます。それには、メソッド GetBulletGraph() （前の手順「手順 1：BulletGraph コントロールの追加」で定義済み）を呼び出します。

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

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

   • Forms XAML ページを返すには、次の手順を実行します。 クラスコンストラクタ App() で、Forms XAML ページ QuickStart を MainPage として設定します。

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

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

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

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

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

        C#	コードのコピー
        Xuni.Forms.Gauge.Platform.WinPhone.GaugeRenderer.Init();

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

Copyright © GrapeCity inc. All rights reserved.