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         <!--<Border36             BorderBrush="HotPink"37             BorderThickness="5"38             Padding="20"39             Margin="10">40             <StackPanel>41                 <TextBlock42                     FontSize="20"43                     Text="11"/>44                 <TextBlock45                     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 DEBUG39     //第二步：在資料來源定義的節點Page 定義d:DataContext40     //d:DataContext="{d:DesignInstance Type=local:MainPageViewModel,IsDesignTimeCreatable=True}"41     public class MainPageViewModel42     {43         public MainPageViewModel()44         {45             Person = new ObservableCollection<Person>();46 #if DEBUG47             //設計器也會運行我們的代碼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 #endif57         }58         public ObservableCollection<Person> Person { get; set; }59         public string Name { get; set; }60     }61     public class Person62     {63         public int Id { get; set; }64         public string Name { get; set; }65     }66 }

 

Windows Phone 十二、設計器同步