Windows Phone 十二、设计器同步

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

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

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

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

 <Page
     x:Class="MyAPP.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:MyAPP"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     DataContext="{Binding ViewModel,RelativeSource={RelativeSource Mode=Self}}"
     d:DataContext="{d:DesignInstance Type=local:MainPageViewModel,IsDesignTimeCreatable=True}">

     <Grid>
         <TextBlock Text="{Binding Name}"/>
         <ListView ItemsSource="{Binding Person}">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <Border
                         BorderBrush="HotPink"
                         BorderThickness="5"
                         Padding="20"
                         Margin="10">
                         <StackPanel>
                             <TextBlock
                                 FontSize="20"
                                 Text="{Binding Id}"/>
                             <TextBlock
                                 FontSize="30"
                                 Text="{Binding Name}"/>
                         </StackPanel>
                     </Border>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
         <!--<Border
             BorderBrush="HotPink"
             BorderThickness="5"
             Padding="20"
             Margin="10">
             <StackPanel>
                 <TextBlock
                     FontSize="20"
                     Text="11"/>
                 <TextBlock
                     FontSize="30"
                     Text="zhang"/>
             </StackPanel>
         </Border>-->
     </Grid>
 </Page>

 namespace MyAPP
 {
     /// <summary>
     /// 可用于自身或导航至 Frame 内部的空白页。
     /// </summary>
     public sealed partial class MainPage : Page
     {
         public MainPageViewModel ViewModel { get; set; }
         public MainPage()
         {
             ViewModel = new MainPageViewModel();
             for (int i = ; i < ; i++)
             {
                 ViewModel.Person.Add(new Person { Id = , Name = "Hello" });
             }
             this.InitializeComponent();

             this.NavigationCacheMode = NavigationCacheMode.Required;
         }

         /// <summary>
         /// 在此页将要在 Frame 中显示时进行调用。
         /// </summary>
         /// <param name="e">描述如何访问此页的事件数据。
         /// 此参数通常用于配置页。</param>
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
             // TODO: 准备此处显示的页面。

             // TODO: 如果您的应用程序包含多个页面，请确保
             // 通过注册以下事件来处理硬件“后退”按钮:
             // Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
             // 如果使用由某些模板提供的 NavigationHelper，
             // 则系统会为您处理该事件。
         }
     }
     //想在设计器预览数据绑定结果
     //第一步：在视图模型的构造函数中造一些假数据，放到if (DesignMode.DesignModeEnabled)中，为了执行效率，加上#if DEBUG
     //第二步：在数据源定义的节点Page 定义d:DataContext
     //d:DataContext="{d:DesignInstance Type=local:MainPageViewModel,IsDesignTimeCreatable=True}"
     public class MainPageViewModel
     {
         public MainPageViewModel()
         {
             Person = new ObservableCollection<Person>();
 #if DEBUG
             //设计器也会运行我们的代码
             if (DesignMode.DesignModeEnabled)
             {
                 for (int i = ; i < ; i++)
                 {
                     Person.Add(new Person { Id = i, Name = "设计器" });
                 }
                 Name = "小黑";
             }
 #endif
         }
         public ObservableCollection<Person> Person { get; set; }
         public string Name { get; set; }
     }
     public class Person
     {
         public int Id { get; set; }
         public string Name { get; set; }
     }
 }