Xamarin.Forms 레이블 자습서
이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.
- 첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
- StackLayout 자습서
이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.
- XAML에서 Xamarin.Forms
Label을 만듭니다. Label의 모양을 변경합니다.- 단일
Label에서 여러 형식을 포함하는 텍스트를 표시합니다.
Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 Label에 텍스트를 표시하는 방법을 보여 주는 간단한 애플리케이션을 만들겠습니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.
또한 Xamarin.Forms용 XAML 핫 다시 로드를 사용하여 애플리케이션을 다시 빌드하지 않고 UI 변경 내용을 확인할 수 있습니다.
레이블 만들기
이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.
Visual Studio를 실행하고, LabelTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.
Important
이 자습서의 C# 및 XAML 코드 조각은 솔루션의 이름이 LabelTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.
생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
솔루션 탐색기의 LabelTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LabelTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" /> </StackLayout> </ContentPage>이 코드는
StackLayout에서Label으로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다.Label.Text속성은 표시할 텍스트를 지정하고HorizontalOptions속성은Label이(가) 수평 가운데에 배치되도록 지정합니다.Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.
모양 변경
MainPage.xaml에서
Label선언을 수정하여 해당 시각적 개체 모양을 변경합니다.<Label Text="Welcome to Xamarin.Forms!" TextColor="Blue" FontAttributes="Italic" FontSize="22" TextDecorations="Underline" HorizontalOptions="Center" />이 코드는
Label의 시각적 개체 모양을 변경하는 속성을 설정합니다.TextColor속성은Label텍스트의 색상을 설정합니다.FontAttributes속성은 레이블의 글꼴을 기울임꼴로 설정하고FontSize속성은 글꼴 크기를 설정합니다. 또한 해당TextDecorations속성을 설정하여 밑줄 텍스트 장식을Label에 적용하고HorizontalOptions속성을Center로 설정하여 가로 가운데에 배치합니다.애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.
Label모양이 변경되었음을 확인합니다.
Label모양 설정에 관한 자세한 내용은 Xamarin.Forms 레이블 가이드를 참조하세요.
서식 있는 텍스트 표시
MainPage.xaml에서, 단일
Label에서 여러 형식을 사용하는 텍스트를 제공하도록Label선언을 수정합니다.<Label TextColor="Gray" FontSize="Medium"> <Label.FormattedText> <FormattedString> <Span Text="This sentence contains " /> <Span Text="words that are emphasized, " FontAttributes="Italic" /> <Span Text="and underlined." TextDecorations="Underline" /> </FormattedString> </Label.FormattedText> </Label>이 코드는 단일
Label에서 여러 형식을 사용하는 텍스트를 표시합니다. 첫 번째Span의 텍스트는Label의 서식 지정 세트를 사용하여 표시되는 반면, 두 번째 및 세 번째Span인스턴스의 텍스트는Label의 서식 지정 세트, 각Span의 추가 서식 지정 세트를 사용하여 표시됩니다.참고 항목
FormattedText속성은FormattedString유형이며 하나 이상의Span인스턴스로 구성됩니다.애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.
Label모양이 변경되었음을 확인합니다.
Visual Studio에서 애플리케이션을 중지합니다.
Span모양 설정에 관한 자세한 내용은 Xamarin.Forms 레이블 가이드의 Formatted text를 참조하세요.
축하합니다!
축하합니다. 자습서를 마쳤습니다. 여기서는 다음과 같은 방법을 알아보았습니다.
- XAML에서 Xamarin.Forms
Label을 만듭니다. Label의 모양을 변경합니다.- 단일
Label에서 여러 형식을 포함하는 텍스트를 표시합니다.
다음 단계
Xamarin.Forms를 사용하여 모바일 애플리케이션을 만드는 기본적인 내용에 대해 자세히 알아보려면 단추 자습서를 참조하세요.
관련 링크
본 섹션과 관련하여 문제가 있으십니까? 문제가 있으시면 본 섹션을 개선하기 위해 피드백을 제출해 주세요.