Udostępnij za pośrednictwem

Podgląd XAML dla programu Xamarin.Forms

  • Artykuł

Xamarin.Forms Wyświetlanie układów renderowanych podczas wpisywania

Ostrzeżenie

Program podglądu XAML został wycofany w programie Visual Studio 2019 w wersji 16.8 i Visual Studio dla komputerów Mac w wersji 8.8 i zastąpiony funkcją Przeładowywanie na gorąco XAML w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Dowiedz się więcej o Przeładowywanie na gorąco XAML w dokumentacji.

Omówienie

Podgląd XAML pokazuje, jak Xamarin.Forms strona XAML będzie wyglądać na systemach iOS i Android. Po wprowadzeniu zmian w kodzie XAML zostaną one natychmiast wyświetlone wraz z kodem. Podgląd XAML jest dostępny w programie Visual Studio i Visual Studio dla komputerów Mac.

Wprowadzenie

Visual Studio 2019

Podgląd XAML można otworzyć, klikając strzałki w okienku widoku podzielonego. Jeśli chcesz zmienić domyślne zachowanie widoku podzielonego, użyj okna dialogowego Narzędzia > Opcje > programu podglądu XAML platformy XAML platformy Xamarin>Xamarin.Forms. W tym oknie dialogowym możesz wybrać domyślny widok dokumentu i orientację podziału.

Xamarin.Forms Previewer options in Visual Studio

Po otwarciu pliku XAML edytor otworzy podgląd o pełnym rozmiarze lub obok podglądu na podstawie ustawień wybranych w oknie dialogowym Narzędzia > Opcje > programu podglądu XAML platformy Xamarin>Xamarin.Forms. Jednak podział można zmienić dla każdego pliku w oknie edytora.

Kontrolki wersji zapoznawczej XAML

Wybierz, czy chcesz wyświetlić kod, podgląd XAML, czy oba te przyciski, wybierając te przyciski w okienku widoku podzielonego. Środkowy przycisk zamienia stronę podglądu i kod:

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

Możesz zmienić, czy ekran jest podzielony w pionie, czy poziomo, albo całkowicie zwinąć jedno okienko:

Xamarin.Forms Previewer pane orientation controls in Visual Studio

Włączanie lub wyłączanie podglądu XAML

Podgląd XAML można wyłączyć w oknie dialogowym Narzędzia > Opcje > programu podglądu XAML platformy XAMLXamarin.Forms>, wybierając pozycję Domyślny edytor XML jako domyślny edytor XAML. Spowoduje to również wyłączenie konspektu dokumentu, panelu właściwości i przybornika XAML. Aby włączyć podgląd XAML i te narzędzia, zmień domyślny edytor XAML na Xamarin.Forms Podgląd.

Visual Studio dla komputerów Mac

Przycisk Podgląd jest wyświetlany w edytorze po otwarciu strony XAML. Pokaż lub ukryj podgląd, naciskając przyciski Podgląd lub Podziel w lewym dolnym rogu dowolnego okna dokumentu XAML:

Xamarin.Forms Previewer enabled with the preview or split button

Uwaga

W starszych wersjach Visual Studio dla komputerów Mac przycisk Podgląd znajduje się w prawym górnym rogu okna.

Włączanie lub wyłączanie podglądu XAML

Podgląd XAML można wyłączyć w oknie dialogowym Edytor > tekstu XAML preferencji > programu Visual Studio>, wybierając pozycję Domyślny edytor XML jako domyślny edytor XAML. Spowoduje to również wyłączenie konspektu dokumentu, panelu właściwości i przybornika XAML. Aby włączyć podgląd XAML i te narzędzia, zmień domyślny edytor XAML na Xamarin.Forms Podgląd.

Opcje podglądu XAML

Opcje w górnej części okienka podglądu to:

  • Android — pokazuje wersję ekranu dla systemu Android
  • iOS — pokaż wersję ekranu dla systemu iOS (Uwaga: jeśli używasz programu Visual Studio w systemie Windows, musisz być sparowany z komputerem Mac , aby korzystać z tego trybu)
  • Urządzenie — lista rozwijana urządzeń z systemem Android lub iOS, w tym rozdzielczość i rozmiar ekranu
  • Pionowy (ikona) — używa orientacji pionowej do podglądu
  • Pozioma (ikona) — używa orientacji poziomej dla podglądu

Wykrywanie trybu projektowania

Właściwość statyczna DesignMode.IsDesignModeEnabled informuje, czy aplikacja jest uruchomiona w podglądzie. Za jego pomocą można określić kod, który będzie wykonywany tylko wtedy, gdy aplikacja jest uruchomiona lub nie jest uruchomiona w podglądzie:

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

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

Ta właściwość jest przydatna w przypadku inicjowania biblioteki w konstruktorze strony, który nie może działać w czasie projektowania.

Rozwiązywanie problemów

Sprawdź poniższe problemy i fora platformy Xamarin, jeśli program podglądu nie działa.

Podgląd XAML nie jest wyświetlany lub wyświetla błąd

  • Uruchomienie podglądu może zająć trochę czasu — zobaczysz komunikat "Inicjowanie renderowania", dopóki nie będzie gotowy.
  • Spróbuj zamknąć i otworzyć ponownie plik XAML.
  • Upewnij się, że App klasa ma konstruktor bez parametrów.
  • Xamarin.Forms Sprawdź wersję — musi być co najmniej Xamarin.Forms 3.6. Możesz zaktualizować do najnowszej Xamarin.Forms wersji za pomocą narzędzia NuGet.
  • Sprawdź instalację zestawu JDK — podgląd systemu Android wymaga co najmniej zestawu JDK 8.
  • Spróbuj opakowować wszystkie zainicjowane klasy w kodzie C# strony w if (!DesignMode.IsDesignModeEnabled)pliku .

Kontrolki niestandardowe nie są rendery

Spróbuj utworzyć projekt. Podgląd wyświetla klasę bazową kontrolki, jeśli nie może renderować kontrolki lub jeśli twórca kontrolki zrezygnował z renderowania czasu projektowania. Aby uzyskać więcej informacji, zobacz Renderowanie kontrolek niestandardowych w podglądzie XAML.