共用方式為

在 Visual Studio 中搭配 XAML 設計工具使用設計階段範例資料

  • 發行項

某些資料依賴的控制項 (例如 ListView、ListBox 和 DataGrid) 很難在沒有資料的情況下以視覺化方式呈現。 在本文中，我們將檢閱新的方法，讓使用 Windows Presentation Foundation (WPF) .NET Core 專案或 WPF .NET Framework 專案的開發人員在 Visual Studio 中使用 XAML 設計工具啟用這些控制項中的範例資料。

需求

範例資料功能需要 Visual Studio 2019 16.10 版或更新版本。

此功能支援當您使用新設計工具時，以 .NET Core 或 .NET Framework 的 WPF 為目標的 Windows 桌面專案。 若要啟用適用於 .NET Framework 的新設計工具：

  1. 移至 [工具]>[選項]>[環境]>[預覽功能]。
  2. 選取 [適用於 .NET Framework 的新 WPF XAML 設計工具]，然後重新啟動 Visual Studio。

範例資料功能的基本概念

[範例資料] 功能僅適用於設計階段視覺效果。 其只會出現在 XAML 設計工具中，而不會出現在執行中的應用程式中。 因此，其會套用至 ItemsSource 屬性 d:ItemsSource 的設計時間版本。 範例資料需要設計階段命名空間才能運作。

注意

若要深入了解 XAML 中的設計階段屬性，請參閱 XAML 設計階段屬性。

若要開始使用，如果 XAML 文件的標頭尚未存在，請將下列幾行程式碼新增至您 XAML 文件的標頭：

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

新增命名空間之後，您可以使用 d:ItemsSource="{d:SampleData}" 來啟用 ListView、Listbox 或 DataGrid 控制項中的範例資料。 例如：

<DataGrid d:ItemsSource="{d:SampleData}"/>

Screenshot that shows sample data on a data grid.

在此範例中，如果沒有 d:ItemsSource="{d:SampleData}"，XAML 設計工具會顯示空的資料格。 相反地，使用 d:SampleData，現在會顯示產生的預設範例資料。

根據預設，會顯示五個項目。 不過，您可以使用 ItemCount 屬性來指定您想要顯示的項目數。 例如： d:ItemsSource="{d:SampleData ItemCount=2}" 。

使用資料範本的範例資料

當您使用資料範本時，範例資料功能適用於 ListBox、ListView 或 DataGrid 控制項。 此功能會分析 DataTemplate 控制項，並嘗試為其產生適當的資料。

只會針對使用繫結的資料範本中的元素產生範例資料。 即使繫結還沒有來源，也會產生範例資料。 例如：

<ListView d:ItemsSource="{d:SampleData ItemCount=3}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="50" Source="{Binding ProfilePicture}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding FirstName}" Margin="5"/>
                    <Label Content="{Binding LastName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Screenshot that shows sample data in a list view with a data template.

使用建議動作的範例資料

若要從設計工具輕鬆啟用或停用控制項的範例資料，您可以使用 [建議的動作] 功能。 建議的動作是設計工具上的燈泡，當您選取控制項時，會出現在右上方。 您可以選取控制項、選取燈泡，然後選取 [顯示範例資料] 來啟用範例資料。 例如：

Screenshot that shows sample data with Suggested Actions.

使用 IValueConverter 介面的範例資料

範例資料功能不完整支援轉換器或 IValueConverter 介面。 不過，您可以執行下列其中一項或兩項作業，使其能夠運作：

  • 請確定您的 Convert 函式可以處理值已是目標類型的案例。
  • 實作 ConvertBack 函式，將值轉換回原始類型。

疑難排解

如果您的範例資料未顯示任何項目或無法顯示正確的類型，您可以嘗試重新整理設計工具，或關閉並重新開啟頁面。

如果您遇到未列於本節中或無法透過重新整理頁面來修正的問題，請使用回報問題工具讓我們知道。

相關內容