この手順では、最初に Visual Studio で Silverlight グリッドアプリケーションを作成します。引き続き、アプリケーションのユーザーインターフェイス（UI）を作成してカスタマイズし、プロジェクトに C1DataGrid コントロールを追加します。

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

1. Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
2. ［新しいプロジェクト］ダイアログボックスで、左ペインから言語を選択し、テンプレートリストから［Silverlight アプリケーション］を選択します。プロジェクトの名前（たとえば、「C1DataGrid」）を入力し、［OK］をクリックします。［新しい Silverlight アプリケーション］ダイアログボックスが表示されます。
3. 既定の設定のまま［OK］をクリックすると、［新しい Silverlight アプリケーション］ダイアログボックスが閉じ、プロジェクトが作成されます。
4. MainPage.xaml ファイルが開いていない場合は、ソリューションエクスプローラに移動し、MainPage.xaml 項目をダブルクリックします。
5. XAML ビューで、 タグを探します。
6. <UserControl>タグで、Width="400" Height="300"（もしくは d:DesignWidth="400" d:DesignHeight="300"）を Width="600" Height="400" に置き換えます。
   これで、Silverlight アプリケーションのサイズが大きくなります。
7. カーソルを <Grid x:Name="LayoutRoot" Background="White"> タグの直後に置き、次のマークアップを追加します。

   XAML	コードのコピー
   <!-- グリッドレイアウト--> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions>

   この行定義は、グリッドのレイアウトを定義します。
8. タイトルをアプリケーションに追加します。それには、次の TextBlock を </Grid.RowDefinitions> タグの真下に追加します。

   XAML	コードのコピー
   <!-- タイトル --> <TextBlock Text="DataGrid for Silverlight" Margin="5" FontSize="16"/>

9. プロジェクトの XAML ウィンドウで、カーソルを </Grid>タグの真上に置き１回クリックします。
10. ツールボックスに移動し、［C1DataGrid］アイコンをダブルクリックして、MainPage.xaml にグリッドコントロールを追加します。XAML マークアップは次のようになります。

    XAML

    コードのコピー

    <UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DataGrid.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="600" Height="400"> <Grid x:Name="LayoutRoot" Background="White"> <!-- グリッドレイアウト--> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- タイトル --> <TextBlock Text="DataGrid for Silverlight" Margin="5" FontSize="16"/> <c1:C1DataGrid></c1:C1DataGrid> </Grid> </UserControl>

    C1.Silverlight.DataGrid 名前空間と タグがプロジェクトに追加されていることがわかります。
11. <c1:C1DataGrid>タグが既存のコンテンツを含む場合、コンテンツを削除します。タグは次のように表示されます。

    XAML	コードのコピー
    <c1:C1DataGrid>

12. x:Name="_c1DataGrid" を <c1:C1DataGrid> タグに追加して、グリッドに名前を付けます。次のようになります。

    XAML	コードのコピー
    <c1:C1DataGrid x:Name="_c1DataGrid">

    コントロールに一意の識別子を付けると、コードでその C1DataGrid コントロールにアクセスできるようになります。
13. グリッドの位置を定義します。それには、 <c1:C1DataGrid> タグを Grid.Row="1" に追加します。次のようになります。

    XAML	コードのコピー
    <c1:C1DataGrid x:Name="_c1DataGrid" Grid.Row="1">

14. </c1:C1DataGrid>タグの直後に次のマークアップを追加します。

    XAML	コードのコピー
    <TextBlock x:Name="_tbStatus" Text="Ready" VerticalAlignment="Center" FontSize="12" Foreground="Gray" Margin="5" Grid.Row="2" />

    この TextBlock は、ステータス情報テキストを表示するために使用されます。

ここまでの成果

アプリケーションを実行し、ページにタイトル、グリッド、テキスト（グリッドの下）が含まれていることを確認します。これで、基本的なグリッドアプリケーションを作成できました。ただし、グリッドは空白でデータが入っていません。次の手順では、プロジェクトにデータベースを追加し、グリッドをデータソースに連結します。