Xamarin.Forms 之 XAML 設計預覽的設計時期資料

在前一篇文章 Xamarin.Forms 之 XAML 設計預覽 有說明，如何在 Visual Studio 2019 下，使用頁面預覽的功能，以便在進行 XAML 語言設計過程中，可以即時看到這些設計後的執行結果。

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

現在遇到一個問題，那就是通常在進行 XAML 設計的時候，都會使用 資料綁定 Data Binding 手法，與該頁面的 ViewModel 進行綁定再一起，可是，當使用這樣的設計方式的時候，又想要使用設計時期預覽功能，就會發現到有許多內容，還是需要在執行時期的時候，才能夠看到該頁面的執行結果。

為了解決這樣的問題，需要使用所謂的 [設計時期資料] 這樣的機制，需要使用 Xamarin.Forms 提供的新功能，首先，需要在 ContentPage 內加入底下的命名空間宣告，有了這些宣告，才能夠在 XAML 中使用設計時期資料的功能。

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

現在，可以將 MainPage.xaml 的內容修正成為如下所示，其中對於 Label Text="{Binding Message}" />這個 XAML 標記，由於使用資料綁定來宣告，因此，這樣的用法只能夠在該專案執行的時候，才能夠看到該文字標籤顯示的內容；若想要在設計時期指定該 Label 這個文字標籤的 Text 屬性值，則需要使用 d: 這個命名空間來指定設計時期的屬性名稱，指定該設計時期的屬性值內容，如此，才能夠在設計階段在預覽畫面上看到這些內容，在此，要使用 <Label Text="{Binding Message}" d:Text="這是設計時期指定資料"/> 這樣的宣告語法。從下圖將會看到該 XAML 所指定的設計時期的資料值顯示情況。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="BlankApp5.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="{Binding Message}" />
        <Label Text="{Binding Message}" d:Text="這是設計時期指定資料"/>
        <BoxView Color="Blue" d:Color="Red"/>
    </StackLayout>

</ContentPage>

可是，這個頁面在執行時期，將會顯成為這樣的情況，從這兩個畫面，可以看到當初指定在設計時期的 XAML 屬性值，是沒有影響到執行時期的 XAML 屬性值。

然而，對於像是 ListView 這樣的檢視，需要指定一個集合紀錄物件給 ItemsSource 這個使用，當然，最為方便的方式還是使用 ViewModel 來建立這樣的物件，並且透過資料綁定的方式指定給 ListView。

首先，在 ContentPage 內加入一個 XAML 命名空間，該命名空間將會指向該頁面的 ViewModel，在此，將會使用 xmlns:ViewModel="clr-namespace:BlankApp5.ViewModels" 這樣的宣告語法。接著，可以在該頁面內，使用 d: 命名空間，指定設計時期的該頁面之 BindingContext 屬性值，指向為 MainPageViewModel。

    <d:ContentPage.BindingContext>
        <ViewModel:MainPageViewModel/>
    </d:ContentPage.BindingContext>

不過，這樣又產生一個問題，那就是原有的 ViewModel 類別中，沒有預設建構式存在，而會得到 : XLS0507 類型 'MainPageViewModel' 無法用做為物件元素，因為它並非公用，或是未定義公用的無參數建構函式或類型轉換子 這樣的錯誤訊息。

因此，需要在 MainPageViewModel 類別中加入一個預設建構式，並且把 XAML 頁面修改成為底下的宣告，如此，就可以在設計時期，使用 Visual Studio 2019 的頁面預覽功能，看到 ListView 的設計時期呈現的樣貌了。

底下是執行螢幕截圖

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:ViewModel="clr-namespace:BlankApp5.ViewModels"
             x:Class="BlankApp5.Views.MainPage"
             Title="{Binding Title}">

    <d:ContentPage.BindingContext>
        <ViewModel:MainPageViewModel/>
    </d:ContentPage.BindingContext>

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="{Binding Message}" />
        <Label Text="{Binding Message}" d:Text="這是設計時期指定資料"/>
        <BoxView Color="Blue" d:Color="Red"/>
        <ListView
            ItemsSource="{Binding myItemList}"
            >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding Name}"
                               FontSize="20"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace BlankApp5.ViewModels
{
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    public class MyModel : INotifyPropertyChanged
    {
        public string Name { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
    }
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public string Message { get; set; }
        public ObservableCollection<MyModel> myItemList { get; set; } = new ObservableCollection<MyModel>();
        private readonly INavigationService navigationService;

        public MainPageViewModel()
        {
            Message = "Come From Default Constuctor  !!";
            myItemList.Add(new MyModel() { Name = "張三" });
            myItemList.Add(new MyModel() { Name = "李四" });
            myItemList.Add(new MyModel() { Name = "王五" });
        }

        public MainPageViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
            Message = "Come From Injection Constructor";
            myItemList.Add(new MyModel() { Name = "張三A" });
            myItemList.Add(new MyModel() { Name = "李四B" });
            myItemList.Add(new MyModel() { Name = "王五C" });
        }

        public void OnNavigatedFrom(INavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(INavigationParameters parameters)
        {
        }

        public void OnNavigatingTo(INavigationParameters parameters)
        {
        }

    }
}