xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Gauges;assembly=Infragistics.XF.Gauges"
このトピックでは、XamBulletGraph™ コントロールを Xamarin.Forms アプリケーションに追加する方法を説明します。
本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。
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 コントロールのインスタンスを作成して Xamarin.Forms アプリケーションに追加し、パーフォーマンス バーと比較目盛マーカー、および 3 つの比較範囲をスケールに構成します。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概要です。
1. XamBulletGraph コントロールの追加
2. スケールの構成
3. パフォーマンス バーの構成
4. 比較マーカーの構成
5. 比較範囲の追加
以下の手順は、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 の範囲で表示されるため、追加構成が必要なことを意味します。
スケールの値をカスタマイズするには、MinimumValue および MaximumValue プロパティを設定する必要があります。 この例では、スケールは 5 から開始され 55 で終了します。
XAML の場合:
<ig:XamBulletGraph x:Name="bulletGraph"
MinimumValue="5"
MaximumValue="55">
</ig:XamBulletGraph>C# の場合:
bulletGraph.MaximumValue = 55;
bulletGraph.MinimumValue = 5;変化したスケールを以下のスクリーンショットに示します。
XamBulletGraph の主要なメジャーはそのパフォーマンス バーにより視覚化されます。値は Value プロパティ設定で制御します。この例では、 Value プロパティを 35 に設定します。
XAML の場合:
<ig:XamBulletGraph x:Name="bulletGraph"
Value="35">
</ig:XamBulletGraph>C# の場合:
bulletGraph.Value = 35;スケール上の比較目盛マーカーの配置は、TargetValue プロパティの値で制御します。この例では、 TargetValue プロパティを 43 に設定します。
XAML の場合:
<ig:XamBulletGraph x:Name="bulletGraph"
TargetValue="43">
</ig:XamBulletGraph>C# の場合:
bulletGraph.TargetValue = 43;以下のスクリーンショットは、これまでの手順で XamBulletGraph コントロールの外観がどのようになるかを示しています。
パフォーマンス バーで表示された値とある意味を持たせた範囲の値を比較するためには、比較範囲をスケール上に表示する必要があります。比較範囲は、複数の 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));グラフの最終的な外観を以下に示します。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。