XAML プレビューアーでカスタム コントロールをレンダリングする

カスタム コントロールが XAML プレビューアーで期待どおりに動作しない場合があります。 この記事のガイダンスを参考にして、カスタム コントロールのプレビューの制限を確認してください。

基本プレビュー モード

プロジェクトをビルドしていない場合でも、XAML プレビューアーによってページがレンダリングされます。 ビルドするまで、コードビハインドに依存するコントロールはすべて、その基本の Xamarin.Forms 型が表示されます。 プロジェクトがビルドされると、XAML プレビューアーはデザイン時レンダリングを有効にしてカスタム コントロールを表示しようとします。 レンダリングが失敗した場合は、基本の Xamarin.Forms 型が表示されます。

カスタム コントロールのデザイン時レンダリングを有効にする

独自のカスタム コントロールを作成する場合、またはサード パーティ ライブラリのコントロールを使う場合、プレビューアーではそれらが正しく表示されない可能性があります。 コントロールを作成した場合でも、ライブラリからインポートした場合でも、プレビューアーで表示するには、カスタム コントロールをデザイン時のレンダリングにオプトインする必要があります。 作成したコントロールを使って、コントロールのクラスに [DesignTimeVisible(true)] を追加して、プレビューアーに表示します。

namespace MyProject
{
  [DesignTimeVisible(true)]
  public class MyControl : BaseControl
  {
    // Your control's code here
  }

}

たとえば、James Montemagno の ImageCirclePlugin の基底クラスを使います。

SkiaSharp コントロール

現在、SkiaSharp コントロールは、iOS でプレビューする場合にのみサポートされています。 Android プレビューではレンダリングされません。

トラブルシューティング

Xamarin.Forms のバージョンを確認する

少なくとも Xamarin.Forms 3.6 がインストールされていることを確認します。 NuGet で Xamarin.Forms バージョンを更新できます。

[DesignTimeVisible(true)] の場合でも、カスタム コントロールが適切にレンダリングされません。

コードビハインドまたはバックエンド データに大きく依存するカスタム コントロールは、XAML プレビューアーで常に機能するとは限りません。 次を行うことができます。

• デザイン モードが有効な場合に初期化されないようにコントロールを移動する
• バックエンドからの偽のデータを表示するためのデザイン時データの設定

XAML プレビューアーに "カスタム コントロールが正しくレンダリングされていません" というエラーが表示される

プロジェクトをクリーンしてリビルドするか、XAML ファイルを閉じて再度開いてみてください。