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 = 0; i < 30; i++)
            {
                ViewModel.Person.Add(new Person { Id = 1, 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 = 0; i < 30; 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; }
    }
}