windows-8 - WinRT XAML で DesignTime データを取得するにはどうすればよいですか?

Question

デザイナーがサンプル データを表示できるように、WinRT XAML で DesignTime データを取得するにはどうすればよいですか?

Answer 1

十分に単純です。

次のようなモデルを作成します。

public class Fruit 
{
    public string Name { get; set; }
}

次のようなベース ViewModel を作成します。

public class BaseViewModel 
{
    public ObservableCollection<Fruit> Fruits { get; set; }
}

次のような実際の ViewModel を作成します。

public class RealViewModel : BaseViewModel
{
    public RealViewModel()
    {
        if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            LoadData();
    }

    public void LoadData()
    {
        // TODO: load from service
    }
}

次のような偽データの ViewModel を作成します。

public class FakeViewModel : BaseViewModel
{
    public FakeViewModel()
    {
        this.Fruits = new ObservableCollection<Fruit>
        {
            new Fruit{ Name = "Blueberry"},
            new Fruit{ Name = "Apple"},
            new Fruit{ Name = "Banana"},
            new Fruit{ Name = "Orange"},
            new Fruit{ Name = "Strawberry"},
            new Fruit{ Name = "Mango"},
            new Fruit{ Name = "Kiwi"},
            new Fruit{ Name = "Rasberry"},
            new Fruit{ Name = "Blueberry"},
        };
    }
}

XAML でこれを行います。

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

<d:Page.DataContext>
    <local:FakeViewModel />
</d:Page.DataContext>

楽しむ！

PS: d:DesignDataを使用することもできます。そのアプローチも有効です。それほど単純ではないと感じています。結局のところ、それをどのように行うかはあなた次第です。いずれにせよ、DeisgnTime データをお見逃しなく!

Answer 2

d:DesignInstance サンプルは次のとおりです。

Jerry の Fruit クラスも使用しますが、ここでは MVVM を使用しなくても機能するため、使用しません。

基本的に、デザイン データを保持するデータ モデル クラス (たとえば、ViewModel または Model) を作成する必要があります (たとえば、この場合、子クラスを作成しますが、作成する必要はありません)。

public class Fruit
{
    public string Name { get; set; }
}

public class SampleFruit : Fruit
{
    public SampleFruit()
    {
        Name = "Orange (Sample)";
    }
}

次に、XAML で d:DataContext を使用して子クラスをバインドできます。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
      DataContext="{Binding}"
      d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}">
    <TextBlock Text="{Binding Name}"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="42"/>
</Grid>

次の行に注意してください。

d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}"

これで、Visual Studio Designer と Blend の両方にデザイン時のデータが表示されるはずです。

PS Blend 2013 には、サンプル データを作成できるデータ タブもあります。