XAML プレビューアーでデザイン時のデータを使用する

[アーティクル]
04/24/2024

一部のレイアウトでは、データなしで視覚化するのが困難です。これらのヒントを使用して、XAML プレビューアーでデータが多いページのプレビューを最大限に活用してください。

警告

XAML プレビューアーは、Visual Studio 2019 バージョン 16.8 と Visual Studio 2019 for Mac バージョン 8.8 で非推奨になり、Visual Studio 2019 バージョン 16.9 と Visual Studio for Mac バージョン 8.9 で XAML ホットリロードに置き換えられています。 XAML ホットリロードの詳細については、こちらのドキュメントを参照してください。

Note

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 プレビューアーは何も表示しません。ここには、その代わりに "Name!" と表示されています。このラベルには実行時には実際のデータが設定されます。

d: は、色、フォントサイズ、間隔などの、Xamarin.Forms コントロールの任意の属性で使用できます。これを次のようにコントロール自体にも追加できます。

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

この例では、ボタンはデザイン時にのみ表示されます。 XAML プレビューアーでサポートされていないカスタムコントロールに対してプレースホルダーを配置するには、この方法を使用してください。

デザイン時に画像をプレビューする

ページにバインドされているか、動的に読み込まれる画像に対して、デザイン時のソースを設定できます。 Android プロジェクトでは、XAML プレビューアーに表示する画像を Resources > Drawable フォルダーに追加します。 iOS プロジェクトでは、画像を Resources フォルダーに追加します。これで、デザイン時にその画像を XAML プレビューアーに表示できます。

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

ListView のデザイン時のデータ

ListView は、モバイルアプリにデータを表示する一般的な方法です。ただし、実際のデータなしに視覚化することは困難です。これに対してデザイン時のデータを使用するには、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 プレビューアーに 3 つの TextCell の 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 をハードコードする

デザイン時のデータを個々のコントロールに追加したくない場合は、ページにバインドするモックデータストアをセットアップできます。 XAML で静的 ViewModel にバインドする方法については、James Montemagno のデザイン時のデータの追加に関するブログ投稿を参照してください。

トラブルシューティング

要件

デザイン時のデータに必要な最小バージョンは Xamarin.Forms 3.6 です。

IntelliSense がデザイン時のデータの下に波線を表示する

これは、既知の問題であり、Visual Studio の近日公開されるバージョンで修正される予定です。このままでも、プロジェクトはエラーなしでビルドされます。

XAML プレビューアーの動作が停止した

XAML ファイルを閉じて再度開き、プロジェクトのクリーンアップとリビルドを試してみてください。