共用方式為

適用於的 XAML 預覽程式 Xamarin.Forms

  • 發行項

在輸入時查看轉 Xamarin.Forms 譯的版面配置

警告

VISUAL Studio 2019 16.8 版和 Visual Studio for Mac 8.8 版已淘汰 XAML 預覽版，並以 Visual Studio 2019 16.9 版和 Visual Studio for Mac 8.9 版中的 XAML 熱重新載入 功能取代。 在檔中深入瞭解 XAML 熱重新載入。

概觀

XAML 預覽程式會顯示您的 Xamarin.Forms XAML 頁面在 iOS 和 Android 上的外觀。 當您對 XAML 進行變更時，您會看到它們與程式代碼一起立即預覽。 XAML 預覽程式可在 Visual Studio 和 Visual Studio for Mac 中使用。

開始使用

Visual Studio 2019

您可以按下分割檢視窗格上的箭號來開啟 XAML 預覽工具。 如果您想要變更預設的分割檢視行為，請使用 [工具 > 選項 > Xamarin >Xamarin.Forms XAML 預覽程式] 對話方塊。 在此對話框中，您可以選取預設的文件檢視和分割方向。

Xamarin.Forms Previewer options in Visual Studio

當您開啟 XAML 檔案時，編輯器會根據 [工具>選項 Xamarin >Xamarin.Forms XAML 預覽程式] 對話框中選取的設定，開啟完整大小或預覽程式>旁。 不過，您可以在編輯器視窗中變更每個檔案的分割。

XAML 預覽控件

選擇您是否想要在分割檢視窗格上選取這些按鈕來查看程式碼、XAML 預覽程式或兩者。 中間按鈕會交換預覽程式和程式代碼位於哪一端：

Xamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

您可以變更螢幕是垂直或水平分割，還是完全折疊一個窗格：

Xamarin.Forms Previewer pane orientation controls in Visual Studio

啟用或停用 XAML 預覽程式

您可以在 [工具選項 Xamarin >Xamarin.Forms XAML 預覽程式] 對話框中，選取 [預設 XML 編輯器] 作為預設 XAML 編輯器，以關閉 XAML 預覽工具。>> 這也會關閉 [文件大綱]、[屬性面板] 和 [XAML 工具箱]。 若要將 XAML 預覽程式和這些工具重新開啟，請將您的 預設 XAML 編輯器 變更為 Xamarin.Forms Previewer。

Visual Studio for Mac

當您 開啟 XAML 頁面時，編輯器會顯示 [預覽 ] 按鈕。 按下任何 XAML 文件視窗左下角的 [預覽] 或 [分割] 按鈕，即可顯示或隱藏預覽工具：

Xamarin.Forms Previewer enabled with the preview or split button

注意

在舊版 Visual Studio for Mac 中，[ 預覽 ] 按鈕位於視窗右上方。

啟用或停用 XAML 預覽程式

您可以在 [Visual Studio >> 喜好設定文字編輯器 XAML] 對話方塊中，選取 [預設 XML 編輯器>] 作為預設 XAML 編輯器，以關閉 XAML 預覽工具。 這也會關閉 [文件大綱]、[屬性面板] 和 [XAML 工具箱]。 若要將 XAML 預覽程式和這些工具重新開啟，請將您的 預設 XAML 編輯器 變更為 Xamarin.Forms Previewer。

XAML 預覽程式選項

預覽窗格頂端的選項如下：

  • Android – 顯示螢幕的 Android 版本
  • iOS – 顯示螢幕的 iOS 版本（注意：如果您在 Windows 上使用 Visual Studio，則必須 與 Mac 配對才能使用此模式）
  • 裝置 - Android 或 iOS 裝置的下拉式清單，包括解析度和螢幕大小
  • 直向 （圖示） - 針對預覽使用直向
  • 橫向 （圖示） - 使用橫向預覽

偵測設計模式

靜態 DesignMode.IsDesignModeEnabled 屬性會告訴您應用程式是否在預覽工具中執行。 使用此功能時，您可以指定只有在應用程式在預覽工具中執行或未執行時，才會執行的程式代碼：

if (DesignMode.IsDesignModeEnabled)
{
  // Previewer only code  
}

if (!DesignMode.IsDesignModeEnabled)
{
  // Don't run in the Previewer  
}

如果您在頁面建構函式中初始化無法在設計時間執行的連結庫，這個屬性就很有用。

疑難排解

如果預覽程式無法運作，請檢查下列 問題和 Xamarin 論壇。

XAML 預覽程式未顯示或顯示錯誤

  • 預覽程式可能需要一些時間才能啟動 - 您將會看到「初始化轉譯」，直到準備好為止。
  • 請嘗試關閉並重新開啟 XAML 檔案。
  • 請確定您的 App 類別具有無參數建構函式。
  • 檢查您的 Xamarin.Forms 版本 - 它必須至少 Xamarin.Forms 為 3.6。 您可以透過 NuGet 更新至最新版本 Xamarin.Forms 。
  • 檢查您的 JDK 安裝 - 預覽 Android 至少 需要 JDK 8。
  • 請嘗試將頁面 C# 程式代碼後置中的任何初始化類別包裝在 中 if (!DesignMode.IsDesignModeEnabled)。

自定義控件未轉譯

請嘗試建置您的專案。 如果控件無法轉譯控件，或控件的建立者退出宣告設計時間轉譯，預覽程式會顯示控件的基類。 如需詳細資訊，請參閱 XAML 預覽工具中的轉譯自定義控件。