빠른 시작: 컨트롤 추가 및 이벤트 처리
언어: HTML | XAML

빠른 시작: 컨트롤 추가 및 이벤트 처리(XAML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

단추, 입력란, 콤보 상자 등의 컨트롤을 사용하여 앱의 UI를 만듭니다. 여기서는 앱에 컨트롤을 추가하는 방법을 보여 줍니다. 다음은 컨트롤 작업을 할 때 일반적으로 사용하는 패턴입니다.

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

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

사전 요구 사항

Microsoft Visual Basic, C# 또는 C++ 및 XAML(Extensible Application Markup Language)을 사용하여 기본 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 방법에 대한 자세한 내용은 C# 또는 Visual Basic을 사용하여 첫 번째 Windows 스토어 앱 만들기 또는 C++를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

컨트롤 추가

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

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

각 컨트롤에 대한 설명서에는 XAML, 코드에서 또는 디자인 도구를 사용하여 컨트롤을 추가하는 방법을 설명하는 "방법" 항목이 포함되어 있습니다. 예를 들어 Button 컨트롤을 추가하려면 단추를 추가하는 방법을 참조하세요.

여기서는 Visual Studio를 디자인 도구로 사용하지만 동일한 작업과 그 이상을 Blend for Visual Studio에서 수행할 수 있습니다. 자세한 내용은 XAML 디자이너를 사용하여 UI 만들기를 참조하세요.

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

Visual Studio 도구 상자에는 앱에 사용할 수 있는 다양한 컨트롤이 표시됩니다. 앱에 컨트롤을 추가하려면 도구 상자에서 원하는 컨트롤을 두 번 클릭합니다. 예를 들어 TextBox 컨트롤을 두 번 클릭하면 XAML 보기에 이 XAML이 추가됩니다.


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

또한 도구 상자에서 XAML 디자이너로 컨트롤을 끌 수 있습니다.

컨트롤 이름 설정

코드에서 컨트롤 작업을 하려면 해당 x:Name 특성을 설정하고 이름으로 컨트롤을 참조합니다. 컨트롤 이름은 Visual Studio 속성 창이나 XAML에서 설정할 수 있습니다. 속성 창의 맨 위에 있는 이름 입력란을 사용하여 현재 선택한 컨트롤의 이름을 변경하는 방법은 다음과 같습니다.

Hh465336.wedge(ko-kr,WIN.10).gif컨트롤의 이름을 지정하려면

  1. 이름을 지정할 요소를 선택합니다.
  2. 속성 패널의 Name 입력란에 이름을 입력합니다.
  3. Enter 키를 눌러 이름을 커밋합니다.
디자이너에서 이름 설정

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


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

컨트롤 속성 설정

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

디자이너의 TextBlox

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

Hh465336.wedge(ko-kr,WIN.10).gif속성을 다시 설정하려면

  1. 속성 패널에서 속성 값 옆에 있는 속성 마커를 클릭합니다. 속성 메뉴가 열립니다.
  2. 속성 메뉴에서 다시 설정을 클릭합니다.

    속성 메뉴

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

디자이너에서 전경 설정

XAML 편집기에서 Foreground 속성을 설정하는 방법은 다음과 같습니다. 여기에 표시된 Visual Studio IntelliSense 창은 구문 관련 도움말을 제공합니다.

XAML에서 전경 설정

XAML에서 전경 설정

Foreground 속성을 설정하면 XAML은 다음과 같이 됩니다.


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

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


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

이벤트 처리기 만들기

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

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

TextBox 이벤트

기본 이름으로 이벤트 처리기를 만들려면 속성 창에서 이벤트 이름 옆에 있는 입력란을 두 번 클릭합니다. 사용자 지정 이름으로 이벤트 처리기를 만들려면 입력란에 원하는 이름을 입력하고 <Enter> 키를 누릅니다. 이벤트 처리기가 만들어지고 코드 숨김 파일이 코드 편집기에서 열립니다. 이벤트 처리기 메서드에는 두 개의 매개 변수가 있습니다. 첫 번째 매개 변수는 처리기가 연결된 개체에 대한 참조인 sender입니다. sender 매개 변수는 Object 유형입니다. sender 개체 자체에 대한 상태를 확인하거나 변경하려는 경우 일반적으로 sender를 보다 정확한 유형으로 캐스팅합니다. 고유한 앱 디자인에 따라, 처리기가 연결된 위치를 기준으로 sender를 캐스팅해도 괜찮은 형식을 기대할 수 있습니다. 두 번째 값은 일반적으로 e 매개 변수로 서명에 나타나는 이벤트 데이터입니다.

Button1이라는 ButtonClick 이벤트를 처리하는 코드는 다음과 같습니다. 단추를 클릭하면 클릭한 ButtonForeground 속성이 파란색으로 설정됩니다.


private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

또한 XAML에서 이벤트 처리기를 연결할 수 있습니다. XAML 편집기에서 처리할 이벤트의 이름을 입력합니다. 입력을 시작하면 Visual Studio에 IntelliSense 창이 표시됩니다. 이벤트를 지정한 후 IntelliSense 창에서 <새 이벤트 처리기>를 두 번 클릭하여 기본 이름으로 새 이벤트 처리기를 만들거나 목록에서 기존 이벤트 처리기를 선택할 수 있습니다. 다음은 새 이벤트 처리기를 만드는 데 도움이 되는 IntelliSense 창입니다.

TextChanged 이벤트 처리기 만들기

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


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

또한 코드 숨김 파일을 사용하여 이벤트를 해당 이벤트 처리기와 연결할 수도 있습니다. 코드에서 이벤트 처리기를 연결하는 방법은 다음과 같습니다.


Button1.Click += new RoutedEventHandler(Button_Click);

새 컨트롤

다른 XAML 플랫폼을 사용하는 경우 Windows 8에 새로 추가된 이러한 컨트롤에 관심을 가질 수 있습니다.

이러한 컨트롤과 컨트롤 목록에 있는 기타 컨트롤에 대해 자세히 알아볼 수 있습니다.

다음 작업

앱에 컨트롤을 추가하고, 컨트롤 속성을 설정하고, 이벤트 처리기를 만드는 방법에 대해 배웠으므로 이제 컨트롤 목록이나 기능별 컨트롤을 통해 사용 가능한 컨트롤에 대해 자세히 알아보겠습니다. 기본 컨트롤 샘플을 다운로드해도 다양한 Windows UI 컨트롤을 볼 수 있습니다.

관련 항목

이벤트 및 라우트된 이벤트 개요
컨트롤 목록
XAML 디자이너를 사용하여 UI 만들기
C#, C++ 또는 VB를 사용한 앱을 만들기 위한 로드맵

 

 

표시:
© 2017 Microsoft