備註
您需要範例數據的程度,以及其可協助您的程度,取決於您的系結是否使用 {Binding} 標記延伸 或 {x:Bind} 標記延伸。 本主題所述的技術是以使用 DataContext為基礎,因此僅適用於 {Binding}。 但是,如果您使用 {x:Bind},則您的繫結至少會在設計介面上顯示佔位符值(即使是項目控制項也是如此),因為這樣,您對範例數據的需求就不再那麼高。
您的應用程式在 Microsoft Visual Studio 或 Blend for Visual Studio 的設計介面上顯示即時數據,可能是不可能的或不受歡迎的(或許是因為隱私或者效能等原因)。 為了讓控制項填入資料(讓您可以處理應用程式的版面配置、範本和其他視覺屬性),您可以透過多種方式使用設計時期範例資料。 如果您要建置草圖(或原型)應用程式,範例數據也可以非常實用且省時。 您可以在運行時間使用草圖或原型中的範例數據,以說明您的想法,而不需要連線到真實實時數據。
演示 {Binding} 的範例應用程式
- 下載 Bookstore1 應用程式。
- 下載 Bookstore2 應用程式。
備註
本文中的螢幕快照取自舊版Visual Studio。 如果您使用 Visual Studio 2019,它們可能無法完全符合您的開發體驗。
在標記中設定 DataContext
使用命令式程式代碼(在程式碼後置中)將頁面或使用者控件的 DataContext 設定為檢視模型實例,這是相當常見的開發人員做法。
public MainPage()
{
InitializeComponent();
this.DataContext = new BookstoreViewModel();
}
但是,如果您這樣做,您的頁面設計自由度就不如理想。 原因是當您的 XAML 頁面在 Visual Studio 或 Blend for Visual Studio 中開啟時,設定 DataContext 值的程式碼永遠不會被執行(事實上,任何後置代碼都不會執行)。 XAML 工具當然會剖析您的標記,並具現化其中宣告的任何物件,但它們實際上不會具現化頁面的類型本身。 結果是您不會在控件中看到任何數據,也不會在 [建立數據系結] 對話方塊中看到任何數據,而且您的頁面在樣式和配置方面將更具挑戰性。
首先要嘗試的補救方法是註解掉 DataContext 指派,並改為在頁面標記中設定 DataContext。 如此一來,您的實時數據會在設計階段以及執行時顯示。 若要這樣做,請先開啟您的 XAML 頁面。 然後,在 [檔大綱] 視窗中,按一下根可設計元素(通常是標籤 [Page])來選取。 在 [屬性] 視窗中,尋找 DataContext 屬性(位於 Common 類別內),並加以修改。 從 [選取物件 ] 對話框中選取檢視模型類型,然後按一下 [確定] 。
以下是產生的標記外觀。
<Page ... >
<Page.DataContext>
<local:BookstoreViewModel/>
</Page.DataContext>
以下是您的繫結解析後的設計表面。 請注意,[建立數據系結] 對話框中 路徑 選擇器現在會根據 DataContext 類型和您可以系結的屬性填入。
[建立數據系結] 對話方塊只需要一個型別才能運作,但系結需要以值初始化屬性。 如果您不想在設計時間連絡雲端服務(由於效能、支付數據傳輸費用、隱私權問題,這類原因),則您的初始化程式代碼可以檢查您的應用程式是否在設計工具中執行(例如 Visual Studio 或 Blend for Visual Studio),並在這種情況下,載入僅供設計時間使用的範例數據。
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
// Load design-time books.
}
else
{
// Load books from a cloud service.
}
如果您需要將參數傳遞至初始化程序代碼,您可以使用檢視模型定位器。 視圖模型定位器是一個可以放入應用程式資源的類別。 它具有公開檢視模型的屬性,而頁面的 DataContext 系結至該屬性。 定位器或檢視模型可以使用的另一種模式是依賴注入,它可以建構設計時或執行時的資料提供者(每個提供者實作一個通用介面),根據需求使用。
「類別中的範例數據」和設計時間屬性
如果基於任何原因,上一節中沒有任何選項可供您使用,則您仍然有足夠的設計時間數據選項可透過 XAML 工具功能和設計時間屬性使用。 其中一個不錯的選擇是使用在 Blend for Visual Studio 中的 從類別 建立範例數據功能。 您可以在 資料 面板頂端的其中一個按鈕上找到該命令。
您只需要指定要使用之命令的類別。 命令接著會為您執行兩項重要工作。 首先,它會產生一個 XAML 檔案,其中包含適合用來填充所選類別實例及其所有成員的範例資料(事實上,這個工具對於 XAML 或 JSON 檔案都同樣適用)。 其次,它會將所選類別的架構填入 Data 面板。 然後,您可以將成員從 [Data] 面板拖曳到設計介面上,以執行各種工作。 視您拖放的內容而定,您可以將系結新增至現有的控件(使用 {Binding}),或建立新的控件並同時系結它們。 不論是哪一種情況,這項操作也會在頁面的佈局根目錄(如果尚未設定的話)為您設定設計時期的數據內容(d:DataContext)。 該設計時間數據內容會使用 d:DesignData 屬性,從產生的 XAML 檔案取得其範例數據(順便說一句,您可以在專案中尋找並編輯,使其包含您想要的範例數據)。
<Page ...
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
<ListView ItemsSource="{Binding Recordings}" ... />
...
</Grid>
</Page>
各種 xmlns 宣告表示具有 d: 前置詞的屬性只會在設計時期解譯,並在執行時期忽略。 因此,d:DataContext 屬性只會影響設計時間 DataContext 屬性的值;它在運行時間沒有作用。 您可以視需要,在標記中同時設定 d:DataContext 和 DataContext。 d:DataContext 會在設計階段覆寫,而 DataContext 將在運行時間覆寫。 這些相同的覆寫規則適用於所有設計時和執行時屬性。
d:DataContext 屬性和其他所有設計時間屬性都會記載於 Design-Time Attributes 主題中,該主題仍然適用於通用 Windows 平臺 (UWP) app。
CollectionViewSource 沒有 DataContext 属性,但是其具有 Source 屬性。 因此,您可以使用 d:Source 屬性,在 CollectionViewSource上設定僅限設計時間的範例數據。
<Page.Resources>
<CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
</Page.Resources>
...
<ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
...
為了讓這個功能運作,您需要有一個名為 Recordings : ObservableCollection<Recording>的類別,並且編輯範例數據 XAML 檔案,使其只包含一個 Recordings 物件(內含多個 Recording 物件),如下所示。
<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
<Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
<Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
<Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>
如果您使用 JSON 範例數據檔而非 XAML,則必須設定 Type 屬性。
d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"
到目前為止,我們已使用 d:DesignData,從 XAML 或 JSON 檔案載入設計時間範例數據。 替代方法是 d:DesignInstance 標記延伸,這表示設計時間來源是以 Type 屬性所指定的類別為基礎。 以下是範例。
<CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>
IsDesignTimeCreatable 屬性表示設計工具應實際地建立類別的實例,這意味著類別具有公用的預設建構函式,並且其自動以資料(實際數據或樣本數據)填充自身。 如果您未設定 IsDesignTimeCreatable (或如果您將它設定為 False),則不會在設計介面上顯示範例數據。 在這種情況下,設計工具的唯一功能就是剖析類別中的可繫結屬性,並將這些屬性顯示在 [數據] 面板以及 [建立數據繫結] 對話框中。
原型設計的範例數據
針對原型,您希望在設計時和執行時擁有範例數據。 針對該使用案例,Blend for Visual Studio 具有 新的範例資料 功能。 您可以在 資料 面板頂端的其中一個按鈕上找到該命令。
您實際上可以在 [Data] 面板中設計範例數據源的架構,而不是指定類別。 您也可以在 [數據] 面板中編輯範例數據值:不需要開啟和編輯檔案(當然,如果您偏好這樣,也可以這麼做)。
新的範例數據 功能會使用 DataContext,而不是 d:DataContext,因此當您執行草圖或原型以及設計時,可以使用範例數據。 而 數據 面板實際上可加速您的設計和系結工作。 例如,只要將集合屬性從 Data 面板拖曳到設計介面上,就會產生一個資料繫結的項目控制項和必要的範本,準備好進行建置和執行。