データをゲージ表示するSilverlightアプリケーションの作成

ComponentOne StudioのGauges for Silverlightを使ったWebページの作成

ゲージの作成

　続いて、グリッドにゲージを配置します。全部で4つのStackPanelを配置し、コントロールをページの中央に縦に並べていきます。

1. 最初のStackPanelの中に、3つのStackPanelを入れます。StackPanelのプロパティは全て同じで構いません。コントロールをページの中央へ縦に並べられるように設定します。

   <Grid x:Name="LayoutRoot">
         <StackPanel x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" 
                     HorizontalAlignment="Center" VerticalAlignment="Center">
             <StackPanel x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" 
                         HorizontalAlignment="Center" VerticalAlignment="Center">
             </StackPanel>
             <StackPanel x:Name="sp3" Width="Auto" Height="Auto" Orientation="Horizontal" 
                         HorizontalAlignment="Center" VerticalAlignment="Center">
             </StackPanel>
             <StackPanel x:Name="sp4" Width="Auto" Height="Auto" Orientation="Horizontal" 
                         HorizontalAlignment="Center" VerticalAlignment="Center">
             </StackPanel>
         </StackPanel>
     </Grid>
   

2. 最初のStackPanelのすぐ下にTextBlockを配置し、ページのタイトルを設定します。

   <TextBlock Text="Gauges for Silverlightを使った摂氏→華氏変換プログラム" FontSize="20"
              Foreground="Orchid" Margin="10"></TextBlock>
   

3. 2番目のStackPanelの中に、C1RadialGaugeコントロールを2つ配置します。1つは摂氏の温度を表示するゲージで、もう1つは華氏を表示するゲージです。摂氏を表示するゲージは、ゲージの中を黒色にし、140度からスタートして280度の動作範囲にします。温度範囲は0度から100度で、ポインタを赤色に塗りつぶします。

   <c1gauge:C1RadialGauge x:Name="c1rg1" Width="250" Margin="5" Background="Black"
                          StartAngle="140" SweepAngle="280" PointerFill="red" Maximum="100" Minimum="0">     
   

4. 目盛は0から100までの2間隔で、数値は10間隔で白色で表示します。Locationプロパティを「0.9」に設定することで、目盛の内側に数値を表示します。

   	<c1gauge:C1GaugeLabel From="0" To="100" Interval="10" Location="0.9" Foreground="White"/>
       <c1gauge:C1GaugeMark From="0" To="100" Interval="2" Location="1.0"/>
   </c1gauge:C1RadialGauge>
   

5. 華氏を表示するゲージは、ゲージ内をNavyで塗りつぶし、ポインタを赤色にします。華氏の方が温度範囲が広いので、ゲージのサイズを少し大きくし、目盛の間隔も少なくします。また、温度範囲が0から220までになるので、数値表示は目盛の外側にします。

   <c1gauge:C1RadialGauge x:Name="c1rg2" Width="270" Margin="5" Background="Navy"
                          StartAngle="140" SweepAngle="280" PointerFill="red" Maximum="220" Minimum="0">
       <c1gauge:C1GaugeLabel From="0" To="220" Interval="10" Location="1.1" Foreground="White"/>
       <c1gauge:C1GaugeMark From="0" To="220" Interval="5" Location="0.85"/>
   </c1gauge:C1RadialGauge>
   

   できあがった2つのゲージ

   
6. 3番目のStackPanelの中に、TextBlockを2つ配置します。ここでは、摂氏・華氏2つの温度を数値表示します。

   <StackPanel x:Name="sp3" Width="Auto" Height="Auto" Orientation="Horizontal" 
               HorizontalAlignment="Center" VerticalAlignment="Center">
   	<TextBlock x:Name="txt1" Width="200" Text="摂氏（C）" FontSize="12"></TextBlock>
       <TextBlock x:Name="txt2" Width="200" Text="華氏（F）" FontSize="12"></TextBlock>
   </StackPanel>
   

7. 最後のStackPanelの中に、C1Knobコントロールを作成します。動作範囲はデフォルトのまま（0～100）で、イベントハンドラに「c1kb1_ValueChanged」を設定します。ノブの操作はマウスのドラッグで行えるようにするので、InteractionModeプロパティに「Drag」を設定します。

   <StackPanel x:Name="sp4" Width="Auto" Height="Auto" Orientation="Horizontal" 
               HorizontalAlignment="Center" VerticalAlignment="Center">
   	<c1gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5" ValueChanged="c1kb1_ValueChanged" InteractionMode="Drag">
       </c1gauge:C1Knob>
   </StackPanel>
   

   できあがったノブ

   

　以上で、XAMLによるページのデザインは完了です。