手順 2：コントロールの追加

この手順では、プロジェクトに C1RadialGauge、C1LinearGauge、および C1Knob コントロールを追加し、ゲージコントロールの現在値を表示する標準の TextBox コントロールを追加して、アプリケーションを設定します。

これらのゲージコントロールをアプリケーションに追加するには、次の手順に従います。

プロジェクトの XAML ウィンドウで、カーソルを <StackPanel x:Name="sp2"> タグと </StackPanel> タグの間に置きます。

ツールボックスに移動し、［C1Knob］アイコンをダブルクリックして、StackPanel にコントロールを追加します。XAML マークアップは次のようになります。

XAML	コードのコピー
<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1Gauges.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <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"> <c1:C1Knob></c1:C1Knob> </StackPanel> </StackPanel> </Grid> </UserControl>

XAML

コードのコピー

<UserControl
 xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
 x:Class="C1Gauges.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <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">
     <c1:C1Knob></c1:C1Knob>
    </StackPanel>
   </StackPanel>
  </Grid>
</UserControl>

C1.Silverlight.Gauge 名前空間と <c1:C1Knob></c1:C1Knob> タグがプロジェクトに追加されていることがわかります。

x:Name="c1kb1" を <c1:C1Knob> タグに追加して、コントロールに名前を付けます。次のようになります。

XAML	コードのコピー
<c1:C1Knob x:Name="c1kb1">

それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。

<c1:C1Knob> タグに Width="150" を追加して、コントロールをサイズ変更します。次のようになります。

XAML	コードのコピー
<c1:C1Knob x:Name="c1kb1" Width="150">

アプリケーションを実行すると、このコントロールは少し小さく表示されます。

<c1:C1Knob> タグに Margin="5" を追加して、コントロールにマージンを追加します。次のようになります。

XAML	コードのコピー
<c1:C1Knob x:Name="c1kb1" Width="150" Margin="5">

これで、C1Knob とページに追加する他のコントロールの間にスペースが追加されます。

<c1:C1Knob> タグに ValueChanged="c1kb1_ValueChanged" を追加します。次のようになります。

XAML	コードのコピー
<c1:C1Knob x:Name="c1kb1" Width="150" Margin="5" ValueChanged="c1kb1_ValueChanged">

このイベントハンドラのコードは、この後の手順で追加します。

プロジェクトの XAML ウィンドウで、カーソルを </c1:C1Knob> タグと </StackPanel> タグの間に置きます。
ツールボックスに移動し、［C1RadialGauge］アイコンをダブルクリックして、StackPanel にコントロールを追加します。

<c1:C1RadialGauge> タグに x:Name="c1rg1" Width="150" Margin="5" を追加して、コントロールをカスタマイズします。次のようになります。

XAML	コードのコピー
<c1:C1RadialGauge x:Name="c1rg1" Width="150" Margin="5"> </c1:C1RadialGauge>

これで、C1RadialGauge の名前が指定され、コントロールがサイズ変更され、このコントロールと他のコントロールの間にスペースが追加されます。

プロジェクトの XAML ウィンドウで、カーソルを最初と２番目の </StackPanel> タグの間に置きます。
ツールボックスに移動し、［TextBox］アイコンをダブルクリックして、StackPanel に標準コントロールを追加します。

<TextBox> タグに x:Name="tb1" Width="300" Margin="5" TextChanged="tb1_TextChanged" を追加して、コントロールをカスタマイズします。次のようになります。

XAML	コードのコピー
<TextBox x:Name="tb1" Width="300" Margin="5" TextChanged="tb1_TextChanged"></TextBox>

これで、TextBox の名前が指定され、コントロールがサイズ変更され、このコントロールと他のコントロールの間にスペースが追加されます。イベントハンドラのコードは、この後の手順で追加します。

プロジェクトの XAML ウィンドウで、カーソルを </TextBox> タグと </StackPanel> タグの間に置きます。
ツールボックスに移動し、［C1LinearGauge］アイコンをダブルクリックして、StackPanel にコントロールを追加します。

<c1:C1LinearGauge> タグに x:Name="c1lg1" Width="300" Height="125" Margin="5" を追加して、コントロールをカスタマイズします。次のようになります。

XAML	コードのコピー
<c1:C1LinearGauge x:Name="c1lg1" Width="300" Height="125" Margin="5"> </c1:C1LinearGauge>

これで、C1LinearGauge コントロールの名前が指定され、コントロールがサイズ変更され、このコントロールと他のコントロールの間にスペースが追加されます。

アプリケーションを実行し、コントロールが次の図のように表示されていることを確認します。

いくつかの Gauges for Silverlight コントロールがアプリケーションに追加され、これらのコントロールがカスタマイズされました。これで、アプリケーションのユーザーインターフェイスは正しく設定されました。次の手順では、コードをアプリケーションに追加します。