Wie haben DesignTime Daten in WinRT XAML?

Question

Wie kann ich DesignTime-Daten in WinRT XAML abrufen, sodass der Designer Beispieldaten anzeigt?

Answer 1

Einfach genug.

erstellen Modell wie folgt aus:

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

Erstellen Sie eine Basis Ansichtsmodell wie folgt aus:

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

Erstellen Sie eine echte Ansichtsmodell wie folgt aus:

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

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

erstellen fake-Daten ViewModel wie folgt:

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"}, 
     }; 
    } 
} 

Tun Sie dies in Ihrem XAML:

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

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

Viel Spaß!

PS: Sie können auch versuchen, d:DesignData zu verwenden. Dieser Ansatz funktioniert auch. Ich fühle, dass es nicht so geradlinig ist. Am Ende ist es Ihnen überlassen, wie es geht. Egal, verpassen Sie DeisgnTime-Daten nicht! Hier

Answer 2

ist das d: DesignInstance Beispiel:

Ich werde auch Jerrys Fruit-Klasse verwenden, aber ich werde nicht MVVM verwende hier, wie Sie nicht, dass müssen, damit es funktioniert.

Grundsätzlich müssen wir die Datenmodellklasse (z. B. ViewModel oder Model) erstellen, für die wir Entwurfsdaten haben möchten (z. B. in diesem Fall erstelle ich eine untergeordnete Klasse, muss dies aber nicht).

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

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

Dann können wir in unserem XAML d: DataContext verwenden, um die untergeordnete Klasse zu binden.

<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> 

Bitte beachten Sie folgende Zeile:

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

Jetzt sollten Sie Ihr Design Zeitdaten sowohl Visual Studio Designer und Ausblenden sehen.

P. S. In Blend 2013 gibt es eine Datenregisterkarte, auf der Sie auch Beispieldaten erstellen können.