컨트롤 및 패턴 소개

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

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

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

대부분의 경우 컨트롤을 있는 그대로 사용할 수 있습니다. 그러나 XAML 컨트롤은 구조 및 모양과 별도의 함수를 제어하므로 필요에 맞게 다양한 수준의 수정을 수행할 수 있습니다. 스타일 섹션에서는 XAML 스타일 및 컨트롤 템플릿을 사용하여 컨트롤을 수정하는 방법을 알아볼 수 있습니다.

이 섹션에서는 앱 UI를 빌드하는 데 사용할 수 있는 각 XAML 컨트롤에 대한 지침을 제공합니다. 시작하려면 이 문서에서는 앱에 컨트롤을 추가하는 방법을 보여 줍니다. 앱에 컨트롤을 사용하는 세 가지 주요 단계가 있습니다.

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

컨트롤 추가

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

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

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

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 편집기에서 포그라운드 속성을 설정하는 방법은 다음과 같습니다. 구문에 도움이 되도록 Visual Studio IntelliSense 창이 열립니다.

포그라운드 속성을 설정한 후의 결과 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 키를 누릅니다. 이벤트 처리기가 만들어지고 코드 숨김 파일이 코드 편집기에서 열립니다. 이벤트 처리기 메서드에는 2개 매개 변수가 있습니다. 첫 번째는 sender으로, 이는 핸들러가 연결된 객체에 대한 참조입니다. sender 매개 변수가 Object 형식입니다. 객체 자체의 상태를 확인하거나 변경하려는 경우 주로 sender 객체를 보다 정확한 형식으로 sender 캐스팅합니다. 사용자 고유의 앱 디자인에 따라 처리기가 연결된 위치에 기반하여 sender을(를) 형 변환하기에 안전하다고 예상되는 형식을 기대합니다. 두 번째 값은 일반적으로 서명에는 e 또는 args 매개 변수로 나타나는 이벤트 데이터입니다.

다음은 단추의 Click 이벤트를 처리하는 코드입니다 Button1. 단추를 클릭하면 클릭한 단추의 전경 속성이 파란색으로 설정됩니다.

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 창이 표시됩니다. 이벤트를 지정한 후 IntelliSense 창을 두 번 클릭하여 <New Event Handler> 기본 이름으로 새 이벤트 처리기를 만들거나 목록에서 기존 이벤트 처리기를 선택할 수 있습니다.

표시되는 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 네임스페이스
• 레이아웃
• 스타일
• 유용성