Gauges for WPF/Silverlight
ゲージ形状をカスタマイズする
タスク別ヘルプ > ゲージ形状をカスタマイズする

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

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

  1. XAML ビューに切り替えて、<c1:C1RadialGauge> タグを編集します。次のようになります。

    XAML
    コードのコピー 
    <c1:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140">
</c1gauge>

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

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

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

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

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

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

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

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

    XAML
    コードのコピー 
    <c1: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">
</c1gauge>

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

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

    XAML
    コードのコピー 
    <c1: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">
    <!-- ゲージに目盛りマークを追加します -->
    <c1:C1GaugeMark Interval="10" Location="1"/>
    <c1:C1GaugeMark Interval="5" Location="1" />
</c1gauge>

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

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

    XAML
    コードのコピー 
    <c1: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">
    <!-- ゲージに目盛りマークを追加します -->
    <c1:C1GaugeMark Interval="10" Location="1"/>
    <c1:C1GaugeMark Interval="5" Location="1" />
    <!-- カスタム形状のフェイスを追加します -->
    <c1: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>
    </c1:C1RadialGauge.Face>
</c1gauge>

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

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

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

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

 

 

Copyright © GrapeCity, Inc. All rights reserved.