如何在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中,有一个数据选项卡,可用于创建示例数据.