バージョン

背景の構成 (XamLinearGauge)

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

このトピックは、以下のセクションで構成されます。

背景の構成

背景構成の概要

XamLinearGauge コントロールの背景は、スプレッドと位置、およびルック アンド フィール (塗りつぶしと境界線) の構成が可能です。スプレッドおよび位置は、スケール全域のディメンションで BackingInnerExtent および BackingOuterExtent プロパティを介して構成できます。背景はスケールに沿って、常にコントロールの一方の端から他方の端に広がります。塗りつぶし色および境界線は、スタイル テンプレートで利用できるプロパティのセットにより管理されます。

以下の図は、背景が水色で境界線が線幅 3 ピクセルの黄緑色の構成を示しています。背景の範囲は BackingInnerExtent および BackingOuterExtent プロパティで値を指定すると小さくなります。

XamLinearGauge Overview 12.png

背景構成の概要表

以下の表で、XamLinearGauge コントロールの背景で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。

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

スケール全域のスプレッドおよび位置

0

スケール全域のスプレッドおよび位置

1.0

塗りつぶし色

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

境界線の色

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

境界線の線幅

2.0

プロパティ設定

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

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

下端 / 左端の位置

水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端に対する背景の下端 (水平方向) または左端 (垂直方向) の位置。

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

上端 / 左端の位置

水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端に対する背景の上端 (水平方向) または右端 (垂直方向) の位置。

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

塗りつぶし色

背景の塗りつぶし色

任意の色

境界線の線幅

背景の境界線幅

任意の値 (ピクセル)

境界線の色

背景の境界線色

任意の色

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

プロパティ

"#FFDAB9"

"#00FFFF"

"3"

"0.2"

"0.7"

XamLinearGauge Configuring the Background 1 17 1.png

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

XAML の場合:

<ig:XamLinearGauge x:Name="linearGauge"
                 BackingBrush="#FFDAB9"
                 BackingOutline="#00FFFF"
                 BackingStrokeThickness="3"
                 BackingInnerExtent="0.2"
                 BackingOuterExtent="0.7"/>

C# の場合:

linearGauge.BackingBrush = new SolidColorBrush(Color.FromRgb(255, 153, 153));
linearGauge.BackingOutline = new SolidColorBrush(Color.FromRgb(51, 255, 255));
linearGauge.BackingStrokeThickness = 3;
linearGauge.BackingInnerExtent = .2;
linearGauge.BackingOuterExtent = .7;

関連コンテンツ

トピック

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

トピック 目的

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

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

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