컨트롤 및 패턴 소개Intro to controls and patterns

Windows 앱 개발에서 컨트롤은 콘텐츠를 표시하거나 조작을 가능하게 하는 UI 요소입니다.In Windows app development, a control is a UI element that displays content or enables interaction. 단추, 입력란, 콤보 상자 등의 컨트롤을 사용하여 데이터를 표시하고 사용자 입력을 받기 위한 앱의 UI를 만듭니다.You create the UI for your app by using controls such as buttons, text boxes, and combo boxes to display data and get user input.

중요 API: Windows.UI.Xaml.Controls 네임스페이스Important APIs: Windows.UI.Xaml.Controls namespace

패턴은 컨트롤을 수정하거나 새로운 것을 만들기 위해 여러 컨트롤을 조합하는 방법입니다.A pattern is a recipe for modifying a control or combining several controls to make something new. 예를 들어 마스터/세부 정보 패턴은 앱 탐색에 SplitView 컨트롤을 사용할 수 있는 방법입니다.For example, the master/details pattern is a way that you can use a SplitView control for app navigation. 마찬가지로, NavigationView 컨트롤의 템플릿을 사용자 지정하여 탭 패턴을 구현할 수 있습니다.Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

대부분의 경우 컨트롤은 있는 그대로 사용할 수 있습니다.In many cases, you can use a control as-is. 하지만 XAML 컨트롤은 구조 및 모양과 기능을 분리하기 때문에 다양한 수준의 수정을 통해 요구에 맞게 수정할 수 있습니다.But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. 스타일 섹션에서 XAML 스타일컨트롤 템플릿을 사용하여 컨트롤을 수정하는 방법을 배울 수 있습니다.In the Style section, you can learn how to use XAML styles and control templates to modify a control.

이 섹션에서는 앱 UI를 빌드하는 데 사용할 수 있는 각 XAML 컨트롤에 대한 지침을 제공합니다.In this section, we provide guidance for each of the XAML controls you can use to build your app UI. 시작을 위해 이 문서는 앱에 컨트롤을 추가하는 방법을 보여 줍니다.To start, this article shows you how to add controls to your app. 앱에 컨트롤을 사용하기 위한 주요 3단계가 있습니다.There are 3 key steps to using controls to your app:

  • 컨트롤을 앱 UI에 추가합니다.Add a control to your app UI.
  • 컨트롤의 속성(예: 너비, 높이, 전경색 등)을 설정합니다.Set properties on the control, such as width, height, or foreground color.
  • 컨트롤 이벤트 처리기에 특정 작업을 수행하는 코드를 추가합니다.Add code to the control's event handlers so that it does something.

컨트롤 추가Add a control

다음과 같은 여러 가지 방법으로 앱에 컨트롤을 추가할 수 있습니다.You can add a control to an app in several ways:

  • Blend for Visual Studio 또는 Microsoft Visual Studio XAML(Extensible Application Markup Language) 디자이너와 같은 디자인 도구를 사용합니다.Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • Visual Studio XAML 편집기에서 XAML 태그에 컨트롤을 추가합니다.Add the control to the XAML markup in the Visual Studio XAML editor.
  • 코드에 컨트롤을 추가합니다.Add the control in code. 코드에 추가한 컨트롤은 앱이 실행되면 표시되지만 Visual Studio XAML 디자이너에서는 표시되지 않습니다.Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

Visual Studio에서 앱에 컨트롤을 추가하고 조작할 경우 도구 상자, XAML 디자이너, XAML 편집기 및 속성 창 등 프로그램의 다양한 기능을 사용할 수 있습니다.In Visual Studio, when you add and manipulate controls in your app, you can use many of the program's features, including the Toolbox, XAML designer, XAML editor, and the Properties window.

Visual Studio 도구 상자에는 앱에 사용할 수 있는 다양한 컨트롤이 표시됩니다.The Visual Studio Toolbox displays many of the controls that you can use in your app. 앱에 컨트롤을 추가하려면 도구 상자에서 원하는 컨트롤을 두 번 클릭합니다.To add a control to your app, double-click it in the Toolbox. 예를 들어 TextBox 컨트롤을 두 번 클릭하면 XAML 보기에 이 XAML이 추가됩니다.For example, when you double-click the TextBox control, this XAML is added to the XAML view.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

또한 도구 상자에서 XAML 디자이너로 컨트롤을 끌 수 있습니다.You can also drag the control from the Toolbox to the XAML designer.

컨트롤 이름 설정Set the name of a control

코드에서 컨트롤 작업을 하려면 해당 x:Name 특성을 설정하고 이름으로 컨트롤을 참조합니다.To work with a control in code, you set its x:Name attribute and reference it by name in your code. 컨트롤 이름은 Visual Studio 속성 창이나 XAML에서 설정할 수 있습니다.You can set the name in the Visual Studio Properties window or in XAML. 속성 창의 맨 위에 있는 이름 입력란을 사용하여 현재 선택한 컨트롤의 이름을 설정하는 방법은 다음과 같습니다.Here's how to set the name of the currently selected control by using the Name text box at the top of the Properties window.

컨트롤의 이름을 지정하려면To name a control

  1. 이름을 지정할 요소를 선택합니다.Select the element to name.
  2. 속성 패널의 Name 입력란에 이름을 입력합니다.In the Properties panel, type a name into the Name text box.
  3. Enter 키를 눌러 이름을 커밋합니다.Press Enter to commit the name.

Visual Studio 디자이너의 이름 속성

XAML 편집기에서 x:Name 특성을 변경하여 컨트롤 이름을 설정하는 방법은 다음과 같습니다.Here's how to set the name of a control in the XAML editor by adding the x:Name attribute.

<Button x:Name="Button1" Content="Button"/>

컨트롤 속성 설정Set the control properties

속성을 사용하여 컨트롤의 모양, 콘텐츠 및 기타 특성을 지정합니다.You use properties to specify the appearance, content, and other attributes of controls. 디자인 도구를 사용하여 컨트롤을 추가할 경우 크기, 위치 및 콘텐츠를 제어하는 일부 속성은 Visual Studio에서 사용자를 위해 설정할 수 있습니다.When you add a control using a design tool, some properties that control size, position, and content might be set for you by Visual Studio. 디자인 보기에서 컨트롤을 선택하고 조작하여 Width, Height, Margin 등의 속성을 변경할 수 있습니다.You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. 다음 그림에서는 디자인 보기에서 사용할 수 있는 몇 가지 크기 조정 도구를 보여 줍니다.This illustration shows some of the resizing tools available in Design view.

Visual Studio 디자이너의 크기 조정 도구

컨트롤의 크기와 위치가 자동으로 조정되기를 원할 수 있습니다.You might want to let the control be sized and positioned automatically. 이 경우 Visual Studio에서 사용자를 위해 설정한 크기 및 위치 속성을 다시 설정할 수 있습니다.In this case, you can reset the size and position properties that Visual Studio set for you.

속성을 다시 설정하려면To reset a property

  1. 속성 패널에서 속성 값 옆에 있는 속성 마커를 클릭합니다.In the Properties panel, click the property marker next to the property value. 속성 메뉴가 열립니다.The property menu opens.
  2. 속성 메뉴에서 다시 설정을 클릭합니다.In the property menu, click Reset.

Visual Studio 속성 초기화 메뉴 옵션

컨트롤 속성은 속성 창, XAML 또는 코드에서 설정할 수 있습니다.You can set control properties in the Properties window, in XAML, or in code. 예를 들어 Button의 전경색을 변경하려면 컨트롤의 Foreground 속성을 설정합니다.For example, to change the foreground color for a Button, you set the control's Foreground property. 다음 그림에서는 속성 창의 색 선택을 사용하여 Foreground 속성을 설정하는 방법을 보여 줍니다.This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Visual Studio 디자이너의 색 선택

XAML 편집기에서 Foreground 속성을 설정하는 방법은 다음과 같습니다.Here's how to set the Foreground property in the XAML editor. 여기에 표시된 Visual Studio IntelliSense 창은 구문 관련 도움말을 제공합니다.Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

XAML 1부의 Intellisense

XAML 2부의 Intellisense

Foreground 속성을 설정하면 XAML은 다음과 같이 됩니다.Here's the resulting XAML after you set the Foreground property.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

코드에서 Foreground 속성을 설정하는 방법은 다음과 같습니다.Here's how to set the Foreground property in code.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);
Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

이벤트 처리기 만들기Create an event handler

각 컨트롤에는 사용자의 동작이나 기타 앱 변경 사항에 응답할 수 있는 이벤트가 포함되어 있습니다.Each control has events that enable you to respond to actions from your user or other changes in your app. 예를 들어 Button 컨트롤에는 사용자가 Button을 클릭하면 발생하는 Click 이벤트가 있습니다.For example, a Button control has a Click event that is raised when a user clicks the Button. 이벤트를 처리하려면 이벤트 처리기라고 하는 메서드를 만듭니다.You create a method, called an event handler, to handle the event. XAML 또는 코드에서, 속성 창에서 컨트롤의 이벤트와 이벤트 처리기 메서드를 연결할 수 있습니다.You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. 이벤트에 대한 자세한 내용은 이벤트 및 라우트된 이벤트 개요를 참조하세요.For more info about events, see Events and routed events overview.

이벤트 처리기를 만들려면 컨트롤을 선택하고 속성 창의 맨 위에 있는 이벤트 탭을 클릭합니다.To create an event handler, select the control and then click the Events tab at the top of the Properties window. 속성 창에는 해당 컨트롤에 사용할 수 있는 모든 이벤트가 나열됩니다.The Properties window lists all of the events available for that control. Button에 대한 몇 가지 이벤트는 다음과 같습니다.Here are some of the events for a Button.

Visual Studio 이벤트 목록

기본 이름으로 이벤트 처리기를 만들려면 속성 창에서 이벤트 이름 옆에 있는 입력란을 두 번 클릭합니다.To create an event handler with the default name, double-click the text box next to the event name in the Properties window. 사용자 지정 이름으로 이벤트 처리기를 만들려면 입력란에 원하는 이름을 입력하고 <Enter> 키를 누릅니다.To create an event handler with a custom name, type the name of your choice into the text box and press enter. 이벤트 처리기가 만들어지고 코드 숨김 파일이 코드 편집기에서 열립니다.The event handler is created and the code-behind file is opened in the code editor. 이벤트 처리기 메서드에는 두 개의 매개 변수가 있습니다.The event handler method has 2 parameters. 첫 번째 매개 변수는 처리기가 연결된 개체에 대한 참조인 sender입니다.The first is sender, which is a reference to the object where the handler is attached. sender 매개 변수는 Object 유형입니다.The sender parameter is an Object type. sender 개체 자체에 대한 상태를 확인하거나 변경하려는 경우 일반적으로 sender를 보다 정확한 유형으로 캐스팅합니다.You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. 고유한 앱 디자인에 따라 처리기가 연결된 위치를 기준으로 sender를 캐스팅해도 괜찮은 형식을 기대할 수 있습니다.Based on your own app design, you expect a type that is safe to cast the sender to, based on where the handler is attached. 두 번째 값은 일반적으로 e 또는 args 매개 변수로 서명에 나타나는 이벤트 데이터입니다.The second value is event data, which generally appears in signatures as the e or args parameter.

Button1이라는 Button의 Click 이벤트를 처리하는 코드는 다음과 같습니다.Here's code that handles the Click event of a Button named Button1. 단추를 클릭하면 클릭한 Button의 Foreground 속성이 파란색으로 설정됩니다.When you click the button, the Foreground property of the Button you clicked is set to blue.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}
#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

또한 XAML에서 이벤트 처리기를 연결할 수 있습니다.You can also associate an event handler in XAML. XAML 편집기에서 처리할 이벤트의 이름을 입력합니다.In the XAML editor, type in the event name that you want to handle. 입력을 시작하면 Visual Studio에 IntelliSense 창이 표시됩니다.Visual Studio shows an IntelliSense window when you begin typing. 이벤트를 지정한 후 IntelliSense 창에서 <New Event Handler>를 두 번 클릭하여 기본 이름으로 새 이벤트 처리기를 만들거나 목록에서 기존 이벤트 처리기를 선택할 수 있습니다.After you specify the event, you can double-click <New Event Handler> in the IntelliSense window to create a new event handler with the default name, or select an existing event handler from the list.

표시되는 IntelliSense 창은 다음과 같습니다.Here's the IntelliSense window that appears. 새 이벤트 처리기를 만들거나 기존 이벤트 처리기를 선택하는 데 도움이 됩니다.It helps you create a new event handler or select an existing event handler.

Click 이벤트에 대한 Intellisense

이 예에서는 XAML에서 Click 이벤트와 Button_Click이라는 이벤트 처리기를 연결하는 방법을 보여 줍니다.This example shows how to associate a Click event with an event handler named Button_Click in XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

또한 코드 숨김 파일을 사용하여 이벤트를 해당 이벤트 처리기와 연결할 수도 있습니다.You can also associate an event with its event handler in the code-behind. 코드에서 이벤트 처리기를 연결하는 방법은 다음과 같습니다.Here's how to associate an event handler in code.

Button1.Click += new RoutedEventHandler(Button_Click);
Button1().Click({ this, &MainPage::Button1_Click });