BulletGraph クイックスタート

このセクションでは、iOS アプリに C1BulletGraph コントロールを追加し、コントロールに値を設定する方法について説明します。Xamarin コントロールを追加する方法については、「新しい Xamarin.iOS アプリの作成」を参照してください。

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

手順 1：BulletGraph コントロールの追加
手順 2：アプリケーションの実行

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

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

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

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

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

ビューで BulletGraph コントロールを追加します

ソリューションエクスプローラ で、MainStoryboard をクリックしてストーリーボードエディタを開きます。
ストーリーボードエディタの右端のペインで、ツールバーのアイコンをクリックして Identity inspector を開きます。
Custom Class の下で、ドロップダウンを使用してクラスを UI View から BulletGraph に変更します。

コードで BulletGraph コントロールを初期化します

BulletGraph コントロールを初期化するには、ソリューションエクスプローラから ViewController.cs ファイルを開き、その内容を次のコードで置き換えます。これは、BulletGraph を初期化するために、View コントローラの viewDidLoad メソッドをオーバーライドします。

C#	コードのコピー
using C1.iOS.Gauge; using CoreGraphics; using System; using UIKit; namespace GaugeTest { public partial class ViewController : UIViewController { public ViewController(IntPtr handle) : base(handle) { } private const double DefaultValue = 25; private const double DefaultMin = 0; private const double DefaultMax = 100; C1BulletGraph bulletGraph; public override void ViewDidLoad() { base.ViewDidLoad(); this.EdgesForExtendedLayout = UIRectEdge.None; bulletGraph = new C1BulletGraph(); bulletGraph.Bad = 20; bulletGraph.Good = 75; bulletGraph.Target = 70; View.BackgroundColor = bulletGraph.BackgroundColor = UIColor.White; this.Add(bulletGraph); } public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews(); bulletGraph.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Height / 3, this.View.Frame.Width, this.View.Frame.Height / 6); } } }

コードのコピー

using C1.iOS.Gauge;
using CoreGraphics;
using System;
using UIKit;
namespace GaugeTest
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {        }
        private const double DefaultValue = 25;
        private const double DefaultMin = 0;
        private const double DefaultMax = 100;

        C1BulletGraph bulletGraph;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.EdgesForExtendedLayout = UIRectEdge.None;
            bulletGraph = new C1BulletGraph();
            bulletGraph.Bad = 20;
            bulletGraph.Good = 75;
            bulletGraph.Target = 70;
            View.BackgroundColor = bulletGraph.BackgroundColor = UIColor.White;
            this.Add(bulletGraph);
        }
        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            bulletGraph.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Height / 3,
                         this.View.Frame.Width, this.View.Frame.Height / 6);
        }
    }
}

先頭に戻る

手順 2：アプリケーションの実行

F5 を押してアプリケーションを実行します。

先頭に戻る