Come avere dati DesignTime in WinRT XAML?

Question

Come posso ottenere dati DesignTime in WinRT XAML in modo che il progettista mostri dati di esempio?

Answer 1

Abbastanza semplice.

Creare un modello come questo:

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

Creare un ViewModel di base in questo modo:

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

creare un vero e ViewModel come questo:

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

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

Creare un falso-dati VisualizzaModel in questo modo:

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

Fate questo in vostro XAML:

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

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

Buon divertimento!

PS: è anche possibile provare a utilizzare d:DesignData. Questo approccio funziona anche. Sento che non è così semplice. Alla fine, sta a voi decidere come farlo. In ogni caso, non perdere i dati di DeisgnTime!

Answer 2

Ecco il d: campione DesignInstance:

ho anche utilizzare la classe di frutta di Jerry, ma non userò MVVM qui come non è necessario che per fare funziona.

Fondamentalmente, dobbiamo creare la classe del modello di dati (ad esempio, ViewModel o Model) che vogliamo avere dati di progettazione (ad esempio, in questo caso, creo una classe figlio, ma non è necessario).

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

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

Quindi nel nostro XAML, possiamo usare d: DataContext per associare la classe figlio.

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

Si prega di notare questa linea:

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

Ora si dovrebbe vedere i dati in tempo di progettazione sia su progettazione di Visual Studio e Blend.

P.S. In Blend 2013 è disponibile una scheda dati che consente di creare anche dati di esempio.