.NET MAUI 앱의 시각적 트리 검사

.NET 다중 플랫폼 앱 UI(.NET MAUI) 라이브 시각적 트리는 실행 중인 .NET MAUI 앱에서 UI 요소의 트리 보기를 제공하는 Visual Studio 기능입니다.

디버거가 연결된 디버그 구성에서 .NET MAUI 앱을 실행하는 경우 Visual Studio 메뉴 모음에서 Windows > Live Visual Tree 디버그 > 를 선택하여 라이브 시각적 트리 창을 열 수 있습니다.

핫 다시 로드 사용하도록 설정하면 앱의 UI가 XAML 또는 C#을 사용하여 빌드되었는지 여부에 관계없이 라이브 시각적 트리 창에 앱의 UI 요소 계층 구조가 표시됩니다. 그러나 C#을 사용하여 빌드된 UI에 대한 앱 UI 요소의 계층 구조를 표시하려면 내 XAML만 사용하지 않도록 설정해야 합니다.

내 XAML만

UI 요소의 보기는 기본적으로 Just My XAML이라는 기능을 사용하여 간소화됩니다. Visual Studio에서 내 XAML만 표시 단추를 클릭하면 기능이 비활성화되고 시각적 트리의 모든 UI 요소가 표시됩니다.

Visual Studio 메뉴 모음에서 디버그 > 옵션 > XAML 핫 다시 로드 선택하여 내 XAML만 영구적으로 사용하지 않도록 설정할 수 있습니다. 다음으로, 옵션 대화 상자에서 라이브 시각적 트리에서 내 XAML만 사용하도록 설정이 비활성화되어 있는지 확인합니다.

UI 요소 찾기

XAML UI의 구조에는 관심이 없을 수 있는 많은 요소가 있으며, 앱의 소스 코드를 완전히 이해하지 못하면 시각적 트리를 탐색하여 찾고 있는 UI 요소를 찾는 데 어려움을 겪을 수 있습니다. 따라서 Windows에서 라이브 시각적 트리 창에는 검사할 요소를 찾는 데 도움이 되는 앱의 UI를 사용할 수 있는 여러 가지 방법이 있습니다.

• 실행 중인 애플리케이션에서 요소 선택. 라이브 시각적 트리 도구 모음의 실행 중인 애플리케이션 단추에서 요소 선택을 클릭하여 이 모드를 사용하도록 설정할 수 있습니다.

  

  이 모드를 사용하도록 설정하면 앱 에서 UI 요소를 선택할 수 있으면 라이브 시각적 트리 창이 자동으로 업데이트되어 해당 요소에 해당하는 트리의 노드가 표시됩니다.

• 실행 중인 애플리케이션에 레이아웃 표시기를 표시합니다. 라이브 시각적 트리 도구 모음의 실행 중인 애플리케이션 단추에서 디스플레이 레이아웃 표시기를 클릭하여 이 모드를 사용하도록 설정할 수 있습니다.

  

  이 모드를 사용하도록 설정하면 앱 창에 선택한 개체의 경계를 따라 가로 및 세로 선이 표시되므로 여백을 표시하는 사각형뿐만 아니라 정렬되는 항목을 볼 수 있습니다.

• 선택 미리 보기. 라이브 시각적 트리 도구 모음에서 선택한 항목 미리 보기 단추를 클릭하여 이 모드를 사용하도록 설정할 수 있습니다.

  

  이 모드는 앱 소스 코드에 액세스할 수 있는 경우 요소가 선언된 XAML 소스 코드를 보여줍니다.