Visual Studio の XAML デザイナーでデザイン時のサンプル データを使用する

  • [アーティクル]

ListView、ListBox、DataGrid などの一部のデータ依存コントロールは、データがないと視覚化するのが困難です。 この記事では、Visual Studio の XAML デザイナーを使用して Windows Presentation Foundation (WPF) .NET Core プロジェクトまたは WPF .NET Framework プロジェクトで作業する開発者が、このようなコントロールでサンプル データを有効にできる、新しいアプローチについて確認します。

要件

サンプル データ機能には、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 に適用されます。 サンプル データが機能するには、デザイン時の名前空間が必要です。

Note

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 を指定すると、生成された既定のサンプル データが表示されます。

既定では、5 つの項目が表示されます。 ただし、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.

推奨されるアクションを使用したサンプル データ

デザイナーからコントロールのサンプル データを簡単に有効または無効にするには、推奨されるアクション機能を使用できます。 推奨されるアクションは、デザイナーでコントロールを選択すると右上に表示される電球です。 コントロールを選択し、電球を選択して、[Show Sample Data]\(サンプル データの表示\) を選択することで、サンプル データを有効にできます。 たとえば次のような点です。

Screenshot that shows sample data with Suggested Actions.

IValueConverter インターフェイスを使用したサンプル データ

サンプル データ機能では、コンバーターつまり IValueConverter インターフェイスは完全にはサポートされていません。 ただし、次の一方または両方を実行することで機能させることができます。

  • 値が既にターゲット型であるシナリオを Convert 関数で処理できるようにする。
  • 値を元の型に戻す ConvertBack 関数を実装する。

トラブルシューティング

サンプル データに何も表示されない、または正しい型が表示されない場合は、デザイナーを最新の情報に更新するか、ページを閉じ、もう一度開いてみてください。

このセクションに記載されていない、またはページを最新の情報に更新しても修正されない問題が発生した場合は、[問題の報告] ツールを使用してお知らせください。

関連するコンテンツ