다음을 통해 공유


Xamarin.Forms 라이브 시각적 트리

라이브 시각적 트리를 사용하여 실행 중인 XAML 코드의 실시간 보기를 받을 수 있습니다. 실행 중인 Xamarin.Forms 애플리케이션의 UI 요소에 대한 트리 뷰를 보여 줍니다.

요구 사항

  • 5.0 이상 사용 Xamarin.Forms
  • 변경 내용 핫 다시 로드 사용하도록 설정됩니다(기본적으로 사용하도록 설정됨).

사용

요구 사항이 충족되면 앱 디버그 및 라이브 시각적 트리 창에 앱의 런타임 UI 계층 구조가 표시됩니다.

  • Windows: 기본적으로 IDE의 왼쪽에 표시됩니다. 표시되지 않으면 디버그 > Windows > Live 시각적 트리를 사용하여 표시합니다.
  • Mac: 기본적으로 IDE의 오른쪽에 표시됩니다. 표시되지 않으면 디버그 Windows > Live 시각적 트리 보기를 > 사용하여 표시합니다.

트리 뷰를 사용하여 앱의 런타임 UI 계층 구조를 검사하고 노드를 확장/축소하여 UI의 특정 부분에 집중합니다.

라이브 시각적 트리 도구 모음

XAML 요소 보기는 기본적으로 내 XAML만 기능을 사용하여 간소화됩니다. 라이브 시각적 트리 도구 모음에서 맨 오른쪽에 있는 내 XAML만 표시 단추를 전환하여 모든 UI 요소를 표시합니다. 원하는 경우 옵션에서 이 설정을 사용하지 않도록 설정하여 항상 모든 XAML 요소를 표시할 수 있습니다.

참고 항목

Mac용 Visual Studio 현재 다음을 지원하지 않습니다.내 XAML 기능만.

XAML의 구조에는 직접 관심이 없는 많은 요소가 있으며 코드를 잘 모르는 경우 원하는 항목을 찾기 위해 트리를 탐색하는 데 어려움이 있을 수 있습니다. 따라서 라이브 시각적 트리 에는 검사할 요소를 찾는 데 도움이 되도록 애플리케이션의 UI를 사용할 수 있는 여러 가지 방법이 있습니다.

실행 중인 애플리케이션 에서 요소를 선택합니다(현재 UWP 앱에만 지원됨). 라이브 시각적 트리 도구 모음의 가장 왼쪽에 있는 단추를 선택하면 이 모드를 사용할 수 있습니다. 이 모드를 켜면 애플리케이션에서 UI 요소를 선택할 수 있으며 Live Visual Tree 가 자동으로 업데이트되어 해당 요소 및 해당 속성에 해당하는 트리의 노드가 표시됩니다.

실행 중인 애플리케이션 에서 레이아웃 표시기를 표시합니다(현재 UWP 앱에만 지원됨). 선택 사용 단추 바로 오른쪽에 있는 단추를 선택하면 이 모드를 사용할 수 있습니다. 레이아웃 표시기 표시를 켜면 애플리케이션 창에 선택한 개체의 범위를 따라 가로 및 세로줄이 표시됩니다. 따라서 여백을 표시하는 사각형뿐만 아니라 어떤 항목이 정렬되는지 확인할 수 있습니다.

선택 미리 보기. 라이브 시각적 트리 도구 모음의 왼쪽에서 세 번째 단추를 선택하면 이 모드를 사용할 수 있습니다. 이 모드에서는 애플리케이션의 소스 코드에 액세스할 수 있는 경우 요소가 선언된 XAML을 보여 줍니다.