試試看：顯示來自範例 SQL 資料庫的資料

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

注意事項：
如需 Microsoft Silverlight 應用程式的資訊，請參閱 MSDN 的 Silverlight 資料繫結。

注意事項：
若要遵循本主題中所說明的程序，您必須要有已安裝 AdventureWorks 範例資料庫的 Microsoft Visual Studio 2008 與 Microsoft SQL Server 2008。如需有關如何取得 AdventureWorks 範例的詳細資訊，請參閱 MSDN 的安裝 AdventureWorks 範例資料庫和範例。 如果需要，也可以從另一個資料庫建立 DataTable 或 DataSet。若採取此作法，您可以調整本主題中的第一項及第二項工作，使其符合您所擁有的資料。只要使用的是 CLR (或 Microsoft .NET Framework) 資料來源，原則就完全相同。

定義及填入 DataTable

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

定義及填入 DataTable

1. 在 Visual Studio 2008 的 [檔案] 功能表上指向 [開新檔案]，然後按一下 [專案]。

2. 在 [新增專案] 對話方塊的 [專案類型] 下，按一下 [Visual C#]。並在 [範本] 下，按一下 [類別庫]。將新專案命名為 AWDataSource，然後按一下 [確定]。

   Visual Studio 會產生新類別庫專案的程式碼，並開啟 Class1.cs 檔案以供您編輯。

3. 在 [Class1.cs] 檔案中，將公用類別定義的名稱從 [Class1] 變更為 ProductPhotosCollection (此名稱更具說明性)。

4. 在 [方案總管] 中，以滑鼠右鍵按一下專案名稱 (AWDataSource)，並指向 [新增]，然後按一下 [新增項目]。

5. 在 [新增項目] 對話方塊中，從範本清單中選取 [DataSet]，並將該項目命名為 ProductPhotos.xsd，然後按一下 [新增]。

   資料集會以結構描述檔案和支援類別檔案的形式，新增至您的專案中。此外也會開啟結構描述檔案以供編輯。

   注意事項：
   dataset 是一種含有資料表格的物件，您可以使用此資料表格暫時將資料儲存在記憶體中，以執行您的應用程式。如需詳細資訊，請參閱 MSDN 的 Visual Studio 中的資料集概觀。

6. 在 [伺服器總管] 中，以滑鼠右鍵按一下 [資料連線]，然後按一下 [新增連線]。

7. 在 [選擇資料來源] 對話方塊中，[資料來源] 欄位應已列出 [Microsoft SQL Server (SqlClient)]。

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

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

   秘訣：
   若要使用 SQL 資料庫，而不是 AdventureWorks 資料庫，則請選取已安裝 SQL Server 資料庫之伺服器的名稱。

9. 在 [登入至伺服器] 下，選取登入 SQL Server 例項所需的驗證方法。您可能需要連絡伺服器系統管理員以取得該資訊。[Windows 驗證] 會使用您目前的登入認證。採用 [SQL Server 驗證] 時，則需使用依設定對您的資料庫具有存取權之帳戶的使用者名稱及密碼。

10. 在 [連線至資料庫] 下選取 AdventureWorks 資料庫，此資料庫只有在您的登入認證正確，且電腦已安裝 AdventureWorks 資料庫並執行 SQL Server 時，才看得到。

11. 按一下 [測試連線] 按鈕。若測試連線失敗，請連絡 SQL Server 管理員以尋求協助。

12. 按一下 [確定] 以完成資料連線的建立。在 [伺服器總管] 中，新連線會出現在名為 [<伺服器名稱>.AdventureWorks.dbo] 的 [資料連線] 節點下，其中，<servername> 是您伺服器的名稱。

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. 建置專案 (按 CTRL+SHIFT+B) 以確定未發生錯誤。

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

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

秘訣：
若您依照本主題的前述程序作業，您現在即有包含 AdventureWorks ProductPhoto 資料庫表格之資料的 DataTable 例項可搭配使用。若您是從另一個來源填入 DataTable 或 DataSet，您可以在下列步驟中調整資料表格名稱及欄位名稱，使其符合您所擁有的資料：

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

1. 在 Visual Studio 2008 中，以滑鼠右鍵按一下 [方案總管] 中的專案名稱，然後按一下 [新增參照]。在 [.NET] 索引標籤中，選取 [WindowsBase] 組件。若未列出 [WindowsBase] 組件，請按一下 [瀏覽] 索引標籤，然後在 %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 資料夾中找出 WindowsBase.dll 組件。

2. 按一下 [確定]。[WindowsBase] 組件會實作 [System.Collections.Object.ObservableCollection] 類別。

3. 在 Class1.cs 檔案頂端，新增下列陳述式：

   using System.Collections.ObjectModel;
   

4. 同時請在 Class1.cs 檔案中，將下列 ProductPhoto 類別定義新增至 AWDataSource 命名空間，以產生可搭配使用的類別：

   public class ProductPhoto { }
   

5. 將下列成員新增至 ProductPhotosCollection 類別：

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. 將下列存取子方法新增至 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. 將下列程式碼新增至 [ProductPhotosCollection] 類別中的 [GetData] 方法結尾處，使該方法將 [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. 以滑鼠右鍵按一下 [方案總管] 中的專案名稱，並按一下 [新增]，然後按一下 [現有項目]。

12. 在 [新增現有項目] 對話方塊中，瀏覽至 Expression Blend 範例資料夾 %SystemDrive%\Program Files\Microsoft Expression\Blend\Samples\<language>\ColorSwatch 中的 DelegateCommand.cs 檔案，然後按一下 [新增]。

13. 將命名空間從 ColorSwatch 變更為您的命名空間名稱 (AWDataSource)。DelegateCommand.cs 檔案中的程式碼可讓您將任何命令繫結至方法。

14. 在 Class1.cs 檔案中，新增下列成員至 ProductPhotosCollection 類別中：

    private DelegateCommand getDataCommand;
    

15. 將下列建構函式新增至 ProductPhotosCollection 類別中，以初始化命令：

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

16. 最後，將下列存取子方法新增至 ProductPhotosCollection 類別中，以公開命令：

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

17. 建置專案 (按 F5) 以確定未發生錯誤。您現在擁有的類別可作為 Expression Blend (或任何 WPF) 應用程式中的資料來源。此類別將是 ProductPhotosCollection，或是您所定義的相等類別。

繫結至 Expression Blend 中的資料來源

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

將程序繫結至 Expression Blend 中的資料來源

1. 在 Expression Blend 中按一下 [檔案]，再按一下 [新增專案]。

2. 在 [新增專案] 對話方塊中，選取 [WPF 應用程式] 專案類型。這會針對 Windows 應用程式建立可在您加以設計的同時建置及執行的專案。另一個選項是 [WPF 控制項程式庫] 專案，可讓您設計用於其他 Windows 應用程式的控制項。

3. 在 [名稱] 文字方塊中，輸入 AWProductPhotos。此程序中沒有手寫程式碼，因此請將 [語言] 保留為預設值。

4. 按一下 [確定]。Expression Blend 會載入新專案，並顯示該專案以供您編輯。

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

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

   警告：
   使用 Expression Blend 時，您進行的變更不會自動儲存在硬碟中，因此請務必及早並經常手動儲存檔案。如需詳細資訊，請參閱管理解決方案、專案及檔案。

6. 在 [專案] 功能表上，按一下 [新增參照]。

7. 在 [新增參照] 對話方塊中，瀏覽至您在本主題的第二項工作結尾所建置的 AWDataSource.dll 檔案，以為其新增參照。而 AWDataSource.dll 檔案可能是位在 AWDataSource 專案的 bin/Debug 資料夾中。

8. 按一下 [確定]。AWDataSource.dll 現在是您專案的一部分。如果您在 [專案] 面板中展開 [參照] 節點，則會看到 AWDataSource.dll 的參照。

9. 在 [資料] 面板中，按一下 [新增即時資料來源] ，然後再按一下 [定義新的物件資料來源]。

10. 在 [定義新的物件資料來源] 對話方塊中展開 [AWDataSource] 節點，選取 [ProductPhotosCollection]，然後按一下 [確定]。

    在 [資料] 面板中，名為 [ProductPhotosCollectionDS] 的資料來源已新增至您的專案。而 [ProductPhotosCollectionDS] 資料來源呈現的是所參照 CLR 類別例項的結構。請展開 [ProductPhotosCollectionDS] 及 [ProductPhotosCollection]，以查看該結構。在此工作的後續步驟中，您會將資料從 [資料] 面板拖曳至畫板上，以建立新的控制項。

11. 在 [物件與時間軸] 面板中，按一下 [LayoutRoot] 加以啟動。在您啟動元素時，請留意該元素名稱的周圍會出現灰色週框方塊。

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

12. 在 [工具] 面板中，按一下 [選取] 。在畫板上，將指標移至 [LayoutRoot] 頂端粗的尺規區域上。指標後面會接著欄尺規，指出您按滑鼠時將放置新欄分隔線的位置。

13. 按一下即可建立新欄分隔線，讓左欄與右欄的寬度相同。左欄會包含產品相片縮圖的清單，而右欄則包含用以呈現所選清單項目的大型相片。LayoutRoot 內會出現欄分隔線。

    秘訣：
    若要在畫板上看見完整的 LayoutRoot 元素，可能必須加以縮小。若要縮小，請在畫板底部的文字方塊 中輸入縮放值，然後按一下縮放值旁的箭號，或按住 CTRL 鍵並滾動滑鼠滾輪。

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

    秘訣：

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

15. 在 [資料] 面板中，將 [ProductPhotosCollection] 下的 [GetDataCommand] 拖曳至畫板左上角的格線儲存格。

16. 在畫面上的下拉式清單中，按一下 [按鈕]。

17. 在 [建立資料繫結] 對話方塊的 [屬性] 下拉式清單中，選擇 [Command]，然後按一下 [確定]。這個動作會建立繫結至 [AWDataSource] 中 [GetDataCommand] 存取子方法的新按鈕。若在執行階段按一下此按鈕，則會在 [ProductPhotosCollection] 資料來源上執行 [GetDataCommand]，如同本主題的第二項工作中所述，而該命令的實作會呼叫 [GetData] 方法。

    秘訣：
    您可以按一下 [工具] 面板中的 [選取] 工具，並選取畫板上或 [物件與時間軸] 面板中的新按鈕，然後使用畫板上的提示，在畫板上移動及調整新按鈕的大小。如需詳細資訊，請參閱重新置放或平移物件與調整物件大小或縮放物件。

    秘訣：
    您可以在 [屬性] 面板中存取資料繫結。在建立資料繫結後，若要重新開啟 [建立資料繫結] 對話方塊，請先選取 [物件與時間軸] 面板中的 [Button]。接著，請在 [屬性] 面板中的 [雜項] 下，按一下 [命令] 屬性旁的 [進階屬性選項] ，再按一下 [資料繫結]。

18. 在 [物件與時間軸] 面板中選取 [Button] 後，請在 [屬性] 面板中找出 [一般屬性] 下的 [Content] 屬性。輸入取得產品相片等文字以設定 [內容] 屬性，然後按 ENTER。

19. 按一下 [工具] 面板中的 [選取] 工具，然後使用畫板上的提示移動並調整 [Button] 元素的大小。將 [工具箱] 放入左上角的格線儲存格中。然後，在 [屬性] 面板中的 [版面配置] 下，設定下列屬性：

    • 將 [Width] 及 [Height] 屬性設為 [Auto]。

    • 將 [Margin] 屬性設為 [0]。

    • 將 [HorizontalAlignment] 與 [VerticalAlignment] 屬性設為 [Center]。

    這些設定可確保按鈕的大小足夠放入 [Content] 屬性中的文字，而這些設定也會將按鈕置於格線儲存格的中央。

20. 在 [資料] 面板中，將 [ProductPhotos (陣列)] 拖曳至畫板左下角的格線儲存格中。

21. 在出現的下拉式清單中，按一下 [ListBox]。

22. 在 [建立資料繫結] 對話方塊的 [屬性] 下拉式清單中，選擇 [ItemsSource]，然後按一下 [確定]。

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

23. 在 [建立資料範本] 對話方塊中，選取 [新資料範本與顯示欄位] 選項按鈕。此選項會定義從 [資料] 調色盤中拖曳之資料類型的結構，例如 [ProductPhoto] 物件集合中的每項元素。您現在可以繫結至資料結構的任何部分，並因此定義資料範本之元素樹狀目錄的外觀。每個資料項目旁邊都會有下拉式清單，可決定用以呈現資料欄位的元素 ([StackPanel] 與 [TextBlock] 元素)。此清單旁邊的標籤則指出資料項目所要繫結的元素屬性。

24. 請清除 LargePhoto 選項，因為您只要在 ListBox 中加以顯示。

25. ModifiedDate 資料欄位目前的類型是 StackPanel，不過您必須將控制項變更為更適合用以顯示該資料類型的元素類型。在 ModifiedDate 旁的下拉式清單中，選擇 TextBlock。標籤會自動變更為 Text。

26. ThumbNailPhoto 資料欄位目前的類型是 ImageSource，不過您必須將控制項變更為更適合用以顯示該資料類型的元素類型。在 ThumbNailPhoto 旁的下拉式清單中，選擇 Image。標籤會自動變更為 Source。

27. 按一下 [確定]。這會將新的 [ListBox] 插入文件中。

    秘訣：
    資料範本是一種資源。若要在 [ProductPhotosTemplate] 資料範本建立後加以修改，請展開 [資源] 面板中的 [Window1.xaml] 節點，並展開 [Window]，然後按一下 [ProductPhotosTemplate] 旁的按鈕。

28. 在 [物件與時間軸] 面板中選取 [ListBox] 元素後，請在 [屬性] 面板中的 [版面配置] 下執行下列作業：

    • 將 [Width] 及 [Height] 屬性設為 [Auto]。

    • 將 [Margin] 屬性設為 [8]。

    • 將 [HorizontalAlignment] 與 [VerticalAlignment] 屬性設為 [Center]。

    這些設定可確保 [ListBox] 會幾乎完全填滿左下角的格線儲存格。

29. 在 [工具] 面板中，選取 [Image] 。

    秘訣：
    若在 [工具] 面板中看不到 [Image] 控制項，您可以按一下 [資產] 尋找此控制項。從此圖庫中選取控制項之後，控制項的圖示會顯示在 [工具] 面板中的 [資產] 按鈕下方。

30. 在畫板右下角的格線儲存格中，繪製幾乎填滿整個儲存格的新 [Image]。

31. 在 [物件與時間軸] 面板中選取 [Image] 後，請在 [屬性] 面板中找出 [一般屬性] 下的 [Source] 屬性。按一下 [Source] 屬性的名稱，然後在出現的下拉式清單中選取 [資料繫結]。

32. 在 [建立資料繫結] 對話方塊中選取 [元素屬性] 索引標籤，因為您要將資料繫結至 [ListBox] 元素的屬性。

33. 在 [場景元素] 下，展開 [Window] 及 [LayoutRoot]，然後選取您的 [ListBox] ([System.WIndows.Controls.ListBox])。

34. 在 [顯示] 下拉式清單中，選取 [所有屬性]。這樣會顯示所有可繫結的屬性，而不只是資料類型與 [Source] 屬性相同的屬性 (String)。

35. 在 [屬性] 下，選取 [SelectedItem：(物件)]。

36. 選取 [使用自訂路徑運算式] 核取方塊。預設運算式為 [SelectedItem]。將它變更為 [SelectedItem.LargePhoto]，以繫結至目前所選取之 [ProductPhoto] 物件的 [LargePhoto] 成員。

37. 按一下 [完成]。

38. 在 [專案] 功能表上，按一下 [測試專案] (或按 F5 鍵)。啟動應用程式時，按一下 [取得產品相片] 以測試應用程式。當載入具有資料的清單方塊時，請逐一查看它的項目，並確認大型相片是出現在右欄中。

完成的應用程式