1장.Part 1. XAML 시작하기Getting Started with XAML

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms 응용 프로그램에서 XAML은 주로 페이지의 시각적 내용 및 C# 코드 숨김 파일을 함께 정의할 때 사용됩니다.In a Xamarin.Forms application, XAML is mostly used to define the visual contents of a page and works together with a C# code-behind file.

코드 숨김 파일은 태그에 대한 코드 지원을 제공합니다.The code-behind file provides code support for the markup. 해당 두 파일은 모두 자식 뷰 및 속성 초기화를 포함하는 새 클래스 정의에 영향을 줍니다.Together, these two files contribute to a new class definition that includes child views and property initialization. XAML 파일에서 클래스 및 속성은 XML 요소 및 특성과 함께 참조되고, 태그와 코드 간 연결이 설정됩니다.Within the XAML file, classes and properties are referenced with XML elements and attributes, and links between the markup and code are established.

솔루션 만들기Creating the Solution

첫 번째 XAML 파일 편집을 시작하려면 Visual Studio 또는 Mac용 Visual Studio를 사용하여 새 Xamarin.Forms 솔루션을 만듭니다.To begin editing your first XAML file, use Visual Studio or Visual Studio for Mac to create a new Xamarin.Forms solution. (사용자 환경에 해당하는 아래에 있는 탭을 선택합니다.)(Select the tab below corresponding to your environment.)

Windows에서는 Visual Studio를 사용하여 메뉴에서 파일 > 새로 만들기 > 프로젝트 를 선택합니다.In Windows, use Visual Studio to select File > New > Project from the menu. 새 프로젝트 대화 상자에서 왼쪽에 있는 Visual C# > Cross-Platform 을 선택한 다음 가운데 있는 목록에서 모바일 앱(Xamarin.Forms) 을 선택합니다.In the New Project dialog, select Visual C# > Cross Platform at the left, and then Mobile App (Xamarin.Forms) from the list in the center.

솔루션에 대한 위치를 선택하고, 이름을 XamlSamples(또는 선호하는 이름)로 입력하고 확인을 누릅니다.Select a location for the solution, give it a name of XamlSamples (or whatever you prefer), and press OK.

다음 화면에서 Blank 템플릿 및 .NET Standard 코드 공유 전략을 선택합니다.On the next screen, select the Blank App template and the .NET Standard code-sharing strategy:

확인을 누릅니다.Press OK.

솔루션에 다음과 같은 4개의 프로젝트가 생성됩니다. XamlSamples .NET Standard 라이브러리 XamlSamples.Android, XamlSamples.iOS, 및 UWP(Universal Windows Platform) 솔루션 XamlSamples.UWP.Four projects are created in the solution: the XamlSamples .NET Standard library, XamlSamples.Android, XamlSamples.iOS, and the Universal Windows Platform solution, XamlSamples.UWP.

XamlSamples 솔루션 생성 후에 다양한 플랫폼 프로젝트를 솔루션 시작 프로젝트로 선택하고, 프로젝트 템플릿으로 생성된 간단한 응용 프로그램을 폰 에뮬레이터나 실제 장치에 빌드 및 배포하여 자신의 개발 환경을 테스트할 수도 있습니다.After creating the XamlSamples solution, you might want to test your development environment by selecting the various platform projects as the solution startup project, and building and deploying the simple application created by the project template on either phone emulators or real devices.

플랫폼 특정 코드를 작성할 필요가 없는 경우, 사용자는 거의 대부분의 프로그래밍 시간을 공유된 XamlSamples .NET Standard 라이브러리 프로젝트에 할애하게 됩니다.Unless you need to write platform-specific code, the shared XamlSamples .NET Standard library project is where you’ll be spending virtually all of your programming time. 이 문서는 공유 프로젝트 이외의 내용은 다루지 않을 것입니다.These articles will not venture outside of that project.

XAML 파일의 분석Anatomy of a XAML File

XamlSamples .NET Standard 라이브러리 내에는 다음과 같은 이름을 가진 파일 쌍이 있습니다.Within the XamlSamples .NET Standard library are a pair of files with the following names:

  • App.xaml: XAML 파일App.xaml, the XAML file; and
  • App.xaml.cs: XAML 파일과 연결된 C# 코드 숨김 파일App.xaml.cs, a C# code-behind file associated with the XAML file.

코드 숨김 파일을 보려면 App.xaml 옆에 있는 화살표를 클릭해야 합니다.You'll need to click the arrow next to App.xaml to see the code-behind file.

App.xamlApp.xaml.cs 모두 Application에서 파생된 App이라는 클래스와 관련됩니다.Both App.xaml and App.xaml.cs contribute to a class named App that derives from Application. XAML 파일과 함께 있는 대부분의 다른 클래스는 ContentPage에서 파생된 클래스와 관련됩니다. 해당 파일들은 전체 페이지의 시각적 내용을 정의하기 위해 XAML을 사용합니다.Most other classes with XAML files contribute to a class that derives from ContentPage; those files use XAML to define the visual contents of an entire page. 다음은 XamlSamples 프로젝트에 있는 실제적으로 다른 두 파일입니다.This is true of the other two files in the XamlSamples project:

  • MainPage.xaml: XAML 파일MainPage.xaml, the XAML file; and
  • MainPage.xaml.cs: C# 코드 숨김 파일MainPage.xaml.cs, the C# code-behind file.

MainPage.xaml 파일은 다음과 같습니다(하지만 형태가 약간 다를 수 있습니다).The MainPage.xaml file looks like this (although the formatting might be a little different):

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             x:Class="XamlSamples.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>

</ContentPage>

두 XML 네임 스페이스 (xmlns) 선언 Xamarin 웹 사이트에서 보이는 첫 번째 및 microsoft의 두 번째 Uri 참조입니다.The two XML namespace (xmlns) declarations refer to URIs, the first seemingly on Xamarin’s web site and the second on Microsoft’s. 궁금증에 해당 Uri 지점을 확인 합니다.Don’t bother checking what those URIs point to. 아무 것도 없는 합니다.There’s nothing there. 이는 Xamarin 및 Microsoft 소유의 URI이고 기본적으로 버전 식별자로 작동합니다.They are simply URIs owned by Xamarin and Microsoft, and they basically function as version identifiers.

첫 번째 XML 네임 스페이스 선언은 Xamarin.Forms에서 접두사가 없는 클래스 참조를 갖는 XAML 파일 내의 정의된 태그, 예를 들면 ContentPage와 같은 태그를 의미합니다.The first XML namespace declaration means that tags defined within the XAML file with no prefix refer to classes in Xamarin.Forms, for example ContentPage. 두 번째 네임 스페이스 선언은 x의 접두사를 정의합니다.The second namespace declaration defines a prefix of x. 이는 XAML 자체에 내장된 몇 가지 요소와 특성 및 XAML의 다른 구현이 지원되는 곳에서 사용됩니다.This is used for several elements and attributes that are intrinsic to XAML itself and which are supported by other implementations of XAML. 그러나 이러한 요소와 특성은 URI에 포함된 연도에 따라 약간 다릅니다.However, these elements and attributes are slightly different depending on the year embedded in the URI. Xamarin.Forms는 전체가 아니라 2009 XAML 사양을 지원합니다.Xamarin.Forms supports the 2009 XAML specification, but not all of it.

local 네임 스페이스 선언은 .NET Standard 라이브러리 프로젝트에서 다른 클래스에 접근할 수 있도록 해줍니다.The local namespace declaration allows you to access other classes from the .NET Standard library project.

첫 번째 태그의 끝에서 x 접두사는 Class라는 특성으로 사용됩니다.At the end of that first tag, the x prefix is used for an attribute named Class. x와 같은 접두사는 XAML 네임 스페이스에서 거의 보편적이므로 Class와 같은 XAML 특성은 거의 항상 x:Class와 같이 참조됩니다.Because the use of this x prefix is virtually universal for the XAML namespace, XAML attributes such as Class are almost always referred to as x:Class.

x:Class 특성은 XamlSamples 네임 스페이스에 있는 MainPage 클래스를 완전히 정규화된 .NET 클래스 이름으로 지정합니다.The x:Class attribute specifies a fully qualified .NET class name: the MainPage class in the XamlSamples namespace. 즉, 이 XAML 파일은 XamlSamples 네임 스페이스에 있는 x:Class 특성이 표시된 태그 ContentPage에서 파생된 MainPage라는 새 클래스를 정의합니다.This means that this XAML file defines a new class named MainPage in the XamlSamples namespace that derives from ContentPage—the tag in which the x:Class attribute appears.

x:Class 특성은 C# 클래스에서 파생되었음을 정의하기 위해 XAML 파일의 루트 요소에만 나타날 수 있습니다.The x:Class attribute can only appear in the root element of a XAML file to define a derived C# class. 이것은 XAML 파일에 정의된 새 클래스입니다.This is the only new class defined in the XAML file. XAML 파일에 표시되는 그 밖의 모든 항목은 단순히 기존 클래스에서 인스턴스화되고 초기화하는 용도로 사용됩니다.Everything else that appears in the XAML file is instead simply instantiated from existing classes and initialized.

MainPage.xaml.cs 파일은 다음과 같습니다(사용하지 않는 using 지시문은 제외됨).The MainPage.xaml.cs file looks like this (aside from unused using directives):

using Xamarin.Forms;

namespace XamlSamples
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

MainPage 클래스는 ContentPage에서 파생되지만 partial 클래스 정의를 주목하십시오.The MainPage class derives from ContentPage, but notice the partial class definition. 이는 MainPage에 대해 다른 partial 클래스 정의가 있을 것이라는 것을 암시하지만, 어디에 있을까요?This suggests that there should be another partial class definition for MainPage, but where is it? 그리고 InitializeComponent 메서드는 무엇일까요?And what is that InitializeComponent method?

Visual Studio는 프로젝트를 빌드할 때 XAML 파일을 C# 코드 파일로 생성하도록 변환합니다.When Visual Studio builds the project, it parses the XAML file to generate a C# code file. XamlSamples\XamlSamples\obj\Debug 디렉터리를 보면 XamlSamples.MainPage.xaml.g.cs라는 파일을 찾을 수 있습니다.If you look in the XamlSamples\XamlSamples\obj\Debug directory, you’ll find a file named XamlSamples.MainPage.xaml.g.cs. 'g'는 생성(generated)을 의미합니다.The ‘g’ stands for generated. 이것이 MainPage 생성자에서 호출되는 InitializeComponent 메서드 정의를 포함하는MainPage 의 다른 partial 클래스 정의입니다.This is the other partial class definition of MainPage that contains the definition of the InitializeComponent method called from the MainPage constructor. 이러한 두 개의 partial MainPage 클래스 정의는 함께 컴파일될 수 있습니다.These two partial MainPage class definitions can then be compiled together. XAML이 컴파일 될지 여부에 따라 XAML 파일 또는 XAML 파일의 이진 형식 중 하나가 실행 파일에 포함됩니다.Depending on whether the XAML is compiled or not, either the XAML file or a binary form of the XAML file is embedded in the executable.

런타임 시 특정 플랫폼 프로젝트의 코드는 .NET Standard 라이브러리의 App 클래스 인스턴스를 전달하는 LoadApplication 메서드를 호출합니다.At runtime, code in the particular platform project calls a LoadApplication method, passing to it a new instance of the App class in the .NET Standard library. App 클래스 생성자는 MainPage를 인스턴스화합니다.The App class constructor instantiates MainPage. MainPage 클래스의 생성자는 InitializeComponent를 호출하고, 그러면 .NET Standard 라이브러리에서 XAML 파일(또는 해당 컴파일된 이진 파일)을 추출하는LoadFromXaml 메서드를 호출합니다.The constructor of that class calls InitializeComponent, which then calls the LoadFromXaml method that extracts the XAML file (or its compiled binary) from the .NET Standard library. LoadFromXaml은 XAML 파일에 정의된 모든 개체를 초기화하고, 부모-자식 관계로 개체를 모두 함께 연결하고, 코드에 정의된 이벤트 처리기를 XAML 파일의 이벤트 설정에 연결하고, 개체의 결과 트리를 페이지의 내용으로 설정합니다.LoadFromXaml initializes all the objects defined in the XAML file, connects them all together in parent-child relationships, attaches event handlers defined in code to events set in the XAML file, and sets the resultant tree of objects as the content of the page.

일반적으로 생성된 코드 파일에 많은 시간을 투자할 필요는 없지만, 종종 생성된 파일의 코드에서 런타임 예외가 발생하므로 친숙해질 필요가 있습니다.Although you normally don’t need to spend much time with generated code files, sometimes runtime exceptions are raised on code in the generated files, so you should be familiar with them.

이 프로그램을 컴파일하고 실행하는 경우, Label 요소는 다음 XAML에서 알 수 있듯이 페이지의 가운데에 나타납니다.When you compile and run this program, the Label element appears in the center of the page as the XAML suggests:

시각적인 것에 더 관심이 있다면 XAML에 더 관심을 갖기만 하면 됩니다.For more interesting visuals, all you need is more interesting XAML.

새 XAML 페이지 추가Adding New XAML Pages

프로젝트에 다른 XAML 기반 ContentPage 를 추가하려면 XamlSamples .NET Standard 라이브러리 프로젝트를 선택하고 프로젝트 > 새 항목 추가 메뉴 항목을 실행합니다.To add other XAML-based ContentPage classes to your project, select the XamlSamples .NET Standard library project and invoke the Project > Add New Item menu item. 새 항목 추가 대화 상자에서 왼쪽에 있는 Visual C#Xamarin.Forms를 선택합니다.At the left of the Add New Item dialog, select Visual C# and Xamarin.Forms. 목록에서 콘텐츠 페이지(코드 전용 페이지를 생성하는 콘텐츠 페이지 (C#) 또는 페이지가 아닌콘텐츠 뷰가 아님)를 선택합니다.From the list select Content Page (not Content Page (C#), which creates a code-only page, or Content View, which is not a page). 페이지 이름을 예를 들어 다음과 같이 HelloXamlPage.xaml로 입력합니다.Give the page a name, for example, HelloXamlPage.xaml:

HelloXamlPage.xamlHelloXamlPage.xaml.cs 코드 숨김 파일, 이렇게 두 파일이 프로젝트에 추가됩니다.Two files are added to the project, HelloXamlPage.xaml and the code-behind file HelloXamlPage.xaml.cs.

페이지 콘텐츠 설정Setting Page Content

HelloXamlPage.xaml 파일 편집에는 다음과 같이 오직 ContentPageContentPage.Content 태그만 있으면 됩니다.Edit the HelloXamlPage.xaml file so that the only tags are those for ContentPage and ContentPage.Content:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage">
    <ContentPage.Content>

    </ContentPage.Content>
</ContentPage>

ContentPage.Content 태그는 XAML의 고유한 구문 중 일부입니다.The ContentPage.Content tags are part of the unique syntax of XAML. 처음에는 유효하지 않은 XML로 표시될 수 있지만, 태그는 적합합니다.At first, they might appear to be invalid XML, but they are legal. 마침표는 XML에서 특수 문자가 아닙니다.The period is not a special character in XML.

ContentPage.Content 태그는 속성 요소 태그라고 합니다.The ContentPage.Content tags are called property element tags. ContentContentPage의 속성이고, 일반적으로 단일 뷰나 자식 뷰가 있는 레이아웃으로 설정합니다.Content is a property of ContentPage, and is generally set to a single view or a layout with child views. 일반적으로 속성은 XAML에서 특성이 되지만, Content 특성은 복잡한 개체로 설정하는 것이 어렵습니다.Normally properties become attributes in XAML, but it would be hard to set a Content attribute to a complex object. 이런 이유로 속성은 클래스 이름과 마침표로 구분된 속성 이름으로 이루어진 XML 요소로 표현 됩니다.For that reason, the property is expressed as an XML element consisting of the class name and the property name separated by a period. 이제 Content 속성은 다음과 같이 ContentPage.Content 태그 사이에 설정할 수 있습니다.Now the Content property can be set between the ContentPage.Content tags, like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage"
             Title="Hello XAML Page">
    <ContentPage.Content>

        <Label Text="Hello, XAML!"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center"
               Rotation="-15"
               IsVisible="true"
               FontSize="Large"
               FontAttributes="Bold"
               TextColor="Blue" />

    </ContentPage.Content>
</ContentPage>

또한 Title 특성이 루트 태그에 설정되었다는 것에 주의하십시오.Also notice that a Title attribute has been set on the root tag.

이때 클래스, 속성 및 XML 간의 관계는 분명 하 게 해야 합니다. Xamarin.Forms 클래스 (같은 ContentPage 또는 Label) XML 요소에 XAML 파일에 표시 됩니다.At this time, the relationship between classes, properties, and XML should be evident: A Xamarin.Forms class (such as ContentPage or Label) appears in the XAML file as an XML element. ContentPage 상의 TitleLabel의 7가지 속성을 포함하는 해당 클래스의 속성은 일반적으로 XML 특성으로 표시합니다.Properties of that class—including Title on ContentPage and seven properties of Label—usually appear as XML attributes.

대부분의 바로 가기는 이러한 속성의 값을 설정하기 위해 존재합니다.Many shortcuts exist to set the values of these properties. 일부 속성은 기본 데이터 형식: 예를 들어, 합니다 TitleText 형식의 속성은 String, Rotation 형식입니다 Double, 및 IsVisible (되 true 기본적으로 설명을 돕기 위해 여기에서 설정 되 고) 형식의Boolean.Some properties are basic data types: For example, the Title and Text properties are of type String, Rotation is of type Double, and IsVisible (which is true by default and is set here only for illustration) is of type Boolean.

HorizontalTextAlignment 속성은 열거형인 TextAlignment 유형입니다.The HorizontalTextAlignment property is of type TextAlignment, which is an enumeration. 모든 열거형 유형 속성에는 멤버 이름만 제공하면 됩니다.For a property of any enumeration type, all you need supply is a member name.

그러나 변환기는 더 복잡한 유형의 속성에 대하여 구문 분석에 XAML을 사용합니다.For properties of more complex types, however, converters are used for parsing the XAML. 변환기는 TypeConverter에서 파생되는 Xamarin.Forms의 클래스입니다.These are classes in Xamarin.Forms that derive from TypeConverter. 대부분이 공용(public) 클래스이지만 몇몇은 아닙니다.Many are public classes but some are not. 해당 특정 XAML 파일에 대해 다음과 같은 몇 가지 변환기 클래스가 배후에서 작동합니다.For this particular XAML file, several of these classes play a role behind the scenes:

  • VerticalOptions 속성에 대한 LayoutOptionsConverterLayoutOptionsConverter for the VerticalOptions property
  • FontSize 속성에 대한 FontSizeConverterFontSizeConverter for the FontSize property
  • TextColor 속성에 대한 ColorTypeConverterColorTypeConverter for the TextColor property

이러한 변환기는 속성 설정의 허용 구문을 제어합니다.These converters govern the allowable syntax of the property settings.

ThicknessTypeConverter는 한 개, 쉼표로 구분된 두 개, 또는 네 개의 숫자를 처리할 수 있습니다.The ThicknessTypeConverter can handle one, two, or four numbers separated by commas. 1개의 숫자를 제공하면 네 면 모두에 적용됩니다.If one number is supplied, it applies to all four sides. 2개의 숫자이면 첫 번째는 왼쪽 및 오른쪽의 안쪽 여백이며, 두 번째는 위쪽 및 아래쪽입니다.With two numbers, the first is left and right padding, and the second is top and bottom. 4개의 숫자이면 순서대로 왼쪽, 위쪽, 오른쪽 및 아래쪽입니다.Four numbers are in the order left, top, right, and bottom.

LayoutOptionsConverterLayoutOptions 유형의 값에 대한 LayoutOptions 구조체의 공용(public) 정적(static) 필드 이름을 변환할 수 있습니다.The LayoutOptionsConverter can convert the names of public static fields of the LayoutOptions structure to values of type LayoutOptions.

FontSizeConverterNamedSize 멤버 또는 숫자 글꼴 크기를 제어할 수 있습니다.The FontSizeConverter can handle a NamedSize member or a numeric font size.

ColorTypeConverterColor 구조체 또는 알파 채널이 있거나 없는 숫자 기호(#)가 앞에 붙은 16 진수 RGB 값의 공용 정적 필드의 이름을 받습니다.The ColorTypeConverter accepts the names of public static fields of the Color structure or hexadecimal RGB values, with or without an alpha channel, preceded by a number sign (#). 알파 채널이 없는 구문은 다음과 같습니다.Here’s the syntax without an alpha channel:

TextColor="#rrggbb"

각 작은 문자는 16진수입니다.Each of the little letters is a hexadecimal digit. 알파 채널 포함 방법은 다음과 같습니다.Here is how an alpha channel is included:

TextColor="#aarrggbb">

알파 채널의 FF는 완전히 불투명이고 00은 완전히 투명하다는 것을 기억해 둡니다.For the alpha channel, keep in mind that FF is fully opaque and 00 is fully transparent.

다른 두 가지 형식을 사용하면 다음과 같이 각 채널에 대한 단일 16진수만을 지정할 수 있습니다.Two other formats allow you to specify only a single hexadecimal digit for each channel:

TextColor="#rgb" TextColor="#argb"TextColor="#rgb" TextColor="#argb"

이러한 경우, 숫자는 값을 구성하도록 반복됩니다.In these cases, the digit is repeated to form the value. 예를 들어, #CF3는 RGB 색 CC-FF-33입니다.For example, #CF3 is the RGB color CC-FF-33.

XamlSamples 프로그램을 실행하면 MainPage가 표시 됩니다.When you run the XamlSamples program, the MainPage is displayed. HelloXamlPage를 보기 위해서는 App.xaml.cs 파일에서 새 시작 페이지로 설정하거나 또는 MainPage에서 새 페이지로 탐색(navigation)을 합니다.To see the new HelloXamlPage you can either set that as the new startup page in the App.xaml.cs file, or navigate to the new page from MainPage.

탐색을 구현하려면 먼저 App.xaml.cs 생성자에서 NavigationPage 개체를 생성하도록 코드를 변경해야 합니다.To implement navigation, first change code in the App.xaml.cs constructor so that a NavigationPage object is created:

public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new MainPage());
}

MainPage.xaml.cs 생성자에서 다음과 같이 간단한 Button 하나를 추가하고 HelloXamlPage로 이동하는 이벤트 처리기를 사용할 수 있습니다.In the MainPage.xaml.cs constructor, you can create a simple Button and use the event handler to navigate to HelloXamlPage:

public MainPage()
{
    InitializeComponent();

    Button button = new Button
    {
        Text = "Navigate!",
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    };

    button.Clicked += async (sender, args) =>
    {
        await Navigation.PushAsync(new HelloXamlPage());
    };

    Content = button;
}

페이지의 Content 속성을 설정하면 XAML 파일의 Content 속성을 대체하게 됩니다.Setting the Content property of the page replaces the setting of the Content property in the XAML file. 해당 프로그램의 새 버전을 컴파일하고 배포하면 단추가 화면에 나타납니다.When you compile and deploy the new version of this program, a button appears on the screen. 단추를 눌러 HelloXamlPage로 이동합니다.Pressing it navigates to HelloXamlPage. IPhone, Android 및 UWP 결과 페이지는 다음과 같습니다.Here’s the resultant page on iPhone, Android, and UWP:

iOS에서는 < 뒤로 버튼을 사용하고, Android에서는 페이지 상단 또는 폰의 맨 아래에 있는 왼쪽 화살표를 사용하며, Windows 10에서는 페이지의 상단에 있는 왼쪽 화살표를 사용하여 MainPage로 다시 이동할 수 있습니다.You can navigate back to MainPage using the < Back button on iOS, using the left arrow at the top of the page or at the bottom of the phone on Android, or using the left arrow at the top of the page on Windows 10.

Label 표시를 위해 다양한 방법의 XAML 연습을 자유롭게 해 봅니다.Feel free to experiment with the XAML for different ways to render the Label. 텍스트에 유니코드 문자를 포함하는 경우 표준 XML 구문을 사용할 수 있습니다.If you need to embed any Unicode characters into the text, you can use the standard XML syntax. 예를 들어, 다음과 같이 인사말에 지능형 따옴표를 삽입합니다.For example, to put the greeting in smart quotes, use:

<Label Text="&#x201C;Hello, XAML!&#x201D;" … />

해당 모양은 다음과 같습니다.Here’s what it looks like:

XAML 및 코드 상호 작용XAML and Code Interactions

HelloXamlPage 샘플은 페이지에 단일 Label만 포함했지만 아주 일반적인 것은 아닙니다.The HelloXamlPage sample contains only a single Label on the page, but this is very unusual. 대부분의 ContentPage 상속은 StackLayout과 같은 일종의 레이아웃으로 Content 속성을 설정합니다.Most ContentPage derivatives set the Content property to a layout of some sort, such as a StackLayout. StackLayoutChildren 속성은 IList<View> 형식이 되도록 정의되지만 그것은 ElementCollection<View> 형식의 실제 개체이며, 해당 컬랙션은 여러 뷰 또는 다른 레이아웃으로 채울 수 있습니다.The Children property of the StackLayout is defined to be of type IList<View> but it’s actually an object of type ElementCollection<View>, and that collection can be populated with multiple views or other layouts. XAML에서 해당 부모-자식 관계는 일반 XML 계층 구조를 사용하여 설정됩니다.In XAML, these parent-child relationships are established with normal XML hierarchy. XamlPlusCodePage라는 이름의 새 페이지에 대한 XAML 파일은 다음과 같습니다.Here’s a XAML file for a new page named XamlPlusCodePage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <StackLayout>
        <Slider VerticalOptions="CenterAndExpand" />

        <Label Text="A simple Label"
               Font="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

이 XAML 파일은 구문상으로 완전하며 다음과 같이 표시됩니다.This XAML file is syntactically complete, and here’s what it looks like:

그러나 이 프로그램이 기능적으로 결함이 있다고 생각할 수 있습니다.However, you are likely to consider this program to be functionally deficient. SliderLabel에 현재 값을 표시하고, Button은 프로그램 내에서 어떤 작업을 수행할 가능성이 있슴니다.Perhaps the Slider is supposed to cause the Label to display the current value, and the Button is probably intended to do something within the program.

4부. 데이터 바인딩 기본 사항 에서 살펴보겠지만, Label을 사용하여 Slider 값을 표시하는 작업은 데이터 바인딩을 사용하여 XAML에서 완전히 처리할 수 있습니다.As you’ll see in Part 4. Data Binding Basics, the job of displaying a Slider value using a Label can be handled entirely in XAML with a data binding. 하지만 코드 솔루션을 먼저 보는 것이 유용 합니다.But it is useful to see the code solution first. 그렇더라도 `Button`` 클릭을 처리하는 데는 분명히 코드가 있어야 합니다.Even so, handling the Button click definitely requires code. 즉, XamlPlusCodePage에 대한 코드 숨김 파일에는 SliderValueChanged 이벤트와 ButtonClicked 이벤트를 위한 처리기를 포함되어야 합니다.This means that the code-behind file for XamlPlusCodePage must contain handlers for the ValueChanged event of the Slider and the Clicked event of the Button. 다음과 같이 추가해 보겠습니다.Let’s add them:

namespace XamlSamples
{
    public partial class XamlPlusCodePage
    {
        public XamlPlusCodePage()
        {
            InitializeComponent();
        }

        void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
        {

        }

        void OnButtonClicked(object sender, EventArgs args)
        {

        }
    }
}

해당 이벤트 처리기들은 공용(public)일 필요가 없습니다.These event handlers do not need to be public.

XAML 파일로 돌아가서, SliderButton 태그는 다음과 같이 해당 처리기를 참조하는 ValueChangedClicked 이벤트를 포함해야 합니다.Back in the XAML file, the Slider and Button tags need to include attributes for the ValueChanged and Clicked events that reference these handlers:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <StackLayout>
        <Slider VerticalOptions="CenterAndExpand"
                ValueChanged="OnSliderValueChanged" />

        <Label Text="A simple Label"
               Font="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

처리기를 이벤트에 할당하는 것은 속성에 값을 할당하는 것과 동일한 구문이라는 것을 알 수 있습니다.Notice that assigning a handler to an event has the same syntax as assigning a value to a property.

SliderValueChanged 이벤트에 대한 처리기가 현재 값 표시를 위해 Label을 사용할 것이라면 처리기는 코드에서 해당 개체를 참조해야 합니다.If the handler for the ValueChanged event of the Slider will be using the Label to display the current value, the handler needs to reference that object from code. Labelx:Name 특성을 사용하여 지정하는 이름이 필요합니다.The Label needs a name, which is specified with the x:Name attribute.

<Label x:Name="valueLabel"
       Text="A simple Label"
       Font="Large"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />

x:Name 특성의 x 접두사는 특성이 XAML에 고유하다는 것을 나타냅니다.The x prefix of the x:Name attribute indicates that this attribute is intrinsic to XAML.

x:Name 특성에 할당한 이름은 C# 변수 이름과 동일한 규칙입니다.The name you assign to the x:Name attribute has the same rules as C# variable names. 예를 들어, 문자 또는 밑줄로 시작해야 하고 공백을 포함하면 안됩니다.For example, it must begin with a letter or underscore and contain no embedded spaces.

이제 ValueChanged 이벤트 처리기는 새 Slider 값 표시를 위해 Label을 설정할 수 있습니다.Now the ValueChanged event handler can set the Label to display the new Slider value. 새 값은 다음과 같이 이벤트 인수에서 사용할 수 있습니다.The new value is available from the event arguments:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = args.NewValue.ToString("F3");
}

또는, 처리기는 다음과 같이 sender 인수에서 해당 이벤트를 생성하는 Slider 개체를 가져와서 Value 속성을 얻을 수 있습니다.Or, the handler could obtain the Slider object that is generating this event from the sender argument and obtain the Value property from that:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = ((Slider)sender).Value.ToString("F3");
}

프로그램을 처음 실행하면, ValueChanged 이벤트가 아직 실행되지 않았기 때문에 LabelSlider 값이 표시되지 않습니다.When you first run the program, the Label doesn’t display the Slider value because the ValueChanged event hasn’t yet fired. 하지만 다음과 같이 Slider를 조정하기만 하면 값이 표시됩니다.But any manipulation of the Slider causes the value to be displayed:

이제는 Button 차례입니다.Now for the Button. 버튼의 Text를 사용하여 경고를 표시하도록 Clicked 이벤트 응답을 시연해 보겠습니다.Let’s simulate a response to a Clicked event by displaying an alert with the Text of the button. 이벤트 처리기는 다음과 같이 sender 인수를 Button으로 안전하게 변환한 다음 해당 속성에 접근할 수 있습니다.The event handler can safely cast the sender argument to a Button and then access its properties:

async void OnButtonClicked(object sender, EventArgs args)
{
    Button button = (Button)sender;
    await DisplayAlert("Clicked!",
        "The button labeled '" + button.Text + "' has been clicked",
        "OK");
}

위 메서드는 DisplayAlert 메서드가 비동기적으로 수행되므로 메서드가 완료될 때 반환하는 await 연산자로 시작하기 때문에 async로 정의합니다.The method is defined as async because the DisplayAlert method is asynchronous and should be prefaced with the await operator, which returns when the method completes. 이 메서드는 sender 인수에서 이벤트를 발생시키는 Button을 얻으므로 동일한 처리기를 여러 단추에 사용할 수 있습니다.Because this method obtains the Button firing the event from the sender argument, the same handler could be used for multiple buttons.

XAML에 정의된 개체 코드 숨김 파일에서 처리되는 이벤트를 발생시키고 코드 숨김 파일은 x:Name 특성과 함께 할당된 이름을 사용하여 XAML에 정의된 개체에 접근할 수 있음을 확인했습니다.You’ve seen that an object defined in XAML can fire an event that is handled in the code-behind file, and that the code-behind file can access an object defined in XAML using the name assigned to it with the x:Name attribute. 이것은 코드 및 XAML이 상호 작용하는 두 가지 기본 방법입니다.These are the two fundamental ways that code and XAML interact.

이제 지역(private) 필드인 모든 x:Name으로 할당된 모든 이름을 포함하는 새로 생성된 XamlPlusCode.xaml.g.cs 파일을 검토하여 XAML 작동 방식에 대한 몇 가지 추가 정보를 얻을 수 있습니다.Some additional insights into how XAML works can be gleaned by examining the newly generated XamlPlusCode.xaml.g.cs file, which now includes any name assigned to any x:Name attribute as a private field. 해당 파일의 단순화된 버전은 다음과 같습니다.Here's a simplified version of that file:

public partial class XamlPlusCodePage : ContentPage {

    private Label valueLabel;

    private void InitializeComponent() {
        this.LoadFromXaml(typeof(XamlPlusCodePage));
        valueLabel = this.FindByName<Label>("valueLabel");
    }
}

이 필드를 선언하면 해당 관할권 지역의 XamlPlusCodePage 부분(partial) 클래스 파일에서 변수를 자유롭게 사용할 수 있습니다.The declaration of this field allows the variable to be freely used anywhere within the XamlPlusCodePage partial class file under your jurisdiction. 런타임 시 필드는 XAML이 구문 분석된 후 할당됩니다.At runtime, the field is assigned after the XAML has been parsed. 즉, XamlPlusCodePage 생성자가 시작되고 InitializeComponent가 호출된 후 유효하지 않으면 valueLabel 필드는 null이 됩니다.This means that the valueLabel field is null when the XamlPlusCodePage constructor begins but valid after InitializeComponent is called.

InitializeComponent가 생성자에게 다시 컨트롤을 반환한 후에, 페이지의 비주얼은 마치 컨트롤이 코드에서 인스턴스화 및 초기화된 것처럼 구성되었습니다.After InitializeComponent returns control back to the constructor, the visuals of the page have been constructed just as if they had been instantiated and initialized in code. XAML 파일은 더 이상 클래스에서 어떤 역할을 수행하지 않습니다.The XAML file no longer plays any role in the class. 예를 들어, StackLayout에 뷰를 추가하거나 페이지의 Content 속성을 완전히 다른 것으로 설정하는 등 원하는 방식으로 페이지에서 해당 개체를 조작할 수 있습니다.You can manipulate these objects on the page in any way that you want, for example, by adding views to the StackLayout, or setting the Content property of the page to something else entirely. 페이지의 Content 속성과 레이아웃의 Children 컬렉션에 있는 항목을 검사하여 '트리를 돌아다닐' 수 있습니다.You can “walk the tree” by examining the Content property of the page and the items in the Children collections of layouts. 이러한 방식으로 접근되는 뷰 속성을 설정하거나 이벤트 처리기를 동적으로 할당할 수 있습니다.You can set properties on views accessed in this way, or assign event handlers to them dynamically.

자유롭습니다.Feel free. 페이지는 사용자의 것이고 XAML은 페이지 내용을 만들기 위한 유일한 도구입니다.It’s your page, and XAML is only a tool to build its content.

요약Summary

이 소개 글로 XAML 파일과 코드 파일이 클래스 정의에 어떻게 기여하는지, 그리고 XAML 및 코드 파일이 상호 작용하는 방식을 살펴보았습니다.With this introduction, you’ve seen how a XAML file and code file contribute to a class definition, and how the XAML and code files interact. 하지만 XAML에는 매우 유연한 방식으로 사용할 수 있는 자체적인 고유 구문 기능이 있습니다.But XAML also has its own unique syntactical features that allow it to be used in a very flexible manner. 2장. 필수 XAML 구문 에서 해당 내용을 살펴볼 수 있습니다.You can begin exploring these in Part 2. Essential XAML Syntax.