デザインサーフェイス上のサンプル データとプロトタイプ作成用

アプリが Microsoft Visual Studio または Blend for Visual Studio のデザイン画面にライブ データを表示することは不可能または望ましくない場合があります (プライバシーやパフォーマンスの理由から考えられる)。 コントロールにデータを設定するには (アプリのレイアウト、テンプレート、その他のビジュアル プロパティで作業できるように)、デザイン時のサンプル データを使用するさまざまな方法があります。 また、スケッチ (またはプロトタイプ) アプリを構築する場合、サンプル データは非常に便利で時間を節約できます。 スケッチやプロトタイプのサンプル データを実行時に使用して、実際のライブ データに接続しなくてもアイデアを示すことができます。

{Binding} を利用するサンプルアプリ

• Bookstore1 アプリをダウンロードします。
• Bookstore2 アプリをダウンロードします。

マークアップでの DataContext の設定

命令型コード (分離コード) を使用して、ページまたはユーザー コントロールの dataContext の をビュー モデル インスタンスに設定することは、非常に一般的な開発者の習慣です。

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

しかし、そのようにすると、ページは最大限に「デザイン可能」ではなくなります。 その理由は、XAML ページが Visual Studio または Blend for Visual Studio で開かれると、DataContext 値を割り当てる命令型コードは実行されません (実際には、コード ビハインドは実行されません)。 もちろん、XAML ツールはマークアップを解析し、その中で宣言されたオブジェクトをインスタンス化しますが、実際にはページの型自体をインスタンス化しません。 その結果、コントロールや [データ バインディング の作成] ダイアログ にデータが表示されなくなり、ページのスタイル設定やレイアウトが困難になります。

スパース デザイン UI を

最初に試すべき解決策は、その DataContext の割り当てをコメントアウトし、代わりにページのマークアップ内で DataContext を設定することです。 そうすることで、ライブ データはデザイン時と実行時に表示されます。 これを行うには、まず XAML ページを開きます。 次に、ドキュメントアウトライン ウィンドウで、ルートデザイン可能な要素(通常はラベル [ページ])をクリックして選択します。 プロパティ ウィンドウで、(Common カテゴリ内の) DataContext プロパティを見つけて変更します。 [オブジェクト の選択] ダイアログ ボックスでビュー モデルの種類を 選択し、[OK] をクリックします。

結果のマークアップは次のようになります。

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

次に、バインドを解決できるようになったデザイン サーフェイスの外観を示します。 DataContext の種類とバインドできるプロパティに基づき、[データ バインディングの作成] ダイアログの[パス] ピッカーが現在設定されていることに注意してください。

デザイン可能なUI。

[データ バインディング の作成] ダイアログでは、使用できる型のみが必要ですが、バインドではプロパティを値で初期化する必要があります。 設計時にクラウド サービスに連絡したくない場合 (パフォーマンス、データ転送の支払い、プライバシーの問題、その種のもの)、初期化コードは、アプリがデザイン ツール (Visual Studio や Blend for Visual Studio など) で実行されているかどうかを確認し、その場合はデザイン時にのみ使用するためにサンプル データを読み込むことができます。

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

初期化コードにパラメーターを渡す必要がある場合は、ビュー モデル ロケーターを使用できます。 ビュー モデル ロケーターは、アプリ リソースに配置できるクラスです。 ビュー モデルを公開するプロパティがあり、ページの DataContext はそのプロパティにバインドされます。 ロケーターまたはビュー モデルで使用できるもう 1 つのパターンは依存関係の挿入であり、必要に応じて、設計時または実行時のデータ プロバイダー (それぞれ共通のインターフェイスを実装) を構築できます。

クラスからのサンプルデータとデザイン時属性

何らかの理由で前のセクションのオプションが機能しない場合でも、XAML ツールの機能とデザイン時属性を使用して使用できるデザイン時データ オプションが十分にあります。 1 つの適切なオプションは、Blend for Visual Studio のクラス 機能からサンプル データを作成する です。 そのコマンドは、データ パネルの上部にあるボタンの 1 つにあります。

必要な操作は、コマンドで使用するクラスを指定するだけです。 その後、このコマンドは 2 つの重要な処理を行います。 まず、選択したクラスとそのすべてのメンバーのインスタンスを再帰的にハイドレートするのに適したサンプル データを含む 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 属性」トピックに記載されています。これは、ユニバーサル Windows プラットフォーム (UWP) アプリでも引き続き有効です。

CollectionViewSource には、DataContext プロパティはありませんが、Source プロパティがあります。 したがって、CollectionViewSourceでデザイン時のみのサンプル データを設定するために使用できる d:Source プロパティがあります。

    <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>

XAML の代わりに JSON サンプル データ ファイルを使用する場合は、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 には新しいサンプル データ 機能 があります。 そのコマンドは、データ パネルの上部にあるボタンの 1 つにあります。

クラスを指定する代わりに、Data パネルでサンプル データ ソースのスキーマを実際に設計できます。 データ パネルでサンプル データ値を編集することもできます。ファイルを開いて編集する必要はありません (ただし、必要に応じて変更することもできます)。

新しいサンプル データ 機能では、DataContextが使用され、d:DataContextは使用されないため、スケッチやプロトタイプの実行時およびデザイン時にサンプル データを使用できます。 また、データ パネルを使用すると、設計とバインドのタスクが本当に高速化されます。 たとえば、Data パネルからデザイン サーフェイスにコレクション プロパティをドラッグするだけで、データ バインド項目コントロールと必要なテンプレートが生成され、すべてビルドして実行できます。