手順 2：コントロールの外観のカスタマイズ

この手順では、C1RadialGauge コントロールの外観をカスタマイズします。以下の手順では、「手順 1：ページへの C1RadialGauge の追加」トピックが完了して、C1RadialGauge コントロールがページに追加されていると想定しています。

C1RadialGauge コントロールをカスタマイズするには、以下の手順を実行します。

ソースビューで、<cc1:C1RadialGauge></cc1:C1RadialGauge> タグを編集して、次のような表示にします。

ソースビュー	コードのコピー
<cc1:C1RadialGauge ID="C1RadialGauge1" runat="server" Value="50" Max="100" StartAngle="-45" SweepAngle="270">

これによって、コントロールの Value と Max 値、およびゲージの StartAngle と SweepAngle が設定されます。

マウスを<cc1:C1RadialGauge></cc1:C1RadialGauge> タグの間に入れて、次のマークアップを追加して、C1RadialGauge コントロールの各側面をスタイル設定します。

ソースビュー	コードのコピー
<Animation Duration="2000" Easing="EaseOutBack"></Animation> <Labels Offset="30"></Labels> <TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25"></TickMajor> <TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor> <Pointer Length="0.8" Width="4" Offset="0.15"></Pointer> <Ranges> <cc1:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5" StartDistance="0.6" StartValue="0" StartWidth="2"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.54" EndValue="75" EndWidth="20" StartDistance="0.58" StartValue="10" StartWidth="5"> <RangeStyle Stroke="White" StrokeWidth="0"> <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.5" EndValue="100" EndWidth="25" StartDistance="0.54" StartValue="175" StartWidth="20"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange> </Ranges>

ソースビュー

コードのコピー

      <Animation Duration="2000" Easing="EaseOutBack"></Animation>
<Labels Offset="30"></Labels>
<TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25"></TickMajor>
<TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor>
<Pointer Length="0.8" Width="4" Offset="0.15"></Pointer>
<Ranges>
      <cc1:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5" StartDistance="0.6" StartValue="0" StartWidth="2">
           <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
                  <Fill Color="#7BA0CC"></Fill>
            </RangeStyle>
      </cc1:GaugelRange>
      <cc1:GaugelRange EndDistance="0.54" EndValue="75" EndWidth="20" StartDistance="0.58" StartValue="10" StartWidth="5">
            <RangeStyle Stroke="White" StrokeWidth="0">
                  <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient"></Fill>
           </RangeStyle>
      </cc1:GaugelRange>
      <cc1:GaugelRange EndDistance="0.5" EndValue="100" EndWidth="25" StartDistance="0.54" StartValue="175" StartWidth="20">
            <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
                  <Fill Color="#7BA0CC"></Fill>
            </RangeStyle>
     </cc1:GaugelRange>
</Ranges>

次の項目のスタイルを設定することに注意してください。

Animation：アニメーションのオプションを設定します。ここでは、アニメーションの Duration と Easingを設定します。
Labels：ゲージラベルのオプションとスタイルを設定します。ここでは、ラベルの Offset を設定します。
TickMajor：主目盛線のオプションとスタイルを設定します。ここでは、主目盛線の Position、Offset、Interval、および Factor、さらに表示／非表示を設定します。
TickMinor：補助目盛線のオプションとスタイルを設定します。ここでは、補助目盛線の Position、Offset、および表示／非表示を設定します。
Pointer：ゲージポインタのオプションとスタイルを設定します。ここでは、色とストロークを含むポインタのスタイルを設定します。
GaugelRange：ゲージ範囲のオプションとスタイルを設定します。ここでは、範囲の位置関係とスタイルを設定します。

アプリケーションを実行し、ゲージが次のような表示になったことを確認します。

加えたスタイル変更がコントロールに反映されていることに注意してください。

この手順では、C1RadialGauge コントロールの外観をカスタマイズしました。次の手順では、コントロールの動作をカスタマイズします。