내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

빠른 시작: Windows Phone 8의 컨트롤 추가 및 이벤트 처리

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

버튼, 텍스트 상자 및 드롭다운 목록과 같은 컨트롤을 사용하여 Windows Phone 앱에 적합한 UI를 만들 수 있습니다. 컨트롤로 작업을 할 때에는 보통 다음 패턴을 사용합니다.

  • 컨트롤을 앱 UI에 추가합니다.

  • 너비, 높이 또는 전경색과 같은 속성을 설정합니다.

  • 컨트롤이 특정 작업이나 기능을 수행하도록 컨트롤의 이벤트 처리기에 일부 코드를 할당합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

몇 가지 방법으로 컨트롤을 Windows Phone 앱에 추가할 수 있습니다.

  • Visual Studio의 도구 상자에서 컨트롤을 추가합니다.

  • XAML 뷰에서 컨트롤을 추가합니다.

  • 코드에 컨트롤을 추가합니다.

다음 그림에서는 Visual Studio 를 사용하여 Windows Phone 을 만드는 것을 보여 줍니다. 앱의 컨트롤을 추가 및 조작할 때 도구 상자, 디자인 보기, XAML 뷰 및 속성 창을 포함하여 Visual Studio 의 많은 기능을 사용할 수 있습니다.

Using Controls - Designer

Visual Studio 도구 상자에는 앱에서 사용할 수 있는 컨트롤이 많이 표시됩니다. 다음 그림에서는 도구 상자에 있는 일부 Windows Phone 컨트롤을 보여 줍니다.

UsingControls - Toolbox
팁팁:

Windows Phone Toolkit 에는 휴대폰 개발을 위한 컨트롤이 추가적으로 들어 있습니다. 도구 키트에는 다양한 개발 단계에 있는 컨트롤들이 들어 있습니다. 이 컨트롤들이 완성됨에 따라 도구 상자의 일부 컨트롤은 런타임으로 이동되고, 일부 컨트롤은 완전히 제거됩니다.

컨트롤을 앱에 추가하려면 도구 상자에서 두 번 클릭합니다. 컨트롤을 디자인 보기로 끌 수도 있습니다. TextBox 컨트롤을 두 번 클릭하면 다음 XAML이 XAML 뷰에 추가됩니다.

<TextBox x:Name="MyTB" HorizontalAlignment="Left" Height="72" Margin="10,10,0,0" 
    Text="TextBox" VerticalAlignment="Top" Width="460" />

코드에서 컨트롤 관련 작업을 하려면 해당 이름을 참조합니다. 각 컨트롤에는 고유한 이름이 있으며 Name 속성을 설정하여 컨트롤의 이름을 변경할 수 있습니다. 이름은 Visual Studio 속성 창이나 XAML에서 설정할 수 있습니다. 다음 그림에서는 속성 창의 상단에서 이름 텍스트 상자를 사용하여 현재 선택한 컨트롤의 이름을 변경하는 방법을 보여 줍니다.

UsingControls - Properties Window Name

다음 그림에서는 어떻게 Name 특성을 변경하여 XAML 뷰에서 컨트롤 이름을 변경할 수 있는지를 보여 줍니다.

UsingControls - XAML lName

속성을 사용하여 컨트롤의 모양, 콘텐츠 또는 다른 특성을 지정합니다. 컨트롤 이름과 마찬가지로 컨트롤 속성은 속성 창, XAML 또는 코드에서 설정할 수 있습니다. TextBox의 전경색을 변경하려면 컨트롤의 Foreground 속성을 설정합니다. 다음 그림에서는 속성 창을 사용하여 Foreground 속성을 설정하는 방법을 보여 줍니다.

UsingControls - Properties Window Foreground

다음 그림에서는 XAML에서 Foreground 속성을 설정하는 방법을 보여 줍니다. 구문과 관련하여 지원하기 위해 열리는 Visual Studio IntelliSense 창을 볼 수 있습니다.

UsingControls - XAML Foreground

다음은 Foreground 속성을 설정한 후의 결과 XAML을 보여 줍니다.

<TextBox x:Name="MyTB" HorizontalAlignment="Left" Height="72" Margin="10,10,0,0" 
    Text="TextBox" VerticalAlignment="Top" Width="460"
    Foreground="Red" />

다음 예제에서는 코드에서 Foreground 속성을 설정하는 방법을 보여 줍니다.

SolidColorBrush scb = new SolidColorBrush(Colors.Red);
MyTB.Foreground = scb;

Width, HeightMargin과 같은 일부 속성은 디자인 보기에서 컨트롤을 선택하고 조작하여 간단히 변경할 수 있습니다. 다음 그림에서는 디자인 보기에서 사용할 수 있는 크기 조정 도구 중 일부를 보여 줍니다.

UsingControls - Resize

각 컨트롤에는 사용자의 작업에 응답할 수 있도록 하는 이벤트가 있습니다. 예를 들어 Button 컨트롤에는 Button을 클릭하면 발생하는 Click 이벤트가 들어 있습니다. 이벤트 처리기라는 메서드를 만들어 이 이벤트를 처리합니다. 속성 창 또는 XAML에서 이벤트 처리기를 만들 수 있으며, 이벤트 처리기를 코드를 사용하여 수동으로 만들 수도 있습니다.

속성창의 이벤트 탭을 사용하여 이벤트 처리기를 만들 수 있습니다. 이벤트 처리기를 만들려면 컨트롤을 선택한 다음 속성창 상단의 이벤트 탭을 클릭합니다. 속성창에 해당 컨트롤에 사용할 수 있는 이벤트가 모두 표시됩니다. 다음 그림에는 TextBox에 대한 이벤트 일부가 나와 있습니다.

Using Controls - Events Tab

이벤트 처리기를 만들려면 속성 창에서 이벤트 이름을 지정합니다. 이벤트 처리기가 만들어지고 코드 숨김 파일이 코드 편집기에 열립니다. 다음 코드 예제에서는 MyTB라는 TextBox에 대한 TextChanged 이벤트에 사용할 이벤트 처리기를 보여 줍니다. TextBox의 텍스트를 변경하면, MyBlock이라는 TextBlockText 속성이 텍스트를 입력했습니다!로 변경됩니다.

private void MyTB_TextChanged(object sender, TextChangedEventArgs e)
{
    MyBlock.Text = "You entered text!";
}

이벤트 처리기를 XAML에서 만들 수도 있습니다. XAML 뷰에서 처리할 이벤트 이름을 입력합니다. 입력을 시작하면 XAML 뷰에 IntelliSense 창이 표시됩니다. 다음 그림에서는 XAML에서 TextChanged 이벤트를 지정하는 방법을 보여 줍니다.

UsingControls - XAML TextChanged

이벤트를 지정했으면, 표시된 IntelliSense 창에서 <새 이벤트 처리기>를 두 번 클릭하여 기본 이름을 갖는 새 이벤트 처리기를 만들 수 있습니다. 다음 그림에서는 새 이벤트 처리기 작성을 돕기 위해 표시되는 IntelliSense 창을 보여 줍니다.

UsingControls - XAML TextChanged EventHandler

다음 XAML에서는 TextChanged 이벤트가 MyTB_TextChanged라는 이벤트 처리기와 연결되어 있는 것을 보여 줍니다.

<TextBox x:Name="MyTB" TextChanged="MyTB_TextChanged" HorizontalAlignment="Left" Height="72"
    Margin="10,10,0,0" Text="TextBox" VerticalAlignment="Top" Width="260"
    Foreground"Red"
 />

이벤트를 코드 숨김에서 이벤트 처리기와 연결할 수도 있습니다. 다음 코드는 이 작업을 C#에서 수행하는 방법을 보여 줍니다.

MyTB.TextChanged +=new TextChangedEventHandler(MyTB_TextChanged);

표시:
© 2014 Microsoft