연습: XAML 페이지에 동작 추가

10분

이전에는 C# 코드에서 XAML로 UI 레이아웃을 이동하도록 Notes 앱을 수정했습니다. 이제는 다음 기능을 페이지에 추가할 준비가 되었습니다.

레이블의 글꼴 색과 배경색, 단추 및 편집기 컨트롤 사용자 지정을 지원합니다. 이렇게 하면 고대비 UI가 필요한 사용자가 더 쉽게 액세스할 수 있도록 앱을 쉽게 조정할 수 있습니다.
Android 및 iOS에서 편집기 컨트롤의 높이를 조정합니다. Windows에서 실행될 때는 이 컨트롤에서 사용자가 스크롤하지 않아도 합리적인 정도의 텍스트를 입력하기에 충분한 너비가 확보됩니다. Android 휴대폰 또는 iPhone의 경우에는 너비가 좁을수록 스크롤이 더 빠르게 발생하므로 세로 공간을 더 많이 제공하는 것이 좋습니다.

XAML에서 정적 리소스 사용

앱의 글꼴 색 및 배경색 값을 보유하는 정적 클래스를 만듭니다. 그런 다음, x:Static 태그 확장을 사용하여 클래스에서 이러한 값을 읽고 페이지 컨트롤을 위해 XAML 태그에 적용합니다.

Visual Studio에서 이전 연습에서 편집한 Notes 앱으로 돌아갑니다.

참고

앱의 작업 복사본은 이전 연습을 시작할 때 복제한 연습 리포지토리의 exercise2 폴더에 있습니다.
솔루션 탐색기 창에서 Notes 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음, 클래스를 선택합니다.
새 항목 추가 대화 상자에서 클래스 템플릿이 선택되었는지 확인합니다. 새 클래스 파일의 이름을 SharedResources.cs로 지정한 다음 추가를 선택합니다.
SharedResources.cs 파일에서 using 지시문을 다음 코드로 바꾸고 SharedResources 클래스를 static(으)로 표시합니다.
```
namespace Notes;

static class SharedResources
{

}
```
static readonly 필드 FontColor를 SharedResources 클래스에 추가합니다. 이 필드는 현재 파란색에 해당하는 값을 제공하지만 모든 유효한 RGB 값 조합을 사용하여 이를 수정할 수 있습니다.
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

이름이 BackgroundColor인 두 번째 static readonly 필드를 추가하고 이를 원하는 색으로 설정합니다.

static class SharedResources
{
    ...
    public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
}

MainPage.xaml 파일을 엽니다.
x:Class 특성 앞에 xml 다음 네임스페이스 선언을 ContentPage 요소에 추가합니다. 이 선언은 C# Notes 네임스페이스의 클래스를 XAML 페이지 범위로 가져옵니다.
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
다음 코드에 표시된 TextColor 특성을 Label 컨트롤에 추가합니다. 이 태그는 x:Static 태그 확장을 사용해서 SharedResources 클래스의 static 필드에 저장된 값을 검색합니다.
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

x:Static 태그 확장을 사용해서 Editor 및 Button 컨트롤에 대해 TextColor 및 BackgroundColor 특성을 설정합니다. MainPage.xaml 파일에 대한 완료된 태그는 다음과 같습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage">

    <VerticalStackLayout Padding="30,60,30,30">
        <Label Text="Notes"
            HorizontalOptions="Center"
            FontAttributes="Bold" 
            TextColor="{x:Static Member=notes:SharedResources.FontColor}" />

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>

        <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">

            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnSaveButtonClicked" />

            <Button Grid.Column="2"
                    Text="Delete" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>

</ContentPage>

참고 항목

이 XAML 코드에는 TextColor 및 BackgroundColor 속성을 설정하는 태그의 반복이 포함됩니다. XAML을 사용하면 App.xaml 파일에서 리소스 사전을 사용하여 앱 전체에 전역으로 적용될 수 있는 리소스를 정의할 수 있습니다. 이 기술은 이후 모듈에서 설명합니다.

앱을 다시 빌드하고 Windows를 사용하여 실행합니다. 색상이 SharedResources 클래스에 지정한 것과 일치하는지 확인합니다. 시간이 있으면 Android 에뮬레이터를 사용해서도 앱 실행을 시도하세요.
완료되면 Visual Studio로 돌아갑니다.

플랫폼별 사용자 지정 추가

Visual Studio에서 MainPage.xaml 파일을 엽니다.
Editor 컨트롤 정의를 찾아서 다음 예시에 표시된 대로 HeightRequest 속성의 값을 수정합니다.
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
이 태그는 기본 컨트롤 높이를 100 단위로 설정하지만 Android에서는 500으로 증가합니다.
앱을 다시 빌드하고 Windows를 사용하여 실행한 다음, Android에서 실행합니다. 앱은 각 플랫폼에서 다음과 같이 표시됩니다.

연습: XAML 페이지에 동작 추가

XAML에서 정적 리소스 사용

플랫폼별 사용자 지정 추가

피드백