Windows Phone 十二、设计器同步

在设计阶段为页面添加数据源

Blend或者VS的可视化设计器会跑我们的代码，然后来显示出来，当我们Build之后，设计器会进入页面的构造函数，调用InitializeComponent();方法来将UI渲染然后呈现给我们。

DesignMode.DesignModeEnabled获取指示进程是否在设计模式下运行的值。

d:DataContext="{d:DesignInstance Type=data:MainPageViewModel,IsDesignTimeCreatable=True}"

 1 <Page
 2     x:Class="MyAPP.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:MyAPP"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
10     DataContext="{Binding ViewModel,RelativeSource={RelativeSource Mode=Self}}"
11     d:DataContext="{d:DesignInstance Type=local:MainPageViewModel,IsDesignTimeCreatable=True}">
12 
13     <Grid>
14         <TextBlock Text="{Binding Name}"/>
15         <ListView ItemsSource="{Binding Person}">
16             <ListView.ItemTemplate>
17                 <DataTemplate>
18                     <Border 
19                         BorderBrush="HotPink"
20                         BorderThickness="5"
21                         Padding="20"
22                         Margin="10">
23                         <StackPanel>
24                             <TextBlock 
25                                 FontSize="20"
26                                 Text="{Binding Id}"/>
27                             <TextBlock 
28                                 FontSize="30"
29                                 Text="{Binding Name}"/>
30                         </StackPanel>
31                     </Border>
32                 </DataTemplate>
33             </ListView.ItemTemplate>
34         </ListView>
35         <!--<Border
36             BorderBrush="HotPink"
37             BorderThickness="5"
38             Padding="20"
39             Margin="10">
40             <StackPanel>
41                 <TextBlock
42                     FontSize="20"
43                     Text="11"/>
44                 <TextBlock
45                     FontSize="30"
46                     Text="zhang"/>
47             </StackPanel>
48         </Border>-->
49     </Grid>
50 </Page>

 1 namespace MyAPP
 2 {
 3     /// <summary>
 4     /// 可用于自身或导航至 Frame 内部的空白页。
 5     /// </summary>
 6     public sealed partial class MainPage : Page
 7     {
 8         public MainPageViewModel ViewModel { get; set; }
 9         public MainPage()
10         {
11             ViewModel = new MainPageViewModel();
12             for (int i = 0; i < 30; i++)
13             {
14                 ViewModel.Person.Add(new Person { Id = 1, Name = "Hello" });
15             }
16             this.InitializeComponent();
17 
18             this.NavigationCacheMode = NavigationCacheMode.Required;
19         }
20 
21         /// <summary>
22         /// 在此页将要在 Frame 中显示时进行调用。
23         /// </summary>
24         /// <param name="e">描述如何访问此页的事件数据。
25         /// 此参数通常用于配置页。</param>
26         protected override void OnNavigatedTo(NavigationEventArgs e)
27         {
28             // TODO: 准备此处显示的页面。
29 
30             // TODO: 如果您的应用程序包含多个页面，请确保
31             // 通过注册以下事件来处理硬件“后退”按钮:
32             // Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
33             // 如果使用由某些模板提供的 NavigationHelper，
34             // 则系统会为您处理该事件。
35         }
36     }
37     //想在设计器预览数据绑定结果
38     //第一步：在视图模型的构造函数中造一些假数据，放到if (DesignMode.DesignModeEnabled)中，为了执行效率，加上#if DEBUG
39     //第二步：在数据源定义的节点Page 定义d:DataContext
40     //d:DataContext="{d:DesignInstance Type=local:MainPageViewModel,IsDesignTimeCreatable=True}"
41     public class MainPageViewModel
42     {
43         public MainPageViewModel()
44         {
45             Person = new ObservableCollection<Person>();
46 #if DEBUG
47             //设计器也会运行我们的代码
48             if (DesignMode.DesignModeEnabled)
49             {
50                 for (int i = 0; i < 30; i++)
51                 {
52                     Person.Add(new Person { Id = i, Name = "设计器" });
53                 }
54                 Name = "小黑";
55             } 
56 #endif
57         }
58         public ObservableCollection<Person> Person { get; set; }
59         public string Name { get; set; }
60     }
61     public class Person
62     {
63         public int Id { get; set; }
64         public string Name { get; set; }
65     }
66 }