バージョン

向きと方向の構成 (XamBulletGraph)

トピックの概要

目的

このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により XamBulletGraph コントロールを構成する方法を説明します。

前提条件

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

トピック 目的

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

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

概要

スケールの向きと方向の構成の概要

XamBulletGraph コントロールは、スケールの垂直方向および水平方向をサポートしています。既定では、スケールは水平方向です。垂直方向のスケールの値は上向きに増加し、番号ラベルがその左側に配置されます。

BulletGraph Configuring the Orientation and Direction 1.png

この設定は、コントロールの Orientation プロパティで定義されます。

スケールの向きは、パフォーマンス バーが伸長する方向で、スケールの値が増加します。方向は、標準 (水平方向で左から右、垂直方向で下から上) または反転 (水平方向で右から左、垂直方向で上から下) が可能です。

水平方向での反転方向 垂直方向での反転方向
BulletGraph Configuring the Orientation and Direction 2.png
BulletGraph Configuring the Orientation and Direction 3.png

スケールの方向は、コントロールの IsScaleInverted プロパティで定義されます。デフォルトの方向は、標準です。

スケールの向きと方向の構成の概要表

以下の表で、XamBulletGraph のコントロールの方向とスケールの反転で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。

構成可能な項目 詳細 プロパティ

スケールの向き

コントロール内のブレット グラフのスケールの向き (水平または垂直)。

スケールの方向

ブレット グラフの方向 (標準または反転)。

スケールの向きの構成

概要

ブレット グラフの向き (水平または垂直) は、コントロールの Orientation プロパティで指定します。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

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

水平方向を指定する

LinearScaleOrientation.Horizontal

垂直方向を指定する

Orientation

LinearScaleOrientation.Vertical

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

プロパティ

“Vertical”

BulletGraph Configuring the Orientation and Direction 1.png

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

XAML の場合:

<ig:XamBulletGraph
    Orientation="Vertical" />

C# の場合:

bulletGraph.Orientation = LinearScaleOrientation.Vertical;

スケールの方向の構成 (スケールの反転)

概要

水平方向では、スケールの標準 (デフォルト) 方向は「左から右」で、これはスケールが グラフ領域の左端から開始され、右端で終了することを意味します ( ScaleStartExtent はグラフ領域の左端の始まりを示し、ScaleEndExtent は、グラフ領域の左端の終りまでの距離を示します)。

BulletGraph Configuring the Orientation and Direction 5.png

方向が反転すると、スケールはグラフ領域の右端から開始され、左端で終了します (ScaleStartExtent はグラフ領域の右端の始まりを示し、ScaleEndExtent はグラフ領域の右端の終りまでの距離を示します)。

BulletGraph Configuring the Orientation and Direction 6.png

垂直方向では、スケールの標準 (デフォルト) 方向は「下端から上端」で、これはスケールがグラフ領域の下端から開始され、上端で終了することを意味します (ScaleStartExtent はグラフ領域の下端の始まりを示し、ScaleEndExtent は、グラフ領域の下端の終りまでの距離を示します)。

BulletGraph Configuring the Orientation and Direction 7.png

方向が反転すると、スケールはグラフ領域の上端から開始され、下端で終了します (ScaleStartExtent はグラフ領域の上端の始まりを示し、ScaleEndExtent はグラフ領域の上端の終りまでの距離を示します)。

BulletGraph Configuring the Orientation and Direction 8.png

プロパティ設定

以下の表では、各プロパティ設定の構成です。

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

標準方向の構成

“false”

反転方向の構成

IsScaleInverted

“true”

例 - 水平方向での反転方向

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

プロパティ

“true”

“Horizontal”

BulletGraph Configuring the Orientation and Direction 2.png

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

XAML の場合:

<ig:XamBulletGraph
    IsScaleInverted="True" />

C# の場合:

bulletGraph.IsScaleInverted = true;

例 - 垂直方向での反転方向

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

プロパティ

“true”

“Vertical”

BulletGraph Configuring the Orientation and Direction 3.png

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

XAML の場合:

<ig:XamBulletGraph
    Orientation="Vertical"
    IsScaleInverted="True" />

C# の場合:

bulletGraph.Orientation = LinearScaleOrientation.Vertical;
bulletGraph.IsScaleInverted = true;

関連コンテンツ

トピック 目的

このトピック グループは、 XamBulletGraph コントロールの視覚要素 (スケール要素、パフォーマンス バー、比較マーカーおよび範囲など) を詳細に説明し、コード例を使用してコントロールの視覚要素を構成する方法を示します。