본문 바로가기
programming/UWP

uwp 버튼과 클릭 이벤트 사용하기 Xaml Button Control and Click Event

by 개코 - 개발과 코딩 2021. 3. 29.

버튼은 모든 프로그램에서 사용된다. 사용자가 프로그램에 어떤 동작을 발생시키기 위해 필요하다. 프로그램을 만드는 과정에서도 버튼의 사용은 유용하다. 버튼의 목적은 주로 어떤 동작을 하기 위해 추가되며, 메세지창은 버튼 테스트를 위해 함께 사용되기도 한다.

uwp 버튼과 클릭 이벤트 사용하기
Xaml Button Control and Click Event

버튼을 화면에 올리기

버튼을 uwp 화면에 올리는 방법은 컨트롤 항목에서 마우스를 드래그 하는 것으로써 간단히 할 수 있다.

  1. 컨트롤 항목에서 버튼을 선택한다.
  2. 마우스로 드래그하여 화면에 붙인다.
  3. 화면에 붙은 버튼을 확인할 수 있으며, 프로젝트를 컴파일, 실행하면 버튼이 붙은 화면을 볼 수 있다.

화면에 버튼 올리기
화면에 버튼 올리기

버튼에 클릭이벤트 붙이기

화면에 올라간 버튼을 클릭하면 속성창을 볼 수 있다.

속성창의 번개모양 버튼을 클릭하면 이벤트를 설정할 수 있다.

C#과 마찬가지도 uwp에는 click 이벤트가 존재한다.

명명규칙은 아무거나 해도 상관없지만, 기본명명은 컨트롤의 name_이벤트명 으로 설정된다.

  1. 버튼을 클릭한다.
  2. 속성창에서 이벤트 처리기 ( 번개모양 )를 선택한다.
  3. 버튼 부분을 더블클릭한다.
  4. 이벤트가 자동으로 설정된 것을 알 수 있다.
  5. 코드는 아래와 같다.
<!-- XAML -->
<Grid>
	<Button Content="Button" Margin="20,20,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>
/**
 * C# 비하인드 코드
 */
private void Button_Click(object sender, RoutedEventArgs e)
{

}

html에 이벤트처리기를 붙이는 것과 비슷해 보인다.

버튼을 붙이는 과정은 winform 과 매우 흡사하다.

메세지창 연결하기

메시지창은 사용자에 뭔가 작업이 완료되었을 때 결과를 알려주는 역할을 한다.

여기서는 메세지창을 띄우면서 짧은 메세지를 보여주도록 한다.

위에서 만든 버튼 이벤트에 코드를 추가한다.

기존의 C# winform 과 다른 점이 있다면 클릭이벤트 메서드에 async 가 붙어 있다.

메세지창을 실행하는 부분에는 await 가 붙어있다.

uwp의 특징은 뭔가 동작이 일어나는 부분들에 대해 비동기방식을 선호하는 경향이 크다.

 

private async void Button_Click(object sender, RoutedEventArgs e)
{
	var vMessageDialog = new MessageDialog("버튼을 눌렀습니다.", "메세지창 제목");
	await vMessageDialog.ShowAsync();
}

버튼 클릭 후 메세지창 표시
버튼 클릭 후 메세지창 표시

반응형

댓글