DataGrid for WPF/Silverlight
手順 1:マスター/詳細グリッドの設定
製品の概要 > チュートリアル (Silverlight のみ) > マスター/詳細ビューの作成 > 手順 1:マスター/詳細グリッドの設定

この手順では、最初に Visual Studio で DataGrid for Silverlight を使用する Silverlight グリッドアプリケーションを作成します。新しい Silverlight プロジェクトを作成し、C1DataGrid コントロールをアプリケーションに追加します。

プロジェクトをセットアップし、C1DataGrid コントロールをアプリケーションに追加するには、次の手順に従います。

  1. Visual Studio で、[ファイル]→[新しいプロジェクト]を選択します。
  2. [新しいプロジェクト]ダイアログボックスで、左ペインから言語を選択し(この例では C# を使用)、テンプレートリストから[Silverlight アプリケーション]を選択します。[名前]テキストボックスに「MasterDetail」と入力し、[OK]をクリックします。[新しい Silverlight アプリケーション]ダイアログボックスが表示されます。
  3. 既定の設定のまま[OK]をクリックすると、[新しい Silverlight アプリケーション]ダイアログボックスが閉じ、プロジェクトが作成されます。
  4. プロジェクトの XAML ウィンドウで、カーソルを<Grid> タグと </Grid>と タグの間に置き、1回クリックします。
  5. ツールボックスに移動し、[C1DataGrid]アイコンをダブルクリックして、MainPage.xaml にグリッドコントロールを追加します。XAML マークアップは次のようになります。
    XAML
    コードのコピー
    <UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"  x:Class="MasterDetail.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">
          <c1:C1DataGrid></c1:C1DataGrid>
      </Grid>
    </UserControl>
    
  6. <c1:C1DataGrid> タグが既存のコンテンツを含む場合、コンテンツを削除します。タグは次のように表示されます。
    XAML
    コードのコピー
    <c1:C1DataGrid></c1:C1DataGrid>
    
  7. x:Name="c1DataGrid1" を <c1:C1DataGrid> タグに追加して、グリッドに名前を付けます。次のようになります。
    XAML
    コードのコピー
    <c1:C1DataGrid x:Name="c1DataGrid1">
    
    コントロールに一意の識別子を付けると、コードでその C1DataGrid コントロールにアクセスできるようになります。
  8. <c1:C1DataGrid> タグに CanUserAddRows="False" を追加します。次のようになります。
    XAML
    コードのコピー
    <c1:C1DataGrid x:Name="c1DataGrid1" CanUserAddRows="False">
    
    ユーザーはグリッドに新規行を追加できなくなります。
  9. <c1:C1DataGrid> タグに Margin="5" を追加します。次のようになります。
    XAML
    コードのコピー
    <c1:C1DataGrid x:Name="c1DataGrid1" CanUserAddRows="False" Margin="5">
    
    これで、グリッドの周囲にマージンが追加されます。

ここまでの成果

これで、基本的なグリッドアプリケーションを作成できました。次の手順では、プロジェクトに XML データソースを追加します。