Share via

チュートリアル : DataRepeater コントロールでのデータの表示 (Visual Studio)

  • [アーティクル]

更新 : 2008 年 7 月

このチュートリアルでは、DataRepeater コントロールにバインドされたデータを表示する基本的なシナリオ全体を示します。

必要条件

このチュートリアルには、Northwind サンプル データベースが必要です。

開発用コンピュータにこのデータベースがインストールされていない場合は、Microsoft ダウンロード センターからダウンロードできます。手順については、「サンプル データベースのダウンロード (LINQ to SQL)」を参照してください。

[概要]

このチュートリアルの前半部分は、次の 4 つの主要な手順で構成されています。

  • ソリューションを作成する。

  • DataRepeater コントロールを追加する。

  • データ ソースを追加する。

  • データ バインド コントロールを追加する。

Cc488278.alert_note(ja-jp,VS.90).gifメモ :

お使いのマシンで、Visual Studio ユーザー インターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio の設定」を参照してください。

DataRepeater ソリューションの作成

最初に、プロジェクトおよびソリューションを作成します。

DataRepeater ソリューションを作成するには

  1. Visual Studio の [ファイル] メニューの [新しいプロジェクト] をクリックします。

  2. [新しいプロジェクト] ダイアログ ボックスの [プロジェクトの種類] ペインで、[Visual Basic] を展開し、[Windows] をクリックします。

  3. [テンプレート] ペインの [Windows フォーム アプリケーション] をクリックします。

  4. [プロジェクト名] ボックスに「DataRepeaterApp」と入力します。

  5. [開く] をクリックします。

    Windows フォーム デザイナが開きます。

  6. Windows フォーム デザイナでフォームを選択します。[プロパティ] ウィンドウで、Size プロパティを 800, 700 に設定します。

DataRepeater コントロールの追加

この手順では、フォームに DataRepeater コントロールを追加します。

DataRepeater コントロールを追加するには

  1. [表示] メニューの [ツールボックス] をクリックします。

    ツールボックスが表示されます。

  2. [Visual Basic PowerPacks] タブをクリックします。

  3. DataRepeater コントロールを Form1 にドラッグします。

  4. [プロパティ] ウィンドウで、Location プロパティを 0, 25 に設定します。

  5. Size プロパティを 460, 600 に設定します。

データ ソースの追加

この手順では、DataRepeater コントロールのデータ ソースを追加します。

データ ソースを追加するには

  1. [データ] メニューの [データ ソースの表示] をクリックします。

  2. [データ ソース] ウィンドウで、[新しいデータ ソースの追加] をクリックします。

  3. [データソースの種類を選択] ページで、[データベース] をクリックし、[次へ] をクリックします。

  4. [データ接続の選択] ページで、次のいずれかの操作を行います。

    • Northwind サンプル データベースへのデータ接続がドロップダウン リストに表示されている場合は、これをクリックします。

      または

    • [新しい接続] をクリックし、新しいデータ接続を構成します。詳細については、「方法 : SQL Server データベースへの接続を作成する」を参照してください。

  5. データベースにパスワードが必要な場合は、該当するオプションを選択して重要情報を含め、[次へ] をクリックします。

    Cc488278.alert_note(ja-jp,VS.90).gifメモ :

    ダイアログ ボックスが表示された場合は、[はい] をクリックしてファイルをプロジェクトに保存します。

  6. [アプリケーション構成ファイルに接続文字列を保存] ページで、[次へ] をクリックします。

  7. [データベース オブジェクトの選択] ページの [テーブル] ノードを展開します。

  8. Customers テーブルと Orders テーブルの横のチェック ボックスをオンにし、[完了] をクリックします。

    プロジェクトに NorthwindDataSet が追加され、[データ ソース] ウィンドウに Customers テーブルと Orders テーブルが表示されます。

データ バインド コントロールの追加

この手順では、DataRepeater にデータ バインド コントロールを追加します。

データ バインド コントロールを追加するには

  1. [データ ソース] ウィンドウで、Customers テーブルの最上位ノードを選択します。

  2. テーブル ノードのドロップダウン リストの [詳細] をクリックして、テーブルのドロップ タイプを [詳細] に変更します。

  3. [Customers] テーブル ノードを選択し、DataRepeater コントロールの項目テンプレート領域 (上部領域) にドラッグします。

    フォームに BindingNavigator コントロールが追加され、コンポーネント トレイに NorthwindDataSet、CustomersBindingSource、CustomersTableAdapter、TableAdapterManager、および CustomersBindingNavigator の各コンポーネントが追加されます。

  4. すべてのフィールドとそれらに関連付けられているラベルを選択し、項目テンプレート領域の左端近くに配置します。

  5. 後半の 5 つのフィールド (Region、Postal Code、Country、Phone、および Fax) とそれらに関連付けられているラベルを選択し、上へ移動して前半の 6 つのフィールドの右側に配置します。

  6. 項目テンプレート (コントロールの上部領域) を選択します。

  7. [プロパティ] ウィンドウで、Size プロパティを 427, 170 に設定します。

この時点で、顧客を独立した一覧で表示できるアプリケーションが作成されました。F5 キーを押してこのアプリケーションを実行し、データの変更、および顧客レコードの追加と削除を行うことができます。

次の省略可能な手順では、DataRepeater コントロールをカスタマイズする方法について説明します。

次の手順 (省略可能)

このチュートリアルの後半部分は、次の 4 つの省略可能な手順で構成されています。

  • DataRepeater コントロールの外観を変更する。

  • ユーザーがレコードの追加または削除を行うことができないようにする。

  • DataRepeater コントロールに検索機能を追加する。

  • DataRepeater コントロールにマスター/詳細テーブルを追加する。

DataRepeater コントロールの外観の変更

この省略可能な手順では、デザイン時に DataRepeater コントロールの BackColor を変更します。また、行の色を交互にし、条件に応じてラベルの ForeColor を変更するコードを追加します。

コントロールの外観を変更するには

  1. Windows フォーム デザイナで、DataRepeater コントロールのメイン (下部) 領域を選択します。

  2. [プロパティ] ウィンドウで、BackColor プロパティを白に設定します。

  3. DataRepeater をダブルクリックしてコード エディタを表示します。

  4. コード エディタで、[イベント] ボックスの一覧の [DrawItem] をクリックします。

  5. DrawItem イベント ハンドラに、BackColor を交互にする次のコードを追加します。

    ' Alternate the back color.
If (e.DataRepeaterItem.ItemIndex Mod 2) <> 0 Then
    ' Apply the secondary back color.
    e.DataRepeaterItem.BackColor = Color.AliceBlue
Else
    ' Apply the default back color.
    e.DataRepeaterItem.BackColor = DataRepeater1.BackColor
End If

    // Alternate the back color.
if ((e.DataRepeaterItem.ItemIndex % 2) != 0)
// Apply the secondary back color.
{
    e.DataRepeaterItem.BackColor = Color.AliceBlue;
}
else
{
    // Apply the default back color.
    e.DataRepeaterItem.BackColor = dataRepeater1.BackColor;
}

  6. DrawItem イベント ハンドラに、条件に応じてラベルの ForeColor を変更する次のコードを追加します。

    If e.DataRepeaterItem.Controls(RegionTextBox.Name).Text _
 = "" Then
    e.DataRepeaterItem.Controls("RegionLabel"). _
     ForeColor = Color.Red
Else
    e.DataRepeaterItem.Controls("RegionLabel"). _
     ForeColor = Color.Black
End If

    if (e.DataRepeaterItem.Controls[regionTextBox.Name].Text == "")
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Red;
}
else
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Black;
}

  7. F5 キーを押してアプリケーションを実行し、カスタマイズを確認します。

ユーザーがレコードの追加または削除を行うことができないようにする

この省略可能な手順では、ユーザーが DataRepeater コントロールでレコードの追加または削除を行うことができないようにするコードを追加します。

ユーザーがレコードの追加または削除を行うことができないようにするには

  1. Windows フォーム デザイナで、フォームをダブルクリックしてコード エディタを開きます。

  2. Form_Load イベントに次のコードを追加します。

    DataRepeater1.AllowUserToAddItems = False
DataRepeater1.AllowUserToDeleteItems = False
BindingNavigatorAddNewItem.Enabled = False
CustomersBindingSource.AllowNew = False
BindingNavigatorDeleteItem.Enabled = False

    dataRepeater1.AllowUserToAddItems = false;
dataRepeater1.AllowUserToDeleteItems = false;
bindingNavigatorAddNewItem.Enabled = false;
customersBindingSource.AllowNew = false;
bindingNavigatorDeleteItem.Enabled = false;

  3. [クラス名] ドロップダウン リストで、[BindingNavigatorDeleteItem] をクリックします。[メソッド名] ドロップダウン リストで、[EnabledChanged] をクリックします。

  4. BindingNavigatorDeleteItem_EnabledChanged イベント ハンドラに次のコードを追加します。

    If BindingNavigatorDeleteItem.Enabled = True Then
    BindingNavigatorDeleteItem.Enabled = False
End If

    if (bindingNavigatorDeleteItem.Enabled == true)
{
    bindingNavigatorDeleteItem.Enabled = false;
}
    Cc488278.alert_note(ja-jp,VS.90).gifメモ :

    現在のレコードが変更されるたびに BindingSource によって DeleteItem ボタンが有効になるため、この手順が必要となります。

  5. F5 キーを押してアプリケーションを実行します。DeleteItem ボタンが無効になっており、Del キーを押しても項目を削除できないことを確認します。

DataRepeater コントロールへの検索機能の追加

この省略可能な手順では、DataRepeater コントロールで値を検索する機能を実装します。検索文字列が見つかると、このコントロールはその値を含む項目を選択し、スクロールして表示します。

検索機能を追加するには

  1. DataRepeater コントロールを含んでいるフォームに、ツールボックスから TextBox コントロールをドラッグします。

    それを DataRepeater コントロールの下に配置します。

  2. [プロパティ] ウィンドウで Name プロパティを SearchTextBox に変更します。

  3. DataRepeater コントロールを含んでいるフォームに、ツールボックスから Button コントロールをドラッグします。それを DataRepeater コントロールの下に配置します。

  4. [プロパティ] ウィンドウで Name プロパティを SearchButton に変更します。Text プロパティを Search に変更します。

  5. Button コントロールをダブルクリックしてコード エディタを開き、SearchButton_Click イベント ハンドラに次のコードを追加します。

    Dim foundIndex As Integer
Dim searchString As String
searchString = SearchTextBox.Text
' Search for the string in the CustomerID field.
foundIndex = CustomersBindingSource.Find("CustomerID", _
 searchString)
If foundIndex > -1 Then
    DataRepeater1.CurrentItemIndex = foundIndex
Else
    MsgBox("Item " & searchString & " not found.")
End If

    int foundIndex;
string searchString;
searchString = searchTextBox.Text;
// Search for the string in the CustomerID field.
foundIndex = customersBindingSource.Find("CustomerID", searchString);
if (foundIndex > -1)
{
    dataRepeater1.CurrentItemIndex = foundIndex;
}
else
{
    MessageBox.Show("Item " + searchString + " not found.");
}

  6. F5 キーを押してアプリケーションを実行します。[SearchTextBox] に顧客 ID を入力し、[検索] ボタンをクリックします。

DataRepeater へのマスター/詳細テーブルの追加

この省略可能な手順では、顧客ごとに関連する注文を表示する、2 番目の DataRepeater コントロールを追加します。

マスター/詳細テーブルを追加するには

  1. ツールボックスの [Visual Basic PowerPacks] タブから 2 番目の DataRepeater コントロールをフォームにドラッグします。

  2. [プロパティ] ウィンドウで、Location プロパティを 465, 25 に設定します。

  3. Size プロパティを 315, 600 に設定します。

  4. [データ ソース] ウィンドウで、[Customers] テーブル ノードを展開し、Orders テーブルの詳細ノードを選択します。

  5. この Orders テーブルのドロップ タイプを、テーブル ノードのドロップダウン リストの [詳細] をクリックして [詳細] に変更します。

  6. この [Orders] テーブル ノードを 2 番目の DataRepeater コントロールの項目テンプレート領域 (上部領域) にドラッグします。

    OrdersBindingSource コンポーネントおよび OrdersTableAdapter コンポーネントがコンポーネント トレイに追加されます。

  7. F5 キーを押してアプリケーションを実行します。1 番目の DataRepeater コントロールで顧客を選択すると、2 番目の DataRepeater コントロールにその顧客の注文が表示されます。

参照

処理手順

方法 : DataRepeater コントロールにバインドされたデータを表示する (Visual Studio)

方法 : DataRepeater コントロールに非バインド データを表示する (Visual Studio)

方法 : DataRepeater コントロールのレイアウトを変更する (Visual Studio)

方法 : DataRepeater コントロールに項目ヘッダーを表示する (Visual Studio)

方法 : DataRepeater コントロールでデータを検索する (Visual Studio)

方法 : 2 つの DataRepeater コントロールを使用してマスタ/詳細形式のフォームを作成する (Visual Studio)

方法 : DataRepeater コントロールの外観を変更する (Visual Studio)

方法 : DataRepeater の項目の追加と削除を無効にする (Visual Studio)

DataRepeater コントロールのトラブルシューティング (Visual Studio)

概念

DataRepeater コントロールの概要 (Visual Studio)

履歴の変更

日付

履歴

理由

2008 年 7 月

トピックを追加

SP1 機能変更