バージョン

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

トピックの概要

目的

このトピックではコード例を使用して、 XamBulletGraph コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。

前提条件

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

トピック 目的

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

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

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

パフォーマンス バーの外観構成の概要

パフォーマンス バーはスケール範囲の先頭から開始しなければなりません。終了位置のみ構成可能です。終了位置でバーの長さを効果的に構成できます。終了位置は Value プロパティで処理されます。

スケール全域のディメンションでの位置は、 ValueInnerExtent および ValueOuterExtent プロパティにより、グラフ領域の端に対して構成できます。パフォーマンス バーの位置を構成すると幅も定義されます。

BulletGraph Configuring the Performance Bar 1.png

バーのルック アンド フィールは、各プロパティ ( ValueBrushValueOutline および ValueStrokeThickness) を使用して塗りつぶし色、境界線の色および境界線の線幅をカスタマイズできます。

パフォーマンス バーの外観構成の概要表

以下の表は、 XamBulletGraph コントロールのバーで構成できる要素および構成に使用するプロパティへのマッピングについて説明します。

構成可能な点 プロパティ デフォルト値

表示する値

設定なし

スケール全域の幅および位置

0.5

スケール全域の幅および位置

0.65

塗りつぶし色

デフォルトのテーマで定義済み

境界線の線幅

1.0

境界線の色

デフォルトのテーマで定義済み

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

表示する値

パフォーマンス バーで示された値

スケールのメジャーにおける任意の値

下端 / 右端の位置

水平方向でパフォーマンス バーが位置する下端または垂直方向で位置する右端

方向に応じた、 グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: 0.2 )

上端 / 左端の位置

水平方向でパフォーマンス バーが位置する上端または垂直方向で位置する左端

(開始点と終了点間の差が目盛の線分の長さになります。)

方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: 0.2 )

塗りつぶし色

バーの塗りつぶし色

任意の色

境界線の線幅

パフォーマンス バー境界線の太さ

任意の値 (ピクセル)

境界線の色

パフォーマンス バー境界線の色

任意の色

以下のスクリーンショットは、下記設定の結果、 XamBulletGraph の外観がどのようになるかを示しています。

プロパティ

"85"

"#ffffa500"

"#ffa52a2a"

"0.3"

"0.8"

"3"

BulletGraph Configuring the Performance Bar 2.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamBulletGraph Value="85"
                 ValueBrush="#ffffa500"
                 ValueInnerExtent="0.3"
                 ValueOuterExtent="0.8"
                 ValueOutline="#ffa52a2a"
                 ValueStrokeThickness="3" />

C# の場合:

bulletGraph.Value = 85;
bulletGraph.ValueBrush = new SolidColorBrush(Color.FromRgb(255, 165, 0));
bulletGraph.ValueInnerExtent = .3;
bulletGraph.ValueOuterExtent = .8;
bulletGraph.ValueOutline = new SolidColorBrush(Color.FromRgb(165,42,42));
bulletGraph.ValueStrokeThickness = 3;

関連コンテンツ

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

トピック 目的

このトピックではコード例を使用して、 XamBulletGraph コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。

このトピックではコード例を使用して、 XamBulletGraph コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。

このトピックではコード例を使用して、 XamBulletGraph コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。

このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。