在设计阶段为页面添加数据源
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; }
}
}