如何在 WinRT XAML 中拥有 DesignTime 数据？答案

【问题标题】：How to have DesignTime data in WinRT XAML?如何在 WinRT XAML 中拥有 DesignTime 数据？
【发布时间】：2014-06-24 09:51:46
【问题描述】：

如何在 WinRT XAML 中获取 DesignTime 数据，以便设计器显示示例数据？

【问题讨论】：

标签： windows-8 winrt-xaml

【解决方案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 数据！

【讨论】：

希望看到使用 d:DesignData 的示例：)
其实没关系找到它，看这个：stackoverflow.com/questions/8303803/…。这更好，因为您可以只通过 xaml 来完成，而不必在代码中使用太多，这更有意义（无论如何对我来说）。
在 Windows8 中尝试其他方法后与我交谈。
另一种方法效果很好。我从我的真实视图模型中派生了一个类并插入了假数据，然后在 xaml 中使用了以下代码：d:DataContext="{d:DesignInstance Type=my:MyDerivedSampleDataClass, IsDesignTimeCreatable=True}"
太棒了，感谢您的更新！为什么不发布您的解决方案作为此问题的答案，以便其他人看到？

【解决方案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 上看到您的设计时数据。

附：在 Blend 2013 中，还有一个数据选项卡可以让您创建示例数据。

【讨论】：

太棒了。简直太棒了。谢谢。