¿Cómo tener datos de DesignTime en WinRT XAML?

Question

¿Cómo puedo obtener datos de DesignTime en WinRT XAML para que el diseñador muestre datos de muestra?

Answer 1

Bastante simple.

Crear un modelo como este:

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

Crear un modelo de vista de base de esta manera:

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

Crear un verdadero modelo de vista así:

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

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

Create a-datos falsos ViewModel así:

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

hacer esto en su XAML:

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

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

Que se diviertan!

PD: también puede intentar utilizar d:DesignData. Ese enfoque también funciona. Siento que no es tan directo. Al final, depende de usted cómo hacerlo. De cualquier manera, ¡no te pierdas los datos de DeisgnTime!

Answer 2

Aquí es el d: muestra DesignInstance:

También voy a usar la clase de frutas de Jerry, pero no voy a usar MVVM aquí, ya que no es necesario que para hacer que funcione.

Básicamente, necesitamos crear la clase de modelo de datos (por ejemplo, ViewModel o Model) que queremos tener datos de diseño (por ejemplo, en este caso, creo una clase secundaria, pero no es necesario).

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

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

Luego en nuestro XAML, podemos usar d: DataContext para vincular la clase secundaria.

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

Tenga en cuenta que esta línea:

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

Ahora debería ver sus datos en tiempo de diseño tanto en diseñador de Visual Studio y mezcla.

P. S. En Blend 2013, hay una pestaña de datos que también le permite crear datos de muestra.