Xamarin. フォーム用の XAML プレビューアーXAML Previewer for Xamarin.Forms

入力時に表示される Xamarin のフォームレイアウトを確認するSee your Xamarin.Forms layouts rendered as you type

概要Overview

XAML プレビューアーには、iOS と Android に関する Xamarin の XAML ページの外観が示されています。The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. XAML に変更を加えると、コードと共にすぐにプレビューが表示されます。When you make changes to your XAML, you'll see them previewed immediately alongside your code. XAML プレビューアーは、Visual Studio および Visual Studio for Mac で使用できます。The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

作業の開始Getting started

Visual Studio 2019Visual Studio 2019

[分割ビュー] ペインの矢印をクリックすると、XAML プレビューアーを開くことができます。You can open the XAML Previewer by clicking the arrows on the split view pane. 既定の分割ビューの動作を変更する場合は、ツール > オプション > Xamarin > フォームプレビューアー ダイアログを使用します。If you want to change the default split view behavior, use the Tools > Options > Xamarin > Forms Previewer dialog. このダイアログボックスでは、既定のドキュメントビューと分割の向きを選択できます。In this dialog, you can select the default document view and the split orientation.

Visual Studio の Xamarin. フォームプレビューアーオプションXamarin.Forms Previewer options in Visual Studio

XAML ファイルを開くと、エディターは、[ツール > オプション] > [Xamarin > フォーム] ポップアップダイアログで選択した設定に基づいて、フルサイズまたはプレビューアーの横に表示されます。When you open a XAML file, the editor will open either full-sized or next to the previewer, based on the settings selected in the Tools > Options > Xamarin > Forms Previewer dialog. ただし、エディターウィンドウでは、ファイルごとに分割を変更できます。However, the split can be changed for each file in the editor window.

XAML プレビューコントロールXAML preview controls

分割ビューペインでこれらのボタンを選択することにより、コード、XAML プレビューアー、またはその両方を表示するかどうかを選択します。Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. 中央のボタンをクリックすると、プレビューアーとコードのサイドが交換されます。The middle button swaps what side the Previewer and your code are on:

Visual Studio でデザイン、ソース、および分割ビューを切り替えるための Xamarin フォームプレビューアーコントロールXamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

画面を縦または横に分割するか、ウィンドウ全体を折りたたむかを変更できます。You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

Visual Studio での Xamarin フォームのプレビューアーペインの向きコントロールXamarin.Forms Previewer pane orientation controls in Visual Studio

Visual Studio for MacVisual Studio for Mac

[プレビュー] ボタンは、XAML ページを開いたときにエディターに表示されます。The Preview button is displayed on the editor when you open a XAML page. 任意の XAML ドキュメントウィンドウの左下にある [プレビュー] ボタンまたは [分割] ボタンを押して、プレビューアーを表示または非表示にします。Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

プレビューまたは分割ボタンで有効になっている Xamarin. フォームプレビューアーXamarin.Forms Previewer enabled with the preview or split button

注意

以前のバージョンの Visual Studio for Mac では、プレビューボタンはウィンドウの右上にありました。In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

XAML プレビューアーオプションXAML previewer options

プレビューウィンドウの上部に表示されるオプションは次のとおりです。The options along the top of the preview pane are:

  • Android –画面の android バージョンを表示するAndroid – show the Android version of the screen
  • ios –画面の ios バージョンを表示します (注:Windows で Visual Studio を使用している場合、このモードを使用するには、Mac とペアリングしておく必要があります)iOS – show the iOS version of the screen (Note: If you're using Visual Studio on Windows, you must be paired to a Mac to use this mode)
  • デバイス-解像度と画面サイズを含む Android または iOS デバイスのドロップダウンリストDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • 縦 (アイコン) –プレビューで縦向きを使用しますPortrait (icon) – uses portrait orientation for the preview
  • 横 (アイコン) –プレビューに横向きを使用しますLandscape (icon) – uses landscape orientation for the preview

デザインモードの検出Detect design mode

静的DesignMode.IsDesignModeEnabledプロパティは、アプリケーションがプレビューアーで実行されているかどうかを示します。The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. これを使用すると、アプリケーションがプレビューアーで実行されている場合、または実行されていない場合にのみ実行されるコードを指定できます。Using it, you can specify code that will only execute when the application is or isn't running in the previewer:

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

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

このプロパティは、デザイン時に実行に失敗したページコンストラクター内のライブラリを初期化する場合に便利です。This property is useful if you initialize a library in your page constructor that fails to run at design time.

トラブルシューティングTroubleshooting

プレビューアーが機能していない場合は、以下の問題とXamarin フォーラムを確認してください。Check the issues below and the Xamarin Forums, if the Previewer isn't working.

XAML プレビューアーが表示されていないか、エラーが表示されていますXAML Previewer isn't showing or shows an error

  • プレビューアーが起動するまでに時間がかかることがあります。準備が整うまで、"レンダリングを初期化しています" と表示されます。It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • XAML ファイルを閉じてから再度開いてみてください。Try closing and reopening the XAML file.
  • Appクラスにパラメーターなしのコンストラクターがあることを確認します。Ensure that your App class has a parameterless constructor.
  • Xamarin. Forms バージョンを確認します。これは少なくとも Xamarin. Forms 3.6 である必要があります。Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. NuGet を使用して最新の Xamarin. Forms バージョンに更新できます。You can update to the latest Xamarin.Forms version through NuGet.
  • JDK のインストールを確認する-Android のプレビューにはjdk 8以上が必要です。Check your JDK installation - previewing Android requires at least JDK 8.
  • C# でif (!DesignMode.IsDesignModeEnabled)、ページの分離コードに初期化されたクラスをラップしてみてください。Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

カスタムコントロールがレンダリングしないCustom controls aren't rendering

プロジェクトをビルドしてみてください。Try building your project. コントロールをレンダリングできない場合、またはコントロールの作成者がデザイン時のレンダリングをオプトアウトした場合、プレビューアーによってコントロールの基本クラスが表示されます。The previewer shows the control's base class if it fails to render the control, or if the control's creator opted-out of design time rendering. 詳細については、「 XAML プレビューアーでのカスタムコントロールのレンダリング」を参照してください。For more information, see Render Custom Controls in the XAML Previewer.