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

發行項
10/11/2017

本頁僅適用 WPF 專案

在 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 2010 與 Microsoft SQL Server 2008。如需有關如何取得 AdventureWorks 範例的詳細資訊，請參閱 MSDN 的安裝 AdventureWorks 範例資料庫和範例。如果需要，也可以從另一個資料庫建立 DataTable 或 DataSet 。若採取此作法，您可以調整本主題中的第一項及第二項工作，使其符合您所擁有的資料。只要使用的是 CLR (或 Microsoft .NET Framework) 資料來源，原則就完全相同。

若要遵循本主題中所說明的程序，您必須要有已安裝 AdventureWorks 範例資料庫的 Microsoft Visual Studio 2010 與 Microsoft SQL Server 2008。如需有關如何取得 AdventureWorks 範例的詳細資訊，請參閱 MSDN 的安裝 AdventureWorks 範例資料庫和範例 Cc294789.xtlink_newWindow(zh-tw,Expression.40).png 。

如果需要，也可以從另一個資料庫建立 DataTable 或 DataSet 。若採取此作法，您可以調整本主題中的第一項及第二項工作，使其符合您所擁有的資料。只要使用的是 CLR (或 Microsoft .NET Framework) 資料來源，原則就完全相同。

定義及填入 DataTable

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

在 Visual Studio 2010 的 [檔案] 功能表上指向 [開新檔案]，然後按一下 [專案]。
在 [新增專案] 對話方塊的 [專案類型] 下，按一下 [Visual C#]。並在 [範本] 下，按一下 [類別庫]。將新專案命名為 AWDataSource ，然後按一下 [確定]。

Visual Studio 會產生新類別庫專案的程式碼，並開啟 Class1.cs 檔案以供您編輯。
在 [Class1.cs] 檔案中，將公用類別定義的名稱從 [Class1] 變更為 ProductPhotosCollection **** (此名稱更具說明性)。
在 [方案總管] 中，以滑鼠右鍵按一下專案名稱 (AWDataSource)，並指向 [新增]，然後按一下 [新增項目]。

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

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

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

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

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

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

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

秘訣：

若要使用 SQL 資料庫，而不是 AdventureWorks 資料庫，則請選取已安裝 SQL Server 資料庫之伺服器的名稱。
在 [登入至伺服器] 下，選取登入 SQL Server 例項所需的驗證方法。您可能需要連絡伺服器系統管理員以取得該資訊。[Windows 驗證] 會使用您目前的登入認證。採用 [SQL Server 驗證] 時，則需使用依設定對您的資料庫具有存取權之帳戶的使用者名稱及密碼。
在 [連線至資料庫] 下選取 AdventureWorks 資料庫，此資料庫只有在您的登入認證正確，且電腦已安裝 AdventureWorks 資料庫並執行 SQL Server 時，才看得到。
按一下 [測試連線] 按鈕。若測試連線失敗，請連絡 SQL Server 管理員以尋求協助。
按一下 [確定] 以完成資料連線的建立。在 [伺服器總管] 中，新連線會出現在名為 [<伺服器名稱>.AdventureWorks.dbo] 的 [資料連線] 節點下，其中，<servername> 是您伺服器的名稱。
在 [伺服器總管] 中，展開新 [<伺服器名稱>.AdventureWorks.dbo] 連線節點，並展開 [表格] 節點，然後找出 [ProductPhoto] 表格。在設計介面中開啟 ProductPhotos.xsd 檔案後，將 [ProductPhoto] 表格從 [伺服器總管] 拖曳至設計介面上。您現在會有具有類型的資料集，可連線至 AdventureWorks 資料庫，並可傳回 [ProductPhoto] 表格的內容。
在 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 的例項。
建置專案 (按 CTRL+SHIFT+B) 以確定未發生錯誤。

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

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

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

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

在 Visual Studio 2010 中，以滑鼠右鍵按一下 [方案總管] 中的專案名稱，然後按一下 [新增參照]。在 [.NET] 索引標籤中，選取 WindowsBase 組件。若未列出 WindowsBase 組件，請按一下 [瀏覽] 索引標籤，然後在 %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 資料夾中找出 WindowsBase.dll 組件。
按一下 [確定]。 WindowsBase 組件會實作 System.Collections.Object.ObservableCollection 類別。
在 Class1.cs 檔案頂端，新增下列陳述式：
```
using System.Collections.ObjectModel;
```
同時請在 Class1.cs 檔案中，將下列 ProductPhoto 類別定義新增至 AWDataSource 命名空間，以產生可搭配使用的類別：
```
public class ProductPhoto { }
```

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

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

將下列存取子方法新增至 ProductPhotosCollection 類別：
```
public ObservableCollection<ProductPhoto> ProductPhotos
{ get { return this.productPhotos; } }
```
接下來的步驟包括將識別碼、修改後的日期與兩張相片從 DataTable 複製到 ObservableCollection 。
以滑鼠右鍵按一下 [方案總管] 中的專案名稱，然後按一下 [新增參照]。新增 PresentationCore 組件的參照。

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

using System.Windows.Media;
using System.Windows.Media.Imaging;

將成員新增至 [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;
        }
    }

將下列程式碼新增至 [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 。

在 [檔案] 功能表上按一下 [新增項目]。在 [新增項目] 方塊中，按一下 [類別]。在 [名稱] 方塊中，輸入 DelegateCommand.cs 。

在新的頁面中，按 CTRL+A 選取所有內容，然後按 DELETE。複製下列程式碼並貼到剛才建立的頁面。

namespace AWDataSource
{
    using System;
    using System.Windows.Input;

    ///
    /// DelegateCommand is a simplified version of ICommand in WPF. You can wrap one of these around any method,
    /// and thus bind any command on any WPF object to your method.
    ///
    /// DelegateCommand also supports an IsEnabled property that you can use to turn the command on and off.
    ///
    public sealed class DelegateCommand : ICommand
    {
        // Type signature of the method that DelegateCommand works with - returns void, no arguments.
        public delegate void SimpleEventHandler();

        // Remember the method so that it can be called at the right time.
        private SimpleEventHandler handler;

        // Maintain the enabled state.
        private bool isEnabled = true;

        // Simple constructor: Pass in the method that needs to be called when the command executes.
        public DelegateCommand(SimpleEventHandler handler)
        {
this.handler = handler;
        }

        #region ICommand implementation

        // Executing the command is as simple as calling the method.
        void ICommand.Execute(object arg)
        {
 this.handler();
        }

        // Saying whether the command can be executed.
ICommand.CanExecute(object arg)
        {
            return this.IsEnabled;
        }

        // This is the event that the command architecture of WPF listens to so it knows when to update
        // the UI on command enable/disable.
        public event EventHandler CanExecuteChanged;
        #endregion

        // Public visibility of the isEnabled flag - note that when it is set, the event must be raised
        // so that WPF knows to update any UI that uses this command.
        public bool IsEnabled
        {
            get { return this.isEnabled; }
            set
            {
this.isEnabled = value;
 this.OnCanExecuteChanged();
            }
        }

        // Simple event propagation that makes sure that someone is listening to the event before raising it.
        private void OnCanExecuteChanged()
        {
            if (this.CanExecuteChanged != null)
            {
 this.CanExecuteChanged(this, EventArgs.Empty);
            }
        }
    }
}

按一下 [檔案] 功能表中的 [儲存]。

DelegateCommand.cs 檔案中的程式碼可讓您將任何命令繫結至方法。

在 Class1.cs 檔案中，新增下列成員至 ProductPhotosCollection 類別中：
```
private DelegateCommand getDataCommand;
```

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

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

最後，將下列存取子方法新增至 ProductPhotosCollection 類別中，以公開命令：
```
public DelegateCommand GetDataCommand { get { return getDataCommand; } }
```
建置專案 (按 F5) 以確定未發生錯誤。您現在擁有的類別可作為 Expression Blend (或任何 WPF) 應用程式中的資料來源。此類別將是 ProductPhotosCollection，或是您所定義的相等類別。

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

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

在 Expression Blend 中按一下 [檔案]，再按一下 [新增專案]。
在 [新增專案] 對話方塊中，選取 [WPF 應用程式] 專案類型。這會針對 Windows 應用程式建立可在您加以設計的同時建置及執行的專案。另一個選項是 [WPF 控制項程式庫] 專案，可讓您設計用於其他 Windows 應用程式的控制項。
在 [名稱] 文字方塊中，輸入 AWProductPhotos 。此程序中沒有手寫程式碼，因此請將 [語言] 保留為預設值。
按一下 [確定]。Expression Blend 會載入新專案，並顯示該專案以供您編輯。

秘訣：

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

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

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

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

在 [專案] 功能表上，按一下 [新增參照]。
在 [新增參照] 對話方塊中，瀏覽至您在本主題的第二項工作結尾所建置的 AWDataSource.dll 檔案，以為其新增參照。而 AWDataSource.dll 檔案可能是位在 AWDataSource 專案的 bin/Debug 資料夾中。
按一下 [確定]。AWDataSource.dll 現在是您專案的一部分。如果您在 [專案] 面板中展開 [參照] 節點，則會看到 AWDataSource.dll 的參照。
在 [資料] 面板中，按一下 [建立資料來源] ，然後再按一下 [建立物件資料來源]。
在 [建立物件資料來源] 對話方塊中展開 [AWDataSource] 節點，選取 [ProductPhotosCollection]，然後按一下 [確定]。

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

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

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

若要對物件新增子物件或執行其他特殊作業，請按兩下 [物件與時間軸] 面板中的父物件，然後新增子物件。此動作稱為「啟用」。已啟用的物件可透過物件名稱周圍的灰色週框方塊予以識別。

當您要變更物件的屬性時，請按一下 [物件與時間軸] 面板中的物件名稱。此動作稱為「選取」。選取的物件可透過醒目的背景色彩予以識別。

您可以選取物件但不啟用物件。

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

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

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

在畫板上，將指標移至 LayoutRoot 左側粗的尺規區域上。按一下滑鼠建立新的列分隔線，讓上面那一列可以放入按鈕。按一下出現在最上一列旁邊的打開掛鎖圖示 Cc294789.1b4edaf6-b6a8-4498-80dc-949375fa610d(zh-tw,Expression.40).png ，將該列鎖定為固定高度。

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

秘訣：

若要檢視前述步驟所說明之動作的結果，請以滑鼠右鍵按一下 [物件與時間軸] 面板中的 LayoutRoot ，然後按一下 [檢視 XAML] (以檢視可延伸應用程式標記語言，亦稱為 XAML)。這會將畫板切換為反白顯示 LayoutRoot 程式碼的 [XAML] 檢視。若要看得更清楚，請按一下 [視窗] 功能表上的 [隱藏面板] (按 F4 或 TAB)。

<Grid.ColumnDefinitions> 區段和 <Grid.RowDefinitions> 區段已新增至代表 LayoutRoot 的 <Grid> 物件。[Width] 及 [Height] 屬性都使用「星號調整大小」，這表示欄大小彼此是等比例的。例如， Width 設為 2* 所產生的欄會比 Width 設為 * 的欄大一倍。您所鎖定之列的高度是固定的，所以不會使用星號調整大小。

檢視 XAML 程式碼後，請記得切換回 [設計] 檢視，並還原面板 (按 F4 或 TAB 鍵)。

在 [資料] 面板中，將 [ProductPhotosCollection] 下的 GetDataCommand 拖曳至畫板左上角的格線儲存格。
在 [工具] 面板中，按兩下 [按鈕] 在畫板上繪製按鈕。在畫面上的下拉式清單中，按一下 [按鈕]。

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

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

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

在 [物件與時間軸] 面板中選取 [Button] 後，請在 [屬性] 面板中找出 [一般屬性] 下的 Content 屬性。輸入「取得產品相片」等文字以設定 Content 屬性，然後按 ENTER。
按一下 [工具] 面板中的 [選取] 工具，然後使用畫板上的提示移動並調整 [Button] 物件的大小。將 [Button] 放入左上角的格線儲存格中。然後，在 [屬性] 面板中的 [版面配置] 下，設定下列屬性：
- 將 Width 和 Height 屬性設為 Auto 。
- 將 Margin 屬性設為 0 。
- 將 HorizontalAlignment 和 VerticalAlignment 屬性設為 Center 。
這些設定可確保按鈕的大小足夠放入 Content 屬性中的文字，而這些設定也會將按鈕置於格線儲存格的中央。
在 [資料] 面板中，將 [ProductPhotos (陣列)] 拖曳至畫板左下角的格線儲存格中。

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

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

在 [建立資料範本] 對話方塊中，選取 [新資料範本與顯示欄位] 選項按鈕。此選項會定義從 [資料] 面板中拖曳之資料類型的結構，例如 [ProductPhoto] 物件集合中的每項物件。您現在可以繫結至資料結構的任何部分，並因此定義資料範本之物件樹狀目錄的外觀。每個資料項目旁邊都會有下拉式清單，可決定用以呈現資料欄位的物件 ( StackPanel 與 TextBlock 物件)。此清單旁邊的標籤則指出資料項目所要繫結的物件屬性。
請清除 [LargePhoto] 選項，因為您只要在 ListBox 中加以顯示。
[ModifiedDate] 資料欄位目前的類型是 StackPanel ，不過您必須將控制項變更為更適合用以顯示該資料類型的物件類型。在 [ModifiedDate] 旁的下拉式清單中，選擇 TextBlock 。標籤會自動變更為 Text 。
[ThumbNailPhoto] 資料欄位目前的類型是 ImageSource ，不過您必須將控制項變更為更適合用以顯示該資料類型的物件類型。在 [ThumbNailPhoto] 旁的下拉式清單中，選擇 Image 。標籤會自動變更為 Source 。

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

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

在 [物件與時間軸] 面板中選取 [ListBox] 物件後，請在 [屬性] 面板中的 [版面配置] 下執行下列作業：
- 將 Width 和 Height 屬性設為 Auto 。
- 將 Margin 屬性設為 8 。
- 將 HorizontalAlignment 和 VerticalAlignment 屬性設為 Center 。
這些設定可確保 ListBox 會幾乎完全填滿左下角的格線儲存格。

在 [工具] 面板中，選取 Image Cc294789.adb61060-da5f-4279-8c0d-3681bfeb145c(zh-tw,Expression.40).png 。

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

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

完成的應用程式

Cc294789.b769099f-ccd9-42ac-97f1-70424dfef1ee(zh-tw,Expression.40).png

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

定義及填入 DataTable

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

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

其他資源