バージョン

ブレット グラフの追加

トピックの概要

目的

このトピックでは、XamBulletGraph™ コントロールを Xamarin.Forms アプリケーションに追加する方法を説明します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、主要機能、最小要件、ユーザー機能など、 XamBulletGraph コントロールに関する概念的な情報を提供します。

XamBulletGraph の追加– 概念的な概要

XamBulletGraph の追加の概要

XamBulletGraph をページに追加するには、コントロールのインスタンスを作成して、ページのルート要素に追加する必要があります。コントロールは、主目盛や副目盛に0 から 100 までの値を使用して、スケールを表示するようあらかじめ設定されています。さらに、配置されたコンテナーのサイズをデフォルトで測定します。

要件

「NuGet パッケージで参照を追加」を参照してください。

以下の名前空間の参照を追加します。

XAML の場合:

xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Gauges;assembly=Infragistics.XF.Gauges"

C# の場合:

using Infragistics.XamarinForms.Controls.Gauges;

手順

以下は、XamBulletGraph を追加する一般的な手順です。

1.XamBulletGraph コントロールの追加

2.スケールの構成

3.パフォーマンス バーの構成

4.比較マーカーの構成

5.追加要素の構成 (詳細は、XamBulletGraph の追加 – コード例および XamBulletGraph の構成を参照してください。)

XamBulletGraph の追加 – コード例

概要

以下の手順は、XamBulletGraph コントロールのインスタンスを作成して Xamarin.Forms アプリケーションに追加し、パーフォーマンス バーと比較目盛マーカー、および 3 つの比較範囲をスケールに構成します。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

BulletGraph Adding BulletGraph XF 1.png

概要

以下はプロセスの概要です。

1. XamBulletGraph コントロールの追加

2. スケールの構成

3. パフォーマンス バーの構成

4. 比較マーカーの構成

5. 比較範囲の追加

手順

以下の手順は、XamBulletGraph コントロールをアプリケーションに追加する方法について説明します。

1.XamBulletGraph コントロールを追加します。

XamBulletGraph 宣言をページのルート Grid 要素に追加します。次に、任意の Height および Width を設定します。

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   HeightRequest="100"
                   WidthRequest="300">
</ig:XamBulletGraph>

C# の場合:

XamBulletGraph bulletGraph = new XamBulletGraph();
bulletGraph.VerticalOptions = LayoutOptions.Center;
bulletGraph.HorizontalOptions = LayoutOptions.Center;
bulletGraph.HeightRequest = 100;
bulletGraph.WidthRequest = 300;

この宣言は、 デフォルトの外観設定および固定サイズで、 XamBulletGraph のインスタンスを作成します。これは、スケールが主目盛および副目盛を使用して 0 から 100 の範囲で表示されるため、追加構成が必要なことを意味します。

BulletGraph Adding BulletGraph XF 2.png

2.スケールを構成します。

スケールの値をカスタマイズするには、MinimumValue および MaximumValue プロパティを設定する必要があります。 この例では、スケールは 5 から開始され 55 で終了します。

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph"
                      MinimumValue="5"
                      MaximumValue="55">
</ig:XamBulletGraph>

C# の場合:

bulletGraph.MaximumValue = 55;
bulletGraph.MinimumValue = 5;

変化したスケールを以下のスクリーンショットに示します。

BulletGraph Adding BulletGraph XF 3.png

3.パフォーマンス バーを追加します。

XamBulletGraph の主要なメジャーはそのパフォーマンス バーにより視覚化されます。値は Value プロパティ設定で制御します。この例では、 Value プロパティを 35 に設定します。

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph"
                      Value="35">
</ig:XamBulletGraph>

C# の場合:

bulletGraph.Value = 35;

4.比較マーカーを構成します。

スケール上の比較目盛マーカーの配置は、TargetValue プロパティの値で制御します。この例では、 TargetValue プロパティを 43 に設定します。

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph"
                     TargetValue="43">
</ig:XamBulletGraph>

C# の場合:

bulletGraph.TargetValue = 43;

以下のスクリーンショットは、これまでの手順で XamBulletGraph コントロールの外観がどのようになるかを示しています。

BulletGraph Adding BulletGraph XF 4.png

5.比較範囲を追加します。

パフォーマンス バーで表示された値とある意味を持たせた範囲の値を比較するためには、比較範囲をスケール上に表示する必要があります。比較範囲は、複数の LinearGraphRange を個別に内部で定義できる Ranges プロパティが制御します。各範囲には、独自の開始値と終了値 (StartValue および EndValue) と色 (Brush) があります。

この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph" >
                   <ig:XamBulletGraph.Ranges>
                        <ig:LinearGraphRange StartValue="0"
                                     EndValue="15"
                                     Brush="#828181"/>
                        <ig:LinearGraphRange StartValue="15"
                                     EndValue="30"
                                     Brush="#AAAAAA"/>
                        <ig:LinearGraphRange StartValue="30"
                                     EndValue="55"
                                     Brush="#D0D0D0"/>
                   </ig:XamBulletGraph.Ranges>
</ig:XamBulletGraph>

C# の場合:

LinearGraphRange range1 = new LinearGraphRange();
   range1.StartValue = 0;
   range1.EndValue = 15;
   range1.Brush = new SolidColorBrush(Color.Fromgb(47, 47, 47));

LinearGraphRange range2 = new LinearGraphRange();
   range2.StartValue = 15;
   range2.EndValue = 30;
   range2.Brush = new SolidColorBrush(Color.Fromgb(158, 158, 158));

LinearGraphRange range3 = new LinearGraphRange();
   range3.StartValue = 30;
   range3.EndValue = 55;
   range3.Brush = new SolidColorBrush(Color.Fromgb(198, 198, 198));

bulletGraph.Ranges.Add(range1);
bulletGraph.Ranges.Add(range2);
bulletGraph.Ranges.Add(range3);
bulletGraph.TargetValueBrush = new SolidColorBrush(Color.Fromgb(255, 255, 255));

グラフの最終的な外観を以下に示します。

BulletGraph Adding BulletGraph XF 1.png

関連コンテンツ

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピック グループは、向きや方向および視覚要素を含む XamBulletGraph コントロールのさまざまな要素を構成する方法を説明します。

このトピックでは、XamBulletGraph コントロールに関連するキー クラスやプロパティに関する参考情報を提供します。