スピンボックスを持ったSilverlightアプリケーションを作成する

ComponentOne Studio for SilverlightのC1NumericBoxコントロールを使ったWebページの作成

全体のレイアウト作成

　今回のプログラムは、ユーザーが入力した「営業収入」「営業費用」「経常利益」から、「営業損益」「売上高営業利益率」「売上高経常利益率」を算出して表示します。

　計算処理はボタン「計算」のClickイベントハンドラで行うため、Buttonコントロールにイベントハンドラを設定しておきます。レイアウトは、Gridの中にTextBlockStackPanelを配置し、StackPanelの中にGridとButtonを配置するという入れ子のコードになるので、Gridの行列の作成と「Row」「Column」プロパティの指定を間違えないよう注意してください。

　また、表となるグリッドに配置するTextBlockのうち、右の列に配置するTextBlockは計算結果の表示に使用するので、Textプロパティは空にして、コントロールに名前を付けておきます。

<Grid x:Name="LayoutRoot" ShowGridLines="True" >
  <!-- 2行1列のグリッドを作成 -->
  <Grid.RowDefinitions	>
      <RowDefinition Height="50" />
      <RowDefinition Height="*" />
  </Grid.RowDefinitions>

    <!-- ページのタイトル -->
    <TextBlock Grid.Row="0" Text="2010年度 決算概要" FontSize="24" Foreground="Blue" 
             VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock.Effect>
            <DropShadowEffect BlurRadius="6" Color="DarkGray" />
        </TextBlock.Effect>

    </TextBlock>
  
    <!-- 表の作成 -->
    <StackPanel Grid.Row="1" HorizontalAlignment="Center">
      <Border BorderThickness="5" BorderBrush="Blue" Margin="10" >

         <!-- 6行2列のグリッドを作成 -->
         <Grid ShowGridLines="True" Width="320" >
             <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
             </Grid.RowDefinitions>
            
             <!-- 左の列に項目ラベルを作成 -->
             <TextBlock Grid.Column="0" Grid.Row="0" Text="営業収入(億円)" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock Grid.Column="0" Grid.Row="1" Text="営業費用(億円)" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock Grid.Column="0" Grid.Row="2" Text="経常利益(億円)" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock Grid.Column="0" Grid.Row="3" Text="営業損益(億円)" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock Grid.Column="0" Grid.Row="4" Text="売上高営業利益率" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock Grid.Column="0" Grid.Row="5" Text="売上高経常利益率" VerticalAlignment="Center" HorizontalAlignment="Center" />


             <!-- 右の列に計算結果を表示するTextBlockを3つ作成 -->
             <TextBlock x:Name="text1" Grid.Column="1" Grid.Row="3" Text="" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock x:Name="text2" Grid.Column="1" Grid.Row="4" Text="" VerticalAlignment="Center" HorizontalAlignment="Center" />
             <TextBlock x:Name="text3" Grid.Column="1" Grid.Row="5" Text="" VerticalAlignment="Center" HorizontalAlignment="Center" />
         </Grid>
      </Border>

      <!-- 計算処理のためのイベントハンドラを作成しておく -->
      <Button Width="100" Height="50" Content="計算"  VerticalAlignment="Center" 
              HorizontalAlignment="Center" Click="Button_Click" />
        
  </StackPanel>
</Grid>

C1NumericBoxコントロールの作成

　次は、表の中にC1NumericBoxコントロールを作成します。

　カーソルを左列の6つのTextBlockのコードの下に置き、ツールボックスからC1NumericBoxコントロールのアイコンを選んでダブルクリックします。C1NumericBoxコントロールが作成されるので、名前を付けてFormatプロパティに「c」を設定し、通貨表示になるようにします。「Minimum」「Maximum」プロパティをそれぞれ「1」「9999」に設定し、動作範囲を設定します。アップ／ダウンボタンによる増減値は「1」にし、「Increment」プロパティに設定します。このC1NumericBoxコントロールは、同じものを3つ作成してください。

　これで、入力値に「¥」記号が付き、3桁ずつ「,」で区切られた通貨書式で表示されます。

<!-- C1NumericBoxを3つ作成 -->
<c1:C1NumericBox x:Name="nb1" Grid.Column="1" Grid.Row="0"  Width="100" Height="25" 
                 Format="c" Margin="2" Minimum="1" Maximum="9999" Value="100" Increment="1" />
<c1:C1NumericBox x:Name="nb2" Grid.Column="1" Grid.Row="1"  Width="100" Height="25" 
                 Format="c" Margin="2" Minimum="1" Maximum="9999" Value="100" Increment="1" />
<c1:C1NumericBox x:Name="nb3" Grid.Column="1" Grid.Row="2"  Width="100" Height="25" 
                 Format="c" Margin="2" Minimum="1" Maximum="9999" Value="100" Increment="1" />

　XAMLのコードは以上でできあがりです。