次の方法で共有


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

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

Requirements

サンプル データ機能には、Visual Studio 2019 バージョン 16.10 以降が 必要です。 この機能は、新しいデザイナーを使用する場合に.NET Core または .NET Framework 用の WPF を対象とする Windows デスクトップ プロジェクトをサポートします。

サンプル データ機能の基本

サンプル データ機能は、デザイン時の視覚化のみを目的としています。 XAML デザイナーにのみ表示され、実行中のアプリには表示されません。 そのため、 ItemsSource プロパティ d:ItemsSourceのデザイン時バージョンに適用されます。 サンプル データが機能するには、デザイン時の名前空間が必要です。

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}" を使用して、 ListViewListbox、または DataGrid コントロールでサンプル データを有効にすることができます。 例えば次が挙げられます。

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

データ グリッド上のサンプル データを示すスクリーンショット。

この例では、 d:ItemsSource="{d:SampleData}"しない場合、XAML デザイナーは空のデータ グリッドを表示します。 代わりに、 d:SampleDataでは、生成された既定のサンプル データが表示されるようになりました。

既定では、5 つの項目が表示されます。 ただし、 ItemCount プロパティを使用して、表示する項目の数を指定できます。 たとえば、 d:ItemsSource="{d:SampleData ItemCount=2}"と指定します。

データ テンプレートを使用したサンプル データ

サンプル データ機能は、データ テンプレートを使用する場合に、 ListBoxListView、または 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>

データ テンプレートを含むリスト ビューのサンプル データを示すスクリーンショット。

推奨されるアクションを含むサンプル データ

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

推奨されるアクションを含むサンプル データを示すスクリーンショット。

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

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

  • Convert関数で、値が既にターゲット型であるシナリオを処理できることを確認します。
  • 値を元の型に戻す ConvertBack 関数を実装します。

トラブルシューティング

サンプル データに何も表示されていない場合や、正しい種類が表示されない場合は、デザイナーを更新するか、ページを閉じてから再度開いてみてください。

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