バージョン

背景の構成 (XamRadialGauge)

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

背景機能の概要

背景機能の概要

円で表示される XamRadialGauge コントロールの背景セクションには、ゲージに追加される針や目盛など、さまざまな要素があります。

この領域は、 BackingShape プロパティの設定で円形またはフィットのいずれかにカスタマイズできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合はスケールの範囲を円弧として塗りつぶされた円のセグメントが作成されます。

プレビュー

以下の画像は、フィットで構成した背景に描画された XamRadialGauge コントロールのプレビューです。

Configuring the Backing 1 17 1.png

背景機能のプロパティ参照

背景機能のプロパティ参照表

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

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

Brush

このプロパティは、ゲージの背景をブラシで塗りつぶす設定に使用します。

Double

フィット スケールの背景に使用する角丸の半径を決定します。ゲージがフィット背景の図形を使用する場合に、このプロパティを使用して背景の角丸を指定します。

Double

ゲージの背景の内側範囲を決定します。フィット背景の図形を使用する場合のみ適用されます。

Double

ゲージの背景の外側範囲を決定します。フィット背景の図形を使用する場合のみ適用されます。

Brush

背景のアウトラインに使用するブラシを決定します。

Double

フィット背景に適用されるオーバースイープまたはアンダースイープの角度を決定します。このプロパティを使用すると、スペースを追加して背景図形をスケールの開始および終了より大きくすることができます。

RadialGaugeBackingShape

このプロパティを使用すると、ゲージの背景図形を事前定義された図形に設定できます。背景の形状は、円形またはフィットです。フィット図形の場合は、スケールの範囲を円弧として塗りつぶされた円のセグメントが作成されます。

Double

背景アウトラインのストロークの太さを決定します。

背景の構成

以下のスクリーンショットは、以下の背景のプロパティの構成を使用して XamRadialGauge コントロールを描画する方法を示します。

Configuring the Backing 2 17 1.png

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

XAML の場合:

<ig:XamRadialGauge
    x:Name="radialGauge"
    MinimumValue="0"
    MaximumValue="10"
    Value="1"
    BackingShape="Fitted"
    BackingBrush="AliceBlue"
    BackingCornerRadius="10"
    BackingOuterExtent=".9"
    BackingInnerExtent=".2"
    BackingOversweep="4"
    BackingStrokeThickness="5"
/>

C# の場合:

var radialGauge = new XamRadialGauge();
radialGauge.MinimumValue = 0;
radialGauge.MaximumValue = 10;
radialGauge.Value = 1;
radialGauge.BackingShape = RadialGaugeBackingShape.Fitted;
radialGauge.BackingCornerRadius = 10;
radialGauge.BackingOuterExtent = 0.9;
radialGauge.BackingInnerExtent = 0.2;
radialGauge.BackingOversweep = 4;
radialGauge.BackingStrokeThickness = 5;
radialGauge.BackingBrush = new SolidColorBrush(Colors.AliceBlue);

関連コンテンツ

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

トピック 目的

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

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

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

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

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

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