컨트롤 및 패턴 소개

Windows 앱 개발에서 컨트롤은 콘텐츠를 표시하거나 조작을 가능하게 하는 UI 요소입니다. 버튼, 텍스트 상자 및 콤보 상자와 같은 컨트롤을 사용하여 데이터를 표시하고 사용자 입력을 가져와 앱을 위한 UI를 만듭니다.

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

컨트롤을 수정하거나 여러 컨트롤을 결합하여 새로운 것을 만드는 방법을 패턴 이라고 합니다. 예를 들어 목록/세부 정보 패턴은 앱 탐색에 SplitView 컨트롤을 사용할 수 있는 방법입니다. 마찬가지로, NavigationView 컨트롤의 템플릿을 사용자 지정하여 탭 패턴을 구현할 수 있습니다.

컨트롤을 있는 그대로 사용할 수 있는 경우가 대부분입니다. 그러나 XAML 컨트롤은 구조 및 모양으로부터 함수를 분리하기 때문에, 필요에 맞게 다양한 수준으로 수정할 수 있습니다. 이 Style 섹션에서 알아볼 것은 XAML 스타일 및 컨트롤 템플릿을 사용하여 컨트롤을 수정하는 방법입니다.

이 섹션에서는 앱 UI를 빌드하는 데 사용할 수 있는 각 XAML 컨트롤에 대한 지침을 제공합니다. 가장 먼저, 이 문서에서는 앱에 컨트롤을 추가하는 방법을 보여 줍니다. 앱에 컨트롤을 사용하는 핵심 단계 3 가지는 다음과 같습니다.

• 앱 UI에 컨트롤 추가
• 컨트롤의 속성(예: 너비, 높이 또는 전경색)을 설정합니다.
• 컨트롤의 이벤트 처리기에 코드를 추가하여 작업을 수행합니다.

컨트롤 추가

다음과 같은 여러 가지 방법으로 앱에 컨트롤을 추가할 수 있습니다.

• Blend for Visual Studio 또는 Microsoft Visual Studio XAML(Extensible Application Markup Language) 디자이너와 같은 디자인 도구를 사용합니다.
• Visual Studio XAML 편집기에서 XAML 태그에 컨트롤을 추가합니다.
• 코드에 컨트롤을 추가합니다. 코드에 추가하는 컨트롤은 앱이 실행되면 표시되지만 Visual Studio XAML 디자이너에는 표시되지 않습니다.

앱에서 컨트롤을 추가하고 조작할 때, 도구 상자, XAML 디자이너, XAML 편집기 및 속성 창 포함하여 프로그램의 많은 기능을 Visual Studio에서 사용할 수 있습니다.

Visual Studio 도구 상자에서 앱에서 사용할 수 있는 컨트롤 상당수를 볼 수 있습니다. 앱에 컨트롤을 추가하려면 도구 상자에서 컨트롤을 더블클릭합니다. 예를 들어, TextBox 컨트롤을 더블클릭하면, XAML이 XAML 보기에 추가됩니다.

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

도구 상자에서 XAML 디자이너로 컨트롤을 드래그해 올 수도 있습니다.

컨트롤의 이름 설정

코드에서 컨트롤을 사용하려면 x:Name 속성을 설정하고 코드에서 이름으로 참조합니다. Visual Studio 속성 창 또는 XAML에서 이름을 설정할 수 있습니다. 속성 창 맨 위에 있는 이름 텍스트 상자를 사용하여 현재 선택한 컨트롤의 이름을 설정하는 방법은 다음과 같습니다.

컨트롤 이름 지정

1. 이름을 지정하는 요소를 선택합니다.
2. 속성 패널에서 이름 텍스트 상자에 이름을 입력합니다.
3. Enter 키를 눌러 이름을 커밋합니다.

x:Name 특성을 추가하여 XAML 편집기에서 컨트롤의 이름을 설정하는 방법은 다음과 같습니다.

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

컨트롤 속성 설정

속성을 사용하여 컨트롤의 모양, 콘텐츠 및 기타 속성을 지정합니다. 디자인 도구를 사용하여 컨트롤을 추가하는 경우, Visual Studio에서 크기, 위치 및 콘텐츠를 제어하는 일부 속성을 설정할 수 있습니다. 디자인 뷰에서 컨트롤을 선택하고 조작하여 너비, 높이 또는 여백과 같은 일부 속성을 변경할 수 있습니다. 디자인 뷰에서 사용할 수 있는 몇몇 크기 조정 도구를 이 그림에서 보여 줍니다.

컨트롤의 크기가 자동으로 조정되고 배치되기를 원할 수 있습니다. 이 경우, Visual Studio에서 설정한 크기 및 위치 속성을 다시 설정할 수 있습니다.

속성 재설정

1. 속성 패널에서 속성 값 옆의 속성 표식을 클릭합니다. 속성 메뉴가 열립니다.
2. 속성 메뉴에서 재설정을 클릭합니다.

속성 창, XAML 또는 코드에서 컨트롤 속성을 설정할 수 있습니다. 예를 들어, 버튼의 전경색을 변경하려면 컨트롤의 전경 속성을 설정합니다. 이 그림에서는 속성 창 색 선택기를 사용하여 전경 속성을 설정하는 방법을 보여 줍니다.

XAML 편집기에서 Foreground 속성을 설정하는 방법은 다음과 같습니다. 구문에 도움이 되도록 Visual Studio IntelliSense 창이 열립니다.

Foreground 속성을 설정한 후 그 결과로 나온 XAML은 다음과 같습니다.

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

코드에서 Foreground 속성을 설정하는 방법은 다음과 같습니다.

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

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

이벤트 처리기 만들기

각 컨트롤에는 사용자로부터 나온 작업 또는 앱의 다른 변경 내용에 응답할 수 있는 이벤트가 있습니다. 예를 들어 버튼 컨트롤에는 사용자가 버튼을 클릭하면 발생되는 Click 이벤트가 있습니다. 이벤트를 처리하는 이벤트 처리기라는 메서드를 만듭니다. 컨트롤의 이벤트를 속성 창, XAML 또는 코드에 있는 이벤트 처리기 메서드와 연결할 수 있습니다. 이벤트에 대한 자세한 내용은 이벤트 및 라우트된 이벤트 개요를 참조하세요.

이벤트 처리기를 만들려면, 컨트롤을 선택한 다음 속성 창 맨 위에 있는 이벤트 탭을 클릭합니다. 해당 컨트롤에 사용할 수 있는 모든 이벤트가 속성 창에 나열됩니다. 버튼에 대한 몇 가지 이벤트는 다음과 같습니다.

기본 이름을 사용하여 이벤트 처리기를 만들려면, 속성 창의 이벤트 이름 옆에 있는 입력란을 더블클릭합니다. 사용자 지정 이름을 사용하여 이벤트 처리기를 만들려면, 텍스트 상자에 원하는 이름을 입력하고 Enter 키를 누릅니다. 이벤트 처리기가 만들어지고 코드 숨김 파일이 코드 편집기에서 열립니다. 이벤트 처리기 메서드에는 매개 변수가 두 개 있습니다. 첫 번째는 sender로, 처리기가 결합된 객체에 대한 참조입니다. 이 sender 매개 변수는 객체 형식입니다. 일반적으로 sender 를 더 정확한 형식으로 캐스팅하는 경우는 sender 객체 자체의 상태를 검사하거나 변경해야 하는 경우입니다. 사용자 고유의 앱 디자인에 따라, 처리기가 결합된 위치에 따라 sender 을 캐스팅하기에 안전한 형식이 필요합니다. 두 번째 값은 이벤트 데이터로, 주로 시그니처에서 e 또는 args 매개 변수로 나타납니다.

다음은 Button1라고 명명된 버튼의 Click 이벤트를 처리하는 코드입니다. 버튼을 클릭하면, 클릭한 버튼의 Foreground 속성이 파란색으로 설정됩니다.

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에서 이벤트 처리기를 연결할 수도 있습니다. XAML 편집기에 처리할 이벤트 이름을 입력합니다. 입력을 시작하면 Visual Studio에 IntelliSense 창이 표시됩니다. 이벤트를 지정한 후, <New Event Handler> IntelliSense 창을 더블클릭하여 기본 이름으로 새 이벤트 처리기를 만들거나, 목록에서 기존 이벤트 처리기를 선택할 수 있습니다.

표시되는 IntelliSense 창은 다음과 같습니다. 이를 통해 손쉽게 새 이벤트 처리기를 만들거나 기존 이벤트 처리기를 선택할 수 있습니다.

XAML에서 Button_Click 이벤트 처리기와 Click 이벤트를 연결하는 방법을 이 예제에서 보여줍니다.

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

코드 숨김의 이벤트 처리기와 이벤트를 연결할 수도 있습니다. 코드에서 이벤트 처리기를 연결하는 방법은 다음과 같습니다.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

관련 항목

• 함수별 컨트롤 인덱스
• Windows.UI.Xaml.Controls 네임스페이스
• 레이아웃
• 스타일
• 유용성