逐步解說：在 DataRepeater 控制項中顯示資料 (Visual Studio)

發行項
06/10/2015

本逐步解說提供在 DataRepeater 控制項中顯示繫結資料的基本完整案例。

必要條件

這個逐步解說需要使用 Northwind 範例資料庫。

如果您的開發電腦上沒有這個資料庫，可以從 Microsoft 下載中心下載。如需相關說明，請參閱下載範例資料庫。

概觀

本逐步解說的第一個部分包含四項主要工作：

建立方案。
加入 DataRepeater 控制項。
加入資料來源。
加入資料繫結控制項。

注意事項
您的電腦對於下列指示中某些 Visual Studio 使用者介面項目的名稱或位置，可能會顯示不同的資訊：您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。如需詳細資訊，請參閱＜Visual Studio 中的自訂開發設定＞。

建立 DataRepeater 方案

在第一個步驟中，您會建立專案和方案。

若要建立 DataRepeater 方案

按一下 Visual Studio [檔案] 功能表上的 [新增專案]。
在 [新增專案] 對話方塊的 [專案類型] 窗格中，展開 [Visual Basic]，然後按一下 [Windows]。
按一下 [範本] 窗格中的 [Windows Form 應用程式]。
在 [名稱] 方塊中，輸入 DataRepeaterApp。
按一下 [確定]。

Windows Forms 設計工具隨即開啟。
從 [Windows Form 設計工具] 中選取表單。在 [屬性] 視窗中，將 [Size] 屬性設定為 800, 700。

加入 DataRepeater 控制項

在這個步驟中，您要將 DataRepeater 控制項加入至表單。

若要加入 DataRepeater 控制項

在 [檢視] 功能表上，按一下 [工具箱]。

[工具箱] 會開啟。
選取 [Visual Basic PowerPacks] 索引標籤。
將 DataRepeater 控制項拖曳到 [Form1] 上。
在 [屬性] 視窗中，將 [Location] 屬性設定為 0, 25。
將 [Size] 屬性設定為 460, 600。

加入資料來源

在這個步驟中，您要加入 DataRepeater 控制項的資料來源。

若要加入資料來源

按一下 [資料] 功能表上的 [顯示資料來源]。
在 [資料來源] 視窗中，按一下 [加入新資料來源]。
請選取 [選擇資料來源類型] 頁面上的 [資料庫]，再按 [下一步]。
在 [選擇資料連接] 頁面上，執行下列其中一個步驟：
- 如果下拉式清單中提供 Northwind 範例資料庫的資料連接，請按一下這個資料連接。
  
  -或-
- 按一下 [新增連接]，設定新的資料連接。如需詳細資訊，請參閱 How to: Create Connections to SQL Server Databases。
如果資料庫需要密碼，請選取選項以輸入機密資料，然後按一下 [下一步]。

注意事項

如果對話方塊隨即出現，請按一下 [是]，將檔案儲存到專案。
按一下 [將連接字串儲存到應用程式組態檔] 頁面上的 [下一步]。
在 [選擇您的資料庫物件] 頁面上，展開 [資料表] 節點。
選取 [Customers] 和 [Orders] 資料表旁邊的核取方塊，然後按一下 [完成]。

[NorthwindDataSet] 隨即加入至專案，而且 [Customers] 和 [Orders] 資料表會出現在 [資料來源] 視窗中。

注意事項
如果對話方塊隨即出現，請按一下 [是]，將檔案儲存到專案。

加入資料繫結控制項

在這個步驟中，您要將資料繫結控制項加入至 DataRepeater。

若要加入資料繫結控制項

在 [資料來源] 視窗中，選取 [Customers] 資料表的最上層節點。
在資料表節點上，按一下下拉式清單中的 [詳細資料]，將資料表的卸除型別變更為 [詳細資料]。
選取 [Customers] 資料表節點並將它拖曳到 DataRepeater 控制項的項目樣板區域 (上方區域) 上。

BindingNavigator 控制項隨即加入至表單，而且 [NorthwindDataSet]、[CustomersBindingSource]、[CustomersTableAdapter]、[TableAdapterManager] 和 [CustomersBindingNavigator] 元件也會加入至 [元件匣]。
選取所有的欄位及其關聯的標籤 (Label)，然後放置在靠近項目樣板區域左邊緣的地方。
選取後五個欄位 ([Region]、[Postal Code]、[Country]、[Phone] 和 [Fax]) 及其關聯的標籤，然後向上移至前六個欄位的右方。
選取項目樣板 (控制項的上方區域)。
在 [屬性] 視窗中，將 [Size] 屬性設定為 427, 170。

此時，您有一個將會顯示客戶重複清單的工作應用程式。您可以按 F5 執行此應用程式、變更資料，以及加入或刪除客戶資料錄。

在接下來的選擇性步驟中，您將學習如何自訂 DataRepeater 控制項。

後續步驟 (選擇性)

本逐步解說的這個部分包含四項選擇性工作：

變更 DataRepeater 控制項的外觀。
避免使用者加入或刪除資料錄。
將搜尋功能加入至 DataRepeater 控制項。
將主從式資料表加入至 DataRepeater 控制項。

變更 DataRepeater 控制項的外觀

在這個選擇性步驟中，您會在設計階段變更 DataRepeater 控制項的 BackColor，還會加入程式碼，以替代色彩的方式顯示資料列，並根據條件變更標籤的 ForeColor。

若要變更控制項的外觀

在 [Windows Form 設計工具] 中，選取 DataRepeater 控制項的主要 (下方) 區域。
在 [屬性] 視窗中，將 BackColor 屬性設定為白色。
按兩下 DataRepeater 開啟 [程式碼編輯器]。
在 [程式碼編輯器] 中，按一下 [事件] 下拉式清單中的 [DrawItem]。

在 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;
}

在 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;
}

按 F5 執行應用程式，並檢視自訂。

避免使用者加入或刪除資料錄

在這個選擇性步驟中，您要加入程式碼，以避免使用者在 DataRepeater 控制項中加入或刪除資料錄。

若要避免使用者加入和刪除資料錄

在 [Windows Form 設計工具] 中，按兩下表單開啟 [程式碼編輯器]。

將下列程式碼加入至 [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;

在 [類別名稱] 下拉式清單中，按一下 [BindingNavigatorDeleteItem]。在 [方法名稱] 下拉式清單中，按一下 [EnabledChanged]。
將下列程式碼加入至 BindingNavigatorDeleteItem_EnabledChanged 事件處理常式：
```
If BindingNavigatorDeleteItem.Enabled = True Then
    BindingNavigatorDeleteItem.Enabled = False 
End If
```
```
if (bindingNavigatorDeleteItem.Enabled == true)
{
    bindingNavigatorDeleteItem.Enabled = false;
}
```
注意事項

這是一個必要步驟，因為每次目前資料錄變更時，BindingSource 都會啟用 [DeleteItem] 按鈕。
按下 F5 執行應用程式。請注意，[DeleteItem] 按鈕處於停用狀態，而且您無法按 DELETE 鍵刪除項目。

注意事項
這是一個必要步驟，因為每次目前資料錄變更時，BindingSource 都會啟用 [DeleteItem] 按鈕。

將搜尋功能加入至 DataRepeater 控制項

在這個選擇性步驟中，您會實作在 DataRepeater 控制項中搜尋值的功能。如果找到搜尋字串，控制項就會選取含有此值的項目，並將項目捲動到檢視。

若要加入搜尋功能

將 TextBox 控制項從 [工具箱] 拖曳至包含 DataRepeater 控制項的表單。

將它放置在 DataRepeater 控制項的下方。
在 [屬性] 視窗中，將 [Name] 屬性變更為 SearchTextBox。
將 Button 控制項從 [工具箱] 拖曳至包含 DataRepeater 控制項的表單。將它放置在 DataRepeater 控制項的下方。
在 [屬性] 視窗中，將 [Name] 屬性變更為 SearchButton。將 [Text] 屬性變更為 Search。

按兩下 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.");
}

按下 F5 執行應用程式。在 [SearchTextBox] 中輸入客戶 ID，然後按一下 [搜尋] 按鈕。

將主從式資料表加入至 DataRepeater

在這個選擇性步驟中，您會加入第二個 DataRepeater 控制項，以顯示每個客戶的相關訂單。

若要加入主從式資料表

從 [工具箱] 的 [Visual Basic PowerPacks] 索引標籤中，將第二個 DataRepeater 控制項拖曳到表單上。
在 [屬性] 視窗中，將 [Location] 屬性設定為 465, 25。
將 [Size] 屬性設定為 315, 600。
在 [資料來源] 視窗中，展開 [Customers] 資料表節點，並選取 [Orders] 資料表的詳細資料節點。
在資料表節點上，按一下下拉式清單中的 [詳細資料]，將這個 [Orders] 資料表的卸除型別變更為 [詳細資料]。
將這個 [Orders] 資料表節點拖曳到第二個 DataRepeater 控制項的項目樣板區域 (上方區域) 上。

[OrdersBindingSource] 元件和 [OrdersTableAdapter] 元件隨即加入至 [元件匣]。
按下 F5 執行應用程式。當您在第一個 DataRepeater 控制項中選取各個客戶時，該客戶的訂單便會顯示在第二個 DataRepeater 控制項中。