如何在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）（例如，在这种情况下，我创建了一个子类，但您不需要）。 / p>

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上看到您的设计时数据。

P.S。在Blend 2013中，有一个数据选项卡，可以让您创建样本数据。