Làm thế nào để có dữ liệu DesignTime trong WinRT XAML?

Question

Làm cách nào để có được dữ liệu DesignTime trong WinRT XAML để trình thiết kế hiển thị dữ liệu mẫu?

Answer 1

Đủ đơn giản.

Tạo một mô hình như thế này:

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

Tạo một ViewModel cơ sở như thế này:

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

Tạo một ViewModel thực như thế này:

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

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

Tạo một giả dữ liệu ViewModel như thế này:

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

Làm điều này trong XAML của bạn:

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

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

Hãy vui vẻ!

PS: bạn cũng có thể thử sử dụng d:DesignData. Cách tiếp cận đó cũng hoạt động. Tôi cảm thấy nó không thẳng thắn. Cuối cùng, nó tùy thuộc vào bạn làm thế nào để làm điều đó. Dù bằng cách nào, đừng bỏ lỡ dữ liệu DeisgnTime!

Answer 2

Đây là d: mẫu DesignInstance:

tôi cũng sẽ sử dụng lớp Fruit Jerry, nhưng tôi sẽ không sử dụng MVVM ở đây là bạn không cần điều đó để làm cho nó hoạt động. Về cơ bản, chúng ta cần tạo lớp mô hình dữ liệu (ví dụ: ViewModel hoặc Model) mà chúng tôi muốn có dữ liệu thiết kế (ví dụ: trong trường hợp này, tôi tạo một lớp con, nhưng bạn không cần phải).

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

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

Sau đó, trong XAML, chúng tôi có thể sử dụng d: DataContext để ràng buộc lớp con.

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

Xin lưu ý dòng này:

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

Bây giờ bạn sẽ thấy dữ liệu thời gian thiết kế của bạn trên cả Visual Studio thiết kế và Blend.

T.B. Trong Blend 2013, có một tab dữ liệu cho phép bạn tạo dữ liệu mẫu.