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

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

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

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

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

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

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

C# のコード

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

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

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

   C#

   コードのコピー

   public static C1BulletGraph GetBulletGraph() { // ブレットグラフのインスタンスを作成し、プロパティを設定します C1BulletGraph gauge = new C1BulletGraph(); gauge.Value = 80; gauge.Min = 0; gauge.Max = 100; gauge.Thickness = 0.1; gauge.Direction = LinearGaugeDirection.Right; gauge.PointerColor = Xamarin.Forms.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 = Xamarin.Forms.Color.Black; return gauge; }

XAML のコード

1. 新しい Content Page（QuickStart.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.QuickStart" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge">

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

   XAML	コードのコピー
   <StackLayout> <c1:C1BulletGraph 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"> </c1:C1BulletGraph> </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() }; }

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

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

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

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. Release モードで UWP アプリケーションをコンパイルする場合は、アプリケーションに正しいアセンブリを含めるために、App.xaml.cs の OnLaunched メソッドに次のコードを明示的に追加する必要があります。

        C#	コードのコピー
        var assembliesToInclude = new List<Assembly>(); assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer) .GetTypeInfo().Assembly); assembliesToInclude.Add(typeof(C1.UWP.Gauge.C1GaugeRenderer).GetTypeInfo().Assembly); Xamarin.Forms.Forms.Init(e, assembliesToInclude);

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