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

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 中，还有一个数据选项卡可以让您创建示例数据。