バージョン

スケールの構成 (XamRadialGauge)

トピックの概要

目的

このトピックでは、XamRadialGauge コントロールのスケールの概念的な概要を提供します。スケールのプロパティの説明およびスケールの実装方法を例で示します。

前提条件

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

トピック 目的

このセクションでは、 XamRadialGauge コントロールおよびその主要機能の概要を説明します。

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

このトピックの内容

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

スケールの概要

スケールの概要

スケールはゲージの値を視覚的に示すために使用され、XamRadialGauge コントロールで値の範囲を定義します。目盛と範囲はすべて要素で、スケールに追加できます。

プレビュー

以下の画像は、スケールを追加した XamRadialGauge コントロールのプレビューです。

Configuring the Scale1 1 17 1.png

スケールのプロパティ

スケールのプロパティの概要

以下の表で、XamRadialGauge コントロールのスケールに関連するプロパティを簡単に説明します。

プロパティ名 プロパティ タイプ 説明

Double

ゲージの中心から測定される、スケールの開始位置を決定します。このプロパティの値は 0 から 1 の間にする必要があります。

このプロパティの値を、 ScaleEndExtent プロパティよりも大きく設定すると、開始範囲はデフォルト設定されている実際の ScaleEndExtent 値に戻ります。

Double

ゲージの中心から測定される、スケールの終了位置を決定します。このプロパティの値は 0 から 1 の間にする必要があります。

このプロパティの値を、 ScaleStartExtent プロパティよりも小さく設定すると、終了範囲はデフォルト設定されている実際の ScaleStartExtent 値に戻ります。

Double

スケールの開始角度を度数で指定します。

Double

スケールの終了角度を度数で指定します。

Double

スケールが両方向で、開始と終了の値を越えて移動する余分なスペース (度数) の値を指定します。値を 0 より大きい値に設定する必要があります。デフォルト値は 3 です。

Brush

スケールの背景の塗りつぶし使用するブラシを指定します。

SweepDirection

スケールの移動を時計周りまたは反時計回りに指定します。

Circular - 図形の終了部分を描く角度を大きくします。

Fitted - 外部アークと内部アークの角度を大きくしますが、 ScaleOversweep プロパティが 0 に設定された場合に、スケール図形の接続線を平衡に保持するように内部アークの角度をより大きくします。

Auto - デフォルト設定の Auto の場合は、背景図形が自動的に決定され、それに応じて ScaleOversweep プロパティを設定します。

このプロパティを Circular に設定し、 BackingShape プロパティの値を Fitted に設定した場合は、スケールと背景図形のアークとの間に、目視できるギャップが表示されます。スケールをゲージの背景領域と正しく揃えるには、 ScaleOversweep プロパティと BackingShape プロパティを同じ値に設定する必要があります。

スケールの構成

例

以下のスクリーンショットは、スケール プロパティを以下のように構成して XamRadialGauge を描画する方法を示します。

プロパティ 値

0.5

0.4

15

Counterclockwise
Configuring the Scale1 2 17 1.png

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

XAML の場合:

<ig:XamRadialGauge x:Name="radialGauge"
                   ScaleBrush="LightGray"
                   ScaleStartExtent="0.5"
                   ScaleEndExtent="0.4"
                   ScaleOversweep="15"
                   ScaleSweepDirection="Counterclockwise"/>

C# の場合:

var radialGauge = new XamRadialGauge();
radialGauge.ScaleBrush = new SolidColorBrush(Colors.LightGray);
radialGauge.ScaleStartExtent = 0.5;
radialGauge.ScaleEndExtent = 0.4;
radialGauge.ScaleOversweep = 15;
radialGauge.ScaleSweepDirection = SweepDirection.Counterclockwise;

関連コンテンツ

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

トピック 目的

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

このトピックでは、XamRadialGauge コントロールのバッキング機能の概念的な概要を提供します。バッキング領域のプロパティについて説明し、実装例を提供します。

このトピックでは、XamRadialGauge コントロールを使用したラベルの概念的な概要を提供します。ラベルのプロパティの説明およびラベルの構成方法を例で示します。

このトピックでは、XamRadialGauge コントロールを使用した針の概念的な概要を提供します。針のプロパティの説明および針の構成方法を例で示します。

このトピックでは、XamRadialGauge コントロールの範囲の概念的な概要を提供します。範囲のプロパティについて説明し、範囲をラジアル ゲージに追加する方法の例も示します。

このトピックでは、XamRadialGauge コントロールを使用した目盛の概念的な概要を提供します。目盛プロパティの説明および目盛の実装方法を例で示します。