UWP XAML <Button/> 버튼 컨트롤 사용 방법 이벤트와 화면에 메세지 표시하기

UWP 의 버튼은 xaml 의 <Button/> 컨트롤을 사용할 수 있다. 기본적인 속성은 Name, Content, Click 속성을 사용하여 버튼을 구성할 수 있다. Name 은 코드에서 버튼에 접근하기 위한 이름을 지정한다. Content 는 화면에 표시되는 버튼의 문자열을 지정한다. Click 은 버튼을 클릭했을 때 동작하는 코드를 작성한다.

UWP XAML <Button/> 버튼 컨트롤 사용 방법
이벤트와 화면에 메세지 표시하기

UWP 에서 버튼 컨트롤은 <Button/> 으로 사용된다.

버튼은 사용자들과 소통하는 기본적인 컨트롤이다.

버튼에서 사용되는 기본적인 속성은 Name, Content, Click 정도가 있다.

Name 은 버튼을 지정하는 이름, Content 은 버튼에 표시되는 문자열, Click 은 버튼을 클릭했을 때의 이벤트를 연결한다.

UWP 버튼 기본 구성 요소

UWP 에서 버튼을 사용하기 위해선 디자인 파일은 xaml 에서 <Button/> 컨트롤을 이용할 수 있다.

버튼은 UWP 에서 사용자가 마우스로 클릭했을 때 어떠한 반응을 하는 기본적인 소통방식이다.

xaml 파일에서 <Button/> 컨트롤을 추가하여 화면에 버튼을 표시하며 기본적으로 사용되는 속성은 Name, Content, Click 을 사용할 수 있다.

아래는 xaml 에서 <Button/> 컨트롤을 사용하는 방법이다.

<Button Name="버튼명"
	Content="화면에 표시되는 문자열"
	Click="버튼_이벤트">
</Button>

Click 이벤트가 지정되었다면 xaml.cs 파일에 버튼 클릭 이벤트에 대한 메서드를 작성해 주어야 한다.

/** 버튼 클릭 이벤트 */
private void 버튼이벤트(object sender, RoutedEventArgs e)
{
	// 코드
}

전체 코드

위의 내용을 이용하여 UWP 의 화면에 버튼을 하나 만들고 C# 코드로 이벤트를 등록한다.

버튼을 클릭하면 간단하고 심플한 메세지창이 나오도록 할 것이다.

화면을 표현하는 xaml 에는 <Button/> 컨트롤을 추가할 것이다.

동작을 구현하는 xaml.cs 에는 버튼의 이벤트 메서드를 추가하여 연결할 것이다.

XAML 화면 파일

버튼 컨트롤인 <Button/> 을 화면에 추가하고, Name, Content, Click 속성을 지정하였다.

• Name
  소스코드에서 컨트롤을 지정하는 이름을 작성한다.
• Content
  화면에 표시될 버튼에 나타날 문자열을 작성한다.
• Click
  버튼을 클릭했을 때 프로그램이 어떠한 동작을 하도록 이벤트 메서드를 연결한다.

<Page
    x:Class="UWPAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button Name="buttonSample" Content="버튼" Click="buttonSample_Click">
        </Button>
    </Grid>
</Page>

xaml.cs 코드 파일

C# 코드를 이용하여 프로그램의 동작을 구현한다.

xaml 에 추가한 버튼의 Click 이벤트에 지정한 이벤트 메서드를 추가하고 메세지박스가 화면에 표시되도록 한다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace UWPAppTutorials
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            /** 윈도우 크기 초기화 */
            InitSetWindowsSize();
        }

        /** 윈도우 크기 초기화 */
        void InitSetWindowsSize()
        {
            double width = 480;
            double height = 320;
            ApplicationView.GetForCurrentView().SetPreferredMinSize(new Size(width, height));
        }

        /** 버튼 클릭 이벤트 */
        private void buttonSample_Click(object sender, RoutedEventArgs e)
        {
            ShowMessageDialog("버튼을 클릭했습니다.");
        }

        /** MessageDialog 화면에 표시하기 */
        async void ShowMessageDialog(string content)
        {
            var dialog = new MessageDialog(content);
            await dialog.ShowAsync();
        }
    }
}

xaml 에 버튼 컨트롤인 <Button/> 을 추가하고 Name, Content, Click 속성을 추가하였다.

화면에 메세지창을 표시하기 위해 MessageDialog() 메서드를 사용했다.

코드 작성을 완료했다면 단축키 F5 를 클릭하여 실행화면을 확인한다.

화면에 나타난 버튼을 클릭하면 메세지창이 나타난다.

메세지창의 닫기 버튼을 클릭하면 창이 닫히는 것을 확인할 수 있다.