ゲージ形状のカスタマイズ

ほとんどの円形ゲージは丸形ですが、他の形状でゲージを作成することもできます。C1RadialGauge の形状をカスタマイズするには、次の手順に従う必要があります。

ゲージの形状を選択します。
ゲージの形状を考慮し、ポインタの位置に合わせて PointerOrigin プロパティを設定します。
ゲージの Background プロパティを Transparent に、BorderThickness プロパティを 0 に設定して、デフォルトの丸い背景を非表示にします。
要素を Face レイヤに追加して、新しいゲージの形状を表示します。

上の手順に基づいてカスタマイズされた形状の C1RadialGauge を作成するには、次の手順に従います。

XAML ビューに切り替えて、<Gauge:C1RadialGauge> タグを変更します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140"> </Gauge:C1RadialGauge>

これで、C1RadialGauge コントロールの初期プロパティが設定されます。

XAML ビューで、PointerOrigin="0.8,0.5" を <Gauge:C1RadialGauge> タグに追加します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5"> </Gauge:C1RadialGauge>

PointerOrigin プロパティは、C1RadialGauge コントロールの C1GaugePointer の開始位置を設定します。

XAML ビューで、Background="Transparent" を <Gauge:C1RadialGauge> タグに追加します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent"> </Gauge:C1RadialGauge>

これで、C1RadialGauge コントロールが透明に表示されます。

XAML ビューで、BorderThickness="0" を <Gauge:C1RadialGauge> タグに追加します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> </Gauge:C1RadialGauge>

これで、C1RadialGauge コントロールが境界線なしで表示されます。

XAML ビューで、マークアップを <Gauge:C1RadialGauge> タグの後に追加します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> <!-- ゲージに目盛りの追加 --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> </Gauge:C1RadialGauge>

これで、ゲージに C1GaugeMark 要素と目盛りマークが追加されます。

XAML ビューで、マークアップを <Gauge:C1RadialGauge> タグの後に追加します。次のようになります。

XAMLマークアップ	コードのコピー
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> <!-- ゲージに目盛りの追加 --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> <!-- カスタムシェープを含むフェースの追加 --> <Gauge:C1RadialGauge.Face> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="4" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Border Grid.Column="1" Background="Black" BorderBrush="LightGray" BorderThickness="4" CornerRadius="140,60,60,140"/> </Grid> </Gauge:C1RadialGauge.Face> </Gauge:C1RadialGauge>

XAMLマークアップ　

コードのコピー

<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
    
    <Gauge:C1GaugeMark Interval="10" Location="1"/>
    <Gauge:C1GaugeMark Interval="5" Location="1" />
    
    <Gauge:C1RadialGauge.Face>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="1" Background="Black" BorderBrush="LightGray" BorderThickness="4" CornerRadius="140,60,60,140"/>
        </Grid>
    </Gauge:C1RadialGauge.Face>
</Gauge:C1RadialGauge>

これで、ゲージにカスタマイズされた Face が追加されます。

プロジェクトの実行と確認

C1RadialGauge コントロールに、カスタマイズされたフェイスが表示されます。

C1RadialGauge コントロールの Face は、さまざまにカスタマイズできます。たとえば、UWP Edition と共にインストールされる GaugeSamples サンプルの SpeedometersPage.xaml ページには、次のカスタマイズされたゲージがあります。