Xamarin에 대 한 XAML 미리 보기XAML Previewer for Xamarin.Forms

사용자가 입력 한 대로 렌더링 된 Xamarin.ios 레이아웃을 참조 하세요.See your Xamarin.Forms layouts rendered as you type

개요Overview

XAML 미리 보기는 iOS 및 Android에서 Xamarin Forms 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 및 Mac용 Visual Studio에서 사용할 수 있습니다.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.ios 미리 보기 컨트롤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.ios 미리 보기 창 방향 컨트롤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

참고

이전 버전의 Mac용 Visual Studio에서는 미리 보기 단추가 창의 오른쪽 위에 있습니다.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.
  • @No__t_0 클래스에 매개 변수가 없는 생성자가 있는지 확인 합니다.Ensure that your App class has a parameterless constructor.
  • Xamarin.ios 버전을 확인 합니다. Xamarin. 양식 3.6 이상 이어야 합니다.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. NuGet을 통해 최신 Xamarin.ios 버전으로 업데이트할 수 있습니다.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.
  • @No__t_1에 있는 페이지의 C# 코드에서 초기화 된 클래스를 래핑 해 보세요.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.