Xamarin.Forms 之 XAML 設計預覽

當 Visual Studio 2019 推出之後，我個人覺得最為振奮的一個新功能就是，Xamarin.Froms 的頁面預覽功能，也就是說，當在進行 Xamarin.Forms 的頁面內容設計的時候，只要在 XAML 上進行各種修正或者增刪動作的時候，可以即時看到這個頁面的實際執行時期的效果。

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

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

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

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

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

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

現在，使用 Prism Template Pack 專案樣板來建立一個專案(在這個時間點，所使用的 Prism Template Pack 擴充功能版本為 2.1.6 )，並且打開 MainPage.xaml 這個檔案，在 MainPage.xaml 視窗的右上方，可以參考下圖，會有兩個按鈕圖示，可以用於切換該頁面要顯示 XAML 設計語言或者是預覽實際執行結果。

因此，想要進行預覽頁面的時候，請點選 [設計] 圖示，而想要查看這個頁面的 XAML 語言的時候，可以點選 [來源] 圖示；不過，當在進行設計頁面的時候，需要這樣反覆的切換，似乎也顯得不太方便，因此，個人通常會使用該視窗右下角的 [垂直分割] 這個功能，將這個 XAML 語言與預覽部分，同時顯示在螢幕上。

可是，現在看到在預覽子視窗中看到底下的錯誤訊息，並且是無法預覽到這個頁面的執行結果畫面。

Xamarin.Forms 預覽程式已經更新，現在需要 Xamarin.Forms 3.6 或更新版本。請將您的專案升級成最新版的 Xamarin.Forms 來啟用預覽程式。

因此，使用滑鼠右擊 Xamarin.Forms 的 [方案]，選擇 [管理方案的 NuGet 套件]，接著點選 [更新] 這個標籤頁次

勾選 [選取所有封裝] 這個檢查盒，接著，點選 [更新] 按鈕，將所有的套件更新到最新版本

下圖為此次更新的所有相關套件清單，直接點選 [確定] 按鈕，完成更新動作

完成後，將 [MainPage.xaml] 視窗關閉起來，並且重新開啟這個檔案，如此，就會看到該頁面的預覽效果了

現在，請在這個 MainPage.xaml 頁面上，填入底下的 XAML 語言，此時，就會看到在螢幕右方的 XAML Previewer 預覽器畫面，即時呈現出這個剛剛加入的 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"
             x:Class="BlankApp5.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Label Text="XAML Preview" />
        <Button Text="確定"/>
        <BoxView Color="Red"/>
        <ProgressBar Progress="70"/>
    </StackLayout>

</ContentPage>