ゲージの作成
続いて、グリッドにゲージを配置します。全部で4つのStackPanelを配置し、コントロールをページの中央に縦に並べていきます。
- 最初の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>
- 最初のStackPanelのすぐ下にTextBlockを配置し、ページのタイトルを設定します。
<TextBlock Text="Gauges for Silverlightを使った摂氏→華氏変換プログラム" FontSize="20" Foreground="Orchid" Margin="10"></TextBlock>
- 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">
- 目盛は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>
- 華氏を表示するゲージは、ゲージ内を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>
- 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>
- 最後の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によるページのデザインは完了です。