搭配 XAML 預覽工具使用設計時間數據

發行項
03/05/2024

有些版面配置很難在沒有資料的情況下視覺化。使用這些秘訣，充分利用在 XAML 預覽工具中預覽繁重的數據頁面。

警告

VISUAL Studio 2019 16.8 版和 Visual Studio for Mac 8.8 版已淘汰 XAML 預覽版，並以 Visual Studio 2019 16.9 版和 Visual Studio for Mac 8.9 版中的 XAML 熱重新載入功能取代。在檔中深入瞭解 XAML 熱重新載入。

注意

如果您使用 Windows Presentation Foundation （WPF）或 UWP，請參閱搭配傳統型應用程式的 XAML 設計工具使用設計時間數據

設計時間數據基本概念

設計時間數據是您設定的假數據，可讓您的控件更容易在 XAML 預覽工具中可視化。若要開始使用，請將下列幾行程式代碼新增至 XAML 頁面的標頭：

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

新增命名空間之後，您可以將任何屬性或控件放在 d: 前面，以在 XAML 預覽工具中顯示它。與 d: 的專案不會在運行時間顯示。

例如，您可以將文字新增至通常具有系結數據的標籤。

<Label Text="{Binding Name}" d:Text="Name!" />

在此範例中，如果沒有 d:Text，XAML 預覽程式就不會顯示標籤。相反地，它會顯示「名稱」，其中標籤在運行時間會有實際數據。

您可以搭配控件的任何屬性Xamarin.Forms使用d:，例如色彩、字型大小和間距。您甚至可以將它新增至控制項本身：

<d:Button Text="Design Time Button" />

在此範例中，按鈕只會出現在設計階段。使用這個方法，將佔位元放入 XAML 預覽程式不支援的自定義控制項。

在設計階段預覽影像

您可以為系結至頁面或動態載入的影像設定設計時間來源。在您的 Android 專案中，將您想要顯示在 XAML 預覽工具中的影像新增至 Resources > Drawable 資料夾。在您的 iOS 專案中，將映像新增至 Resources 資料夾。然後，您可以在設計時間在 XAML 預覽工具中顯示該影像：

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

ListViews 的設計時間數據

ListViews 是一種在行動應用程式中顯示資料的熱門方式。不過，如果沒有實際數據，它們很難可視化。若要搭配使用設計時間數據，您必須建立設計時間陣列，以做為 ItemsSource 使用。 XAML 預覽程式會在設計時間顯示 ListView 中該數位的內容。

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Item One</x:String>
                <x:String>Item Two</x:String>
                <x:String>Item Three</x:String>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding ItemName}"
                          d:Text="{Binding .}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

此範例會顯示 XAML 預覽工具中三個 TextCells 的 ListView。您可以變更 x:String 為專案中現有的數據模型。

您也可以建立資料物件的陣列。例如，資料物件的公用屬性 Monkey 可以建構為設計時間數據：

namespace Monkeys.Models
{
    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
    }
}

若要在 XAML 中使用類別，您必須在根節點中匯入命名空間：

xmlns:models="clr-namespace:Monkeys.Models"

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

此處的優點是您可以繫結至您計劃使用的實際模型。

替代方式：硬式編碼靜態 ViewModel

如果您不想將設計時間數據新增至個別控件，您可以設定模擬數據存放區以繫結至頁面。請參閱 James Montemagno 關於新增設計時間數據的部落格文章，以瞭解如何在 XAML 中系結至靜態 ViewModel。

疑難排解

需求

設計時間數據至少需要 3.6 版 Xamarin.Forms 。

IntelliSense 在設計時間數據下顯示波浪線

這是已知問題，將在即將推出的Visual Studio版本中修正。專案仍會建置而不會發生錯誤。

XAML 預覽程式停止運作

請嘗試關閉並重新開啟 XAML 檔案，並清除和重建您的專案。

共用方式為