ポインタの外観をカスタマイズする

デフォルトでは、Pointer は先細の茶色の四角形として表示され、ポインタキャップはグラデーション付きの灰色の円として表示されます。どちらの外観もカスタマイズできます。以下の手順では、C1RadialGauge コントロールの Pointer と PointerCap の外観をカスタマイズします。

次の手順に従います。

C1RadialGauge コントロールをクリックして選択します。

XAML ビューに切り替えて、PointerFill="SkyBlue" PointerStroke="CornflowerBlue" を <c1:C1RadialGauge> タグに追加します。次のようになります。

XAML	コードのコピー
<c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerStroke="CornflowerBlue"> </c1:C1RadialGauge>

これで、Pointer の色がカスタマイズされます。

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

XAML	コードのコピー
<c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue"> </c1:C1RadialGauge>

これで、PointerCap の輪郭の色がカスタマイズされます。

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

XAML	コードのコピー
<c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue" > <c1:C1RadialGauge.PointerCapFill> <RadialGradientBrush> <GradientStop Color="CornflowerBlue" Offset="0"/> <GradientStop Color="SkyBlue" Offset="1"/> </RadialGradientBrush> </c1:C1RadialGauge.PointerCapFill> </c1:C1RadialGauge>

XAML

コードのコピー

<c1:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue" >
    <c1:C1RadialGauge.PointerCapFill>
        <RadialGradientBrush>
            <GradientStop Color="CornflowerBlue" Offset="0"/>
            <GradientStop Color="SkyBlue" Offset="1"/>
        </RadialGradientBrush>
    </c1:C1RadialGauge.PointerCapFill>
</c1:C1RadialGauge>

これで、C1RadialGauge コントロールの PointerCap に半径方向のグラデーションが追加されます。

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

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