XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2019/04/18

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 項目內容。
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>



沒有留言:

張貼留言