手順 1：アプリケーションの作成

この手順では、Visual Studio で Gauges for Silverlight を使用する Silverlight アプリケーションを作成し、StackPanel パネルを追加して、アプリケーションに追加するコントロールのレイアウトをカスタマイズします。

プロジェクトを設定するには、次の手順に従います。

Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインから言語を選択し、テンプレートリストから［Silverlight アプリケーション］を選択します。プロジェクトの名前を入力し、［OK］をクリックします。［新しい Silverlight アプリケーション］ダイアログボックスが表示されます。
［OK］をクリックすると、［新しい Silverlight アプリケーション］ダイアログボックスが閉じ、プロジェクトが作成されます。
ソリューションエクスプローラでプロジェクトを右クリックし、［参照の追加］を選択します。
［参照の追加］ダイアログボックスで、C1.Silverlight.dll および C1.Silverlight.Gauge.dll アセンブリを見つけて選択します。［OK］をクリックして、これらのアセンブリへの参照をアプリケーションに追加します。

ツールボックスに移動し、［StackPanel］アイコンをダブルクリックして、MainPage.xaml にパネルを追加します。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></StackPanel> </Grid>

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></StackPanel>
  </Grid>

<StackPanel> タグに x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" を追加します。次のようになります。

XAML	コードのコピー
<StackPanel x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"> </StackPanel>

これで、パネル内の要素は、中央で縦方向に配置されて表示されます。

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

<StackPanel> タグに x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" を追加します。次のようになります。

XAML	コードのコピー
<StackPanel x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> </StackPanel>

これで、パネル内の要素は、中央で横方向に配置されて表示されます。

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