그리드는 행과 열로 구성된 레이아웃 패널이다. 다음 그림은 그리드의 개념적 보기를 보여준다. 행과 열 지정하기 그리드를 생성할 때 각 행과 열을 개별적으로 정의할 수 있다. 이 시스템을 사용하면 각 행의 높이와 각 열의 너비를 완전히 제어할 수 있다. 모든 그리드에는 그리드의 모양을 정의하는 RowDefinition 및 ColumnDefinition 개체의 컬렉션이 있다. 이러한 컬렉션을 각각 UI의 행 또는 열을 나타내는 RowDefinition 및 ColumnDefinition의 인스턴스로 채운다. 다음은 RowDefinition 및 ColumnDefinition에 대한 클래스 정의를 보여주는 두 개의 코드다. public sealed class RowDefinition : ... { ... publ..

StackLayout은 자식 보기를 왼쪽에서 오른쪽 또는 위에서 아래로 구성하는 레이아웃 컨테이너이다. 방향은 Orientation 속성을 기반으로 하며 기본값은 위에서 아래로이다. 다음 그림은 수직방향의 StackLayout의 개념적 보기를 보여준다. VerticalStackLayout 및 HorizontalStackLayout은 성능에 최적화되어 있으며 방향이 변경되지 않는다는 것을 알고 있을 때 사용하는 기본 레이아웃이다. 프리뷰 버전이라 그런지 아니면 초기 버전이라 그런지 버그가 상당히 많다. c# code 로 xaml 의 내용을 구현해 보면 동작하지 않는다. 이부분은 참고하자 아래와 같은 형태로 수직, 수평 stacklayout 을 최적화하여 표현할 수 있다. 예제 StackLayout/Exer..

다양한 장치에서 일관된 사용자 인터페이스를 디자인 하는 것은 어렵다. .NET MAUI 는 Layout pannel 을 통해 view (control) 의 크기를 조정하고 위치를 지정한다. Layou Panel StackLayout : 자식 뷰(Control)를 단일 행 또는 열에 정렬 한다. (VerticalStackLayout , HorizontalStackLayout) AbsoluteLayout : x 및 y 좌표를 사용하여 자식 보기를 정렬한다. FlexLayout : 단일 행이나 열에 맞지 않는 경우 래핑할 수 있다는 점을 제외하고는 StackLayout과 같다. Grid : 행과 열로 생성된 셀에 자식 뷰(Control)를 정렬한다. 뷰(Control) 의 기본 크기 크기를 기본적으로 지정하지..

실행중인 플랫폼에 따라 앱의 UI 를 조정할 수 있도록 .NET MAUI 가 제공하는 기능을 알아보자. Device 클래스 사용 DeviceInfo 클래스는 앱이 실행되는 장치에 대한 장치별 정보를 제공하는 유틸리티 클래스 가장 중요한 속성은 DeviceInfo.Platform이다. 속성은 현재 사용 중인 장치 유형을 나타내는 문자열을 반환한다. "Android" "iOS" "WinUI" "macOS" MyStackLayout.Padding = DeviceInfo.Platform == DevicePlatform.iOS ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only : new Thickness(30); // Set the de..

XAML 정의의 대부분은 컴파일 시간에 해결된다. 그러나 때로는 속성 값을 런타임에 동적으로 설정해야 한다. 이 값은 프로그램이 실행 중일 때만 알 수 있다. 이러한 상황에서는 런타임에 XAML에 값을 제공할 개체를 만들 수 있다. XAML은 이를 위해 마크업 확장을 지원한다. Mark-up extension 마크업확장은 XAML에서 런타임 값에 액세스하는 데 사용하는 클래스이다. 예를 들어 UI 에 여러 Label 이 있고 FontSize 속성을 일관되도록 앱 전체에서 동일한 값으로 설정하려고한다고 가정하자. 위와 같이 설정하고 모든 레이블에 반복해서 설정 할 수 있다. 하지만 나중에 값을 변경 하려면 문제가 생긴다. 또는 장치방향, 화면 해상도 같은 것을 고려하여 runtime 에 계산될 수도 있다...

.NET MAUI는 표준 .NET 이벤트를 통해 사용자 입력 및 상호 작용을 응용 프로그램에 알린다. Xaml 페이지 각 Elements (controls) 에 이름 지정 각 컨트롤에 고유한 이름을 할당할 수 있다. 이렇게 하려면 XAML 특성 x:Name을 사용한다. x:Name 속성은 다음 두 가지 작업을 수행 코드 숨김 파일에 이것에 대한 개인 필드를 추가. 코드에서 이 필드를 사용하여 시각적 요소와 상호 작용하여 런타임 속성을 설정하고 이벤트를 처리한다. 요소는 이 이름을 통해 XAML에 알려진다. 동일한 XAML 파일에 정의된 다른 요소에서 이러한 요소를 참조할 수 있다. Xaml 의 Label element 에 x:Name 속성을 사용하여 이름 할당 behind 코드 CounterLabel 이..