首頁 > 資料 > 建立 CLR 物件資料來源

建立 CLR 物件資料來源

• 定義及填入 DataTable
• 調整資料集合以符合 WPF 集合
• 繫結至 Expression Blend 中的資料來源

在 Microsoft® Expression Blend™ 中，您可以使用 XML 資料來源及 CLR 物件資料來源。XML 資料來源十分容易使用，但是 CLR 物件資料來源則複雜許多。下列程序會顯示如何在 Expression Blend 應用程式中顯示來自 Common Language Runtime (CLR) 資料來源的資料。前兩項工作包括取得來自範例資料庫的資料，然後將資料轉換為 Expression Blend 可以繫結的格式。第三項工作包括建立 Expression Blend 專案，並在該專案中建立繫結至該資料的元素。

若要遵循本主題中所寫的程序，則需要已安裝 AdventureWorks 範例資料庫的 Microsoft® Visual Studio® 2005 及 Microsoft® SQL Server™ 2005。如需如何取得 AdventureWorks 範例的詳細資訊，請參閱 MSDN 上的＜安裝 AdventureWorks 範例資料庫及範例＞(英文)。 如果需要，也可以從另一個資料庫建立 DataTable 或 DataSet。因此，請調整本主題中的第一個及第二個工作，使其符合您所擁有的資料。只要使用的是 CLR (或 Microsoft® .NET Framework) 資料來源，原則就完全相同。

定義及填入 DataTable

下列程序描述如何在 Visual Studio 2005 中建立類別程式庫，將 AdventureWorks 範例資料庫中的資料填入 DataTable 例項。

1. 在 Visual Studio 2005 的 [檔案] 功能表上，指向 [開新檔案]，然後按一下 [專案]。
   此時會開啟 [新增專案] 對話方塊。
2. 在 [專案類型] 下，按一下 [Visual C#]。並在 [範本] 下，按一下 [類別庫]。將新專案命名為 AWDataSource，然後按一下 [確定]。
   Visual Studio 會產生新類別程式庫專案的程式碼，並開啟 Class1.cs 檔案以供您編輯。
3. 在 Class1.cs 檔案中，將公用類別定義的名稱從 Class1 變更為 ProductPhotosCollection。
   此名稱比較具有描述性。
4. 在 [方案總管] 中，以滑鼠右鍵按一下專案名稱 (AWDataSource)，並指向 [新增]，然後按一下 [新增項目]。
   此時會開啟 [加入新項目] 對話方塊。
5. 在範本清單中選取 [DataSet]，並將項目命名為 ProductPhotos.xsd，然後按一下 [新增]。
   DataSet 會以結構描述檔案及支援類別檔案的形式新增至專案，而結構描述檔案會開啟以供您編輯。
   DataSet 是一種含有資料表格的物件，您可以使用此資料表格暫時將資料儲存在記憶體中，以用於執行中應用程式。如需詳細資訊，請參閱 MSDN 上的＜Visual Studio 資料集概觀＞(英文)。
6. 在 [伺服器總管] 中，以滑鼠右鍵按一下 [資料連接]，然後按一下 [加入資料連接]。
   此時會開啟 [選擇資料來源] 對話方塊。
7. [資料來源] 欄位應該已列出 [Microsoft SQL Server (SqlClient)]。
   

   如果不要使用 SQL 資料庫，請按一下 [變更] 按鈕選取替代資料來源。下列步驟會和您在 Visual Studio 的 [選擇資料來源] 對話方塊中看到的不同。

8. 在 [伺服器名稱] 欄位中，輸入已安裝 AdventureWorks 資料庫的 SQL Server 例項名稱。

   如果是要使用 SQL 資料庫，而不是 AdventureWorks 資料庫，則請選取已安裝 SQL 資料庫的伺服器名稱。

9. 在 [登入至伺服器] 之下，選取登入 SQL Server 例項所需的驗證方法。您可能需要連絡伺服器系統管理員以取得該資訊。[Windows 驗證] 會使用您目前的登入認證。[SQL Server 驗證] 則需要有設定來存取資料庫的帳戶之使用者名稱及密碼。
10. 在 [連接至資料庫] 下，選取 [AdventureWorks] 資料庫，此資料庫只有在登入認證正確且所選取 SQL Server 電腦上已安裝 AdventureWorks 資料庫時才看得到。
11. 按一下 [測試連接] 按鈕。
    如果測試連線失敗，請連絡 SQL Server 管理員尋求協助。
12. 按一下 [確定] 完成資料連接的建立。
    在 [伺服器總管] 中，新連線會出現在名為 <伺服器名稱>.AdventureWorks.dbo 的 [資料連接] 節點下。
13. 在 [伺服器總管] 中，展開新 [<伺服器名稱>.AdventureWorks.dbo] 連接節點，並展開 [資料表] 節點，然後找出 ProductPhoto 表格。在設計介面中開啟 ProductPhotos.xsd 檔案後，將 ProductPhoto 表格從 [伺服器總管] 拖曳至設計介面。
    您現在會有具有類型的資料集，可連接至 AdventureWorks 資料庫，而且會傳回 ProductPhoto 表格的內容。
14. 在 Class1.cs 檔案的 ProductPhotosCollection 類別內加入下列方法：
        private void GetData()
    {
        ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
            new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
        ProductPhotos.ProductPhotoDataTable dt = da.GetData();
    }
    ProductPhotosTableAdapters 命名空間是定義於 ProductPhotos.Designer.cs 檔案中，而此檔案是您在建立 ProductPhotos DataSet 時由 Visual Studio 所產生。
    您現在擁有的方法會在執行應用程式時將資料填入 ProductPhotos DataTable 例項。
15. 建置專案 (F6) 確定未發生錯誤。

• 回到頁首

調整資料集合以符合 WPF 集合

下列程序描述如何在 Visual Studio 2005 中建立類別庫，將資料從 DataTable 轉換為 ObservableCollection，讓 Expression Blend (或任何使用 Windows Presentation Foundation 的應用程式) 可以繫結至該資料。您會定義 ProductPhoto 類別以表格列來呈現資料、將 ProductPhotos 的集合新增至 ProductPhotosCollection 當成私用成員，然後新增公用存取子，讓類別外部的邏輯也可以存取資料。

如果已依照本主題的前一個工作進行，則現在可以使用 DataTable 例項，而此例項含有來自 AdventureWorks ProductPhoto 資料庫表格的資料。如果是從另一個來源填入 DataTable 或 DataSet，則請在下列步驟中調整資料表格名稱及欄位名稱，使其符合您所擁有的資料：

1. 在 Visual Studio 的 [方案總管] 中，以滑鼠右鍵按一下專案名稱，然後按一下 [新增參照]。在 [.NET] 索引標籤中，選取 [WindowsBase] 組件。如果未列出 WindowsBase 組件，則可以選取 [瀏覽] 索引標籤，並在 %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 資料夾中找出 WindowsBase.dll 組件。按一下 [確定]。
   WindowsBase 組件會實作 System.Collections.Object.ObservableCollection 類別。
2. 在 Class1.cs 檔案頂端，新增下列陳述式：
       using System.Collections.ObjectModel;
3. 在 Class1.cs 檔案中，繼續將下列 ProductPhoto 類別定義新增至 AWDataSource 命名空間，讓您擁有可以在此工作的步驟中使用的類別：
       public class ProductPhoto { }
4. 將下列成員新增至 ProductPhotosCollection 類別：
       private ObservableCollection<ProductPhoto> productPhotos =
        new ObservableCollection<ProductPhoto>();
5. 將下列存取子方法新增至 ProductPhotosCollection 類別：
        public ObservableCollection<ProductPhoto> ProductPhotos
    { get { return this.productPhotos; } }

下列各步驟包括將資料從 DataTable 複製至 ObservableCollection。您並不需要複製所有欄位；只會複製識別碼、修改日期及兩張相片。

7. 以滑鼠右鍵按一下 [方案總管] 中的專案名稱，然後按一下 [新增參照]。新增 PresentationCore 組件的參照。
8. 在 Class1.cs 檔案頂端，新增下列陳述式：
       using System.Windows.Media;
    using System.Windows.Media.Imaging;
9. 將成員新增至 ProductPhoto 類別，讓該類別看來與下列類似：
       public class ProductPhoto
    {
        // Public Accessors to the private properties.
        public int ID { get { return id; } }
        public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
        public ImageSource LargePhoto { get { return largePhoto; } }
        public DateTime ModifiedDate { get { return modifiedDate; } }

        // Constructor.
        public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
            DateTime modifiedDate)
        {
            this.id = id;
            this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
            this.largePhoto = ByteArrayToImageSource(largePhoto);
            this.modifiedDate = modifiedDate;
        }

        // Private properties.
        private int id;
        private ImageSource thumbNailPhoto;
        private ImageSource largePhoto;
        private DateTime modifiedDate;

        // Supporting method.
        private ImageSource ByteArrayToImageSource(byte[] data)
        {
            BitmapImage image = null;
            if (null != data)
            {
                image = new BitmapImage();
                image.BeginInit();
                image.StreamSource = new System.IO.MemoryStream(data);
                image.EndInit();
            }
            return image;
        }
    }
10. 將下列程式碼新增至位於 GetData 方法結尾的 ProductPhotosCollection 類別中，讓此方法將 DataTable 複製至 ObservableCollection：
        productPhotos.Clear();
    foreach (ProductPhotos.ProductPhotoRow row in dt)
    {
        productPhotos.Add(new ProductPhoto(
            row.ProductPhotoID,
            row.ThumbNailPhoto,
            row.LargePhoto,
            row.ModifiedDate));
    }

    現在，有個觸發 ProductsPhotosCollection.GetData 方法的便利方式，那就是實作 Command。

11. 以滑鼠右鍵按一下 [方案總管] 中的專案名稱，並按一下 [加入]，然後按一下 [現有項目]。在 [新增現有項目] 對話方塊中，瀏覽至 Expression Blend 範例資料夾 (%SystemDrive%\Program Files\Microsoft Expression\Blend\Samples\<language>\ColorSwatch) 中的 DelegateCommand.cs 檔案，然後按一下 [新增]。將命名空間從 ColorSwatch 變更為您的命名空間名稱 (AWDataSource)。
    DelegateCommand.cs 檔案中的程式碼可讓您將任何命令繫結至方法。
12. 在 Class1.cs 檔案中，將下列成員新增至 ProductPhotosCollection 類別：
        private DelegateCommand getDataCommand;
13. 將下列建構函式新增至 ProductPhotosCollection 類別，以初始化命令：
        public ProductPhotosCollection()
    {
        getDataCommand = new DelegateCommand(delegate() { GetData(); });
    }
14. 最後，將下列存取子方法新增至 ProductPhotosCollection 類別以公開命令：
        public DelegateCommand GetDataCommand { get { return getDataCommand; } }
15. 建置專案 (F6) 確定未發生錯誤。
    您現在擁有的類別可以當成 Expression Blend (或任何 WPF) 應用程式中的資料來源。此類別會是 ProductPhotosCollection，或是您所定義的相等類別。

• 回到頁首

繫結至 Expression Blend 中的資料來源

下列程序描述如何建立極簡單的 Expression Blend 應用程式，而此應用程式具有繫結至您資料來源的 ListBox 控制項。應用程式會使用稱為「主圖形/詳細資料」檢視的一般使用者介面設計樣式。左窗格稱為主要窗格，將會用來包含產品清單。只要選取此窗格中的產品，該產品的詳細資料就會顯示在右窗格中 (稱為詳細資料窗格)。選取其中一個窗格中的元素時，另一個窗格中的內容就會經由控制項之間的「資料同步化」更新。

1. 在 Expression Blend 中，按一下 [檔案]，然後按一下 [新增專案]。
   這樣會開啟 [建立新專案] 視窗。
2. 選取 [標準應用程式 (.exe)] 專案類型。
   這樣會建立 Windows 應用程式的專案，以在設計該應用程式時進行建置及執行。另一個選項是 [控制項庫] 專案，可用來設計在其他 Windows 應用程式中使用的控制項。
3. 在 [名稱] 文字方塊中，輸入 AWProductPhotos。因為在此程序中沒有手寫程式碼，所以請將 [語言] 保留為預設值。按一下 [確定]。
   Expression Blend 會載入新專案，並顯示該專案以供您編輯。

   如果您先前已開啟某個專案，則可能會先看到一個對話方塊，詢問您在開啟新專案之前是要儲存還是捨棄目前的專案。

4. 將新專案載入記憶體之後，請將該專案儲存至磁碟中。在 [檔案] 功能表上，按一下 [全部儲存]。[名稱] 文字方塊應該已包括名稱 AWProductPhotos，因此請按一下 [確定]。

   使用 Expression Blend 時，所進行的變更會反映在記憶體中，而不是硬碟，因此請一定要提早並經常進行儲存。 如需詳細資訊，請參閱管理專案。

5. 在 [專案] 功能表上，按一下 [新增參照]。在開啟的 [新增參照] 對話方塊中，瀏覽以新增 AWDataSource.dll 檔案的參照，此檔案是在本主題的第二個工作結尾時所建置。而 AWDataSource.dll 檔案可能是位在 AWDataSource 專案的 bin/Debug 資料夾中。按一下 [確定]。
   AWDataSource.dll 現在已是專案的一部分。如果在 [專案] 面板的 [檔案] 之下展開 [參照] 節點，則會看到 AWDataSource.dll 的參照。
6. 在 [專案] 面板的 [資料] 下，按一下 [+CLR 物件] 按鈕。
   隨即開啟 [新增 CLR 物件資料來源] 對話方塊。
7. 展開 [AWDataSource] 節點，並選取 [ProductPhotosCollection]，然後按一下 [確定]。
   在 [專案] 面板的 [資料] 下，名為 ProductPhotosCollectionDS 的資料來源已新增至專案。而 ProductPhotosCollectionDS 資料來源呈現的是所參照 CLR 類別例項的結構。請展開 [ProductPhotosCollectionDS] 及 [ProductPhotosCollection] 以查看該結構。而在此工作後面的步驟中，您會將資料從 [專案] 面板的 [資料] 下面拖曳至畫板，以建立新的控制項。
8. 在 [互動] 面板的 [物件與時間軸] 下，按兩下 [LayoutRoot] 予以啟動。
   請注意，在您啟動元素時，該元素名稱的周圍會出現黃色選框工具。這表示此元素可能已經啟動。

   當您想要對元素新增子元素或執行其他特殊作業時，請按兩下 [互動] 面板之 [物件與時間軸] 下的父元素，然後再新增子元素。此動作稱為「啟動」。已啟動的元素是透過元素名稱周圍的黃色選框工具予以識別。 當您想要變更元素的屬性時，請按一下 [互動] 面板之 [物件與時間軸] 下的元素名稱。此動作稱為「選取」。選取的元素是透過反白顯示的背景色彩予以識別。 您可以選取元素卻不啟動元素。

9. 在 [工具箱] 上，按一下 [選取] 工具 。在畫板上，將滑鼠指標移至 [LayoutRoot] 頂端粗的藍色尺規區域。滑鼠指標後面會接著橘色欄尺規，以指出用按一下方式放置新欄分隔線的位置。
   按一下即可以建立新欄分隔線，讓左欄與右欄的寬度相同。左欄會包含產品相片縮圖的清單，而右欄則會包含用來呈現所選取清單項目的大型相片。
   LayoutRoot 旁邊會出現藍色欄分隔線。
   

   若要看到畫板上所有的 LayoutRoot 元素，則可能需要進行縮小。若要進行縮小，請在畫板底部的文字方塊 中輸入縮放值、按一下縮放值旁的箭號，或按住 Ctrl 鍵並滾動滑鼠滾輪。

10. 在畫板上，將滑鼠指標移至 [LayoutRoot] 左邊粗的藍色尺規區域。按一下滑鼠建立新的列分隔線，讓上面那一列可以放入按鈕。按一下出現在最上一列旁邊的打開掛鎖圖示，將該列鎖定為固定高度。
    

    如果您想要查看上一步中所描述的動作結果，請以滑鼠右鍵按一下 [互動] 面板中 [物件與時間軸] 下的 [LayoutRoot]，並按一下 [檢視 XAML]。這會將畫板切換為反白顯示 [LayoutRoot] 程式碼的 [XAML] 檢視。若要看得更清楚，請按一下 [視窗] 功能表上的 [隱藏面板] (F4 或 TAB)。 <Grid.ColumnDefinitions> 區段及 <Grid.RowDefinitions> 區段已新增至用來呈現 LayoutRoot 的 <Grid> 元素中。Width 及 Height 屬性都使用「星形調整大小」，這表示欄大小彼此是等比例的。例如，Width "2*" 所產生的欄會是 Width 設為 "*" 的欄大小的兩倍。因為您所鎖定之列的高度是固定的，所以不會使用星形調整大小。 當您完成查看可延伸應用程式標記語言 (XAML) 的時候，請記得要切換回 [設計] 檢視，並還原面板 (F4 或 TAB)。

11. 在 [專案] 面板的 [資料] 下，將 [ProductPhotosCollection] 下面的 [GetDataCommand] 拖曳至畫板左上角的格線儲存格。請在出現的下拉式清單中，按一下 [Button]。
    [建立資料繫結] 對話方塊隨即開啟。
12. 在 [選取欄位] 中，選擇 [Command]，然後按一下 [確定]。
    您所建立的新 Button 會繫結至 AWDataSource 類別中的 GetDataCommand 存取子方法。在執行時期，如果按一下此按鈕，則會在 ProductPhotosCollection 資料來源上執行 GetDataCommand，如同本主題的第二個工作中所述，該命令實作只會呼叫 GetData 方法。

    您可以按一下 [工具箱] 上的 [選取] 工具，並選取畫板上或 [物件與時間軸] 之下的新按鈕，然後使用畫板上的藍色提示，在畫板上移動及調整新按鈕的大小。

    您可以從 [屬性] 面板中存取資料繫結。若要在建立資料繫結之後重新開啟 [建立資料繫結] 對話方塊，請選取 [物件與時間軸] 之下的 [Button]，然後在 [屬性] 面板的 [雜項] 下，按一下 [Command] 屬性旁邊的 [進階屬性選項]，然後按一下 [資料繫結]。

13. 在選取 [物件與時間軸] 下的 [Button] 後，查看 [屬性] 面板的 [通用屬性]。將 [Content] 屬性設為 [取得產品相片]。
14. 按一下 [工具箱] 上的 [選取] 工具，然後使用畫板上的藍色提示，以移動並調整 [Button] 元素的大小。請將 [Button] 放入左上角的格線儲存格中。然後，在 [屬性] 面板的 [版面配置] 下，設定下列屬性：
    
    • 將 [Width] 及 [Height] 屬性設為 [Auto]。
    • 將 [Margin] 屬性設為 0。
    • 將 [HorizontalAlignment] 及 [VerticalAlignment] 屬性設為 [Center]。
    這些設定可確保按鈕的大小足夠放入 Content 屬性中的文字，而這些設定也會將按鈕置於格線儲存格的中央。
15. 在 [專案] 面板的 [資料] 之下，將 [ProductPhotos (陣列)] 拖曳至畫板左下角的格線儲存格中。在出現的下拉式清單中，按一下 [ListBox]。
    [建立資料繫結] 對話方塊隨即開啟。
16. 在 [選取欄位] 中，選擇 [ItemsSource]，然後按一下 [確定]。
    [建立資料範本] 對話方塊隨即開啟。

    「資料範本」基本上是含有資料繫結的 UI 元素樹狀目錄。只要需要顯示特定類型的資料時，就會選取適當的資料範本，而此範本會用更新的資料重新產生新的元素樹狀目錄複本，以顯示給使用者查看。ListBox 元素中所顯示的每個項目，都是您在本主題的第二個工作中實作的 ProductPhoto 類型物件。

17. 選取 [新資料範本與顯示欄位] 選項按鈕。
    此選項會定義從 [資料] 調色盤進行拖曳之資料類型的結構，例如，ProductPhoto 物件集合中的每個元素。您現在可以繫結至資料結構的任何部分，並因此定義資料範本之元素樹狀目錄的外觀。每個資料項目旁邊都會有下拉式清單，可以決定要用來呈現資料欄位的元素 (StackPanel 及 TextBlock 元素)。而在此清單旁邊的是標籤，指出資料項目所要繫結的元素屬性。  
18. 因為您只想要在 [ListBox] 中顯示 [LargePhoto]，所以請取消選取 [LargePhoto]。
19. ModifiedDate 資料欄位的類型是 StackPanel，而且您需要將控制項變更為更適合用來顯示該資料類型的元素類型。在 [ModifiedDate] 旁的下拉式清單中，選擇 [TextBlock]，您會發現標籤會自動變更為 [Text]。
20. ThumbNailPhoto 資料欄位的類型是 ImageSource，而且您需要將控制項變更為更適合用來顯示該資料類型的元素類型。在 [ThumbNailPhoto] 旁的下拉式清單中，選擇 [Image]，您會發現標籤會自動變更為 [Source]。
21. 按一下 [確定]。
    文件中已插入新的 ListBox。

    資料範本是一種資源。若要在建立 ProductPhotosTemplate 資料範本之後編輯該範本，請展開 [資源] 面板中的 [Window1.xaml] 節點，並展開 [Window]，然後按一下 [ProductPhotosTemplate] 旁的按鈕。

22. 如果已在 [互動] 面板的 [物件與時間軸] 下選取 [ListBox] 元素，請在 [屬性] 面板的 [版面配置] 設定下列屬性：
    
    • 將 [Width] 及 [Height] 屬性設為 [Auto]。
    • 將 [Margin] 屬性設定為 8。
    • 將 [HorizontalAlignment] 及 [VerticalAlignment] 屬性設為 [Center]。
    這些設定可確保 [ListBox] 幾乎完全填滿左下角的格線儲存格。
23. 在 [工具箱] 上，選取 [Image] 控制項。
    

    如果在 [工具箱] 上看不到 [Image] 控制項，則按一下 [資產庫] 按鈕 就可以找到它。從此資產庫中選取控制項之後，控制項的圖示就會顯示在 [資產庫] 按鈕上方的 [工具箱] 上。

24. 在畫板右下角的格線儲存格中，繪製幾乎填滿整個儲存格的新 [影像]。
25. 在選取 [物件與時間軸] 下的 [Image] 後，查看 [屬性] 面板的 [通用屬性]。按一下 [Source] 屬性中的名稱，然後在出現的下拉式清單中選取 [資料繫結]。
    [建立資料繫結] 對話方塊隨即開啟。
26. 因為是要繫結至 [ListBox] 元素的屬性，所以請選取 [元素屬性] 索引標籤。
27. 在 [場景元素] 之下，展開 [Window] 及 [LayoutRoot]，然後選取 [ListBox] ([System.WIndows.Controls.ListBox])。
28. 在 [顯示] 下拉式清單中，選取 [所有屬性]。
    這樣會顯示所有可繫結的屬性，而不只是資料類型與 [Source] 屬性 (String) 相同的屬性。
29. 在 [屬性] 下，選取 [SelectedItem: (物件)]。
30. 選取 [使用自訂路徑運算式] 核取方塊。該運算式目前是 SelectedItem。將它變更為 SelectedItem.LargePhoto，以繫結至目前所選取之 ProductPhoto 物件的 LargePhoto 成員。按一下 [完成]。
31. 在 [專案] 功能表上，按一下 [測試專案] (或按下 F5)。啟動應用程式時，請按一下 [取得產品相片] 來測試應用程式。當載入具有資料的清單方塊時，請逐一查看它的項目，並確認大型相片是出現在右欄中。

完成的應用程式。