[XAMARIN] Button 이벤트

윈폼을 할때 제일 먼저했던건 레이블이였고, 두번째는 버튼이였던거 같다. 이 둘만으로도 프로그램을 만들수 있고 UI만 고려하지 않는다면 나는 이 둘만 사용하고 싶다. 그만큼 사랑하는(?) 컴포넌트 들이다.

1. Button 이벤트 등록 및 처리 방법

Button이벤트를 처기하는 방법은 메서드 방식으로 처리하는 방법과 람다식으로 처리하는 방법이 있다. 관리적 측면에서 본다면 메서드 방식으로 하는게 더 유리하다. 뭐...개인취향이기 때문에 알아서 선택하도록 하자!

Debug.WriteLine() 요거는 윈폼할때도 많이 썼는데(주로 현재 상태 디버깅용) XAMARIN에서도 사용가능하다. 이거 너무 좋다^^*

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:BtnEvent" x:Class="BtnEvent.MainPage">
    <StackLayout>
        <!-- Place new controls here -->
        <Button x:Name="btn01" Text="버튼1" VerticalOptions="FillAndExpand" />
        <Button x:Name="btn02" Text="버튼2" VerticalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace BtnEvent
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(true)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            // 메서드식 이벤트 처리(관리하기엔 이게 더 좋음)
            btn01.Clicked += Btn01_Clicked;

            // 람다식 이벤트 처리
            btn02.Clicked += (sender, e) =>
            {
                DisplayAlert("버튼2", "버튼2가 눌러졌습니다.", "확인");

            };
        }

        void Btn01_Clicked(object sender, EventArgs e)
        {
            //sender : 이벤트를 발생 시킨 개체…
            //여기서 sender == btn01
            //e : 기타정보

            Debug.WriteLine("버튼1이 눌러졌습니다.");
        }

    }
}

 

2. 현재 시간을 기록하는 앱 만들기

이제 버튼 이벤트를 배웠으니 한가지 간단한 앱을 만들어 보자. 버튼을 누르면 현재 시간을 찍어주는 앱을 만들어 보겠다. Button 이벤트를 등록하고 클릭할때마다 lable이 추가하는 형태로 코딩되어 있다. 스톱워치 기능 구현할때 이와 같이 구현하면 되겠다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BtnEvent.MyPage1">
    <StackLayout x:Name="stl">
        <Button x:Name="btn01" Text="현재시간" />
           
    </StackLayout>
</ContentPage>

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace BtnEvent
{
    public partial class MyPage1 : ContentPage
    {
        public MyPage1()
        {
            InitializeComponent();

            this.btn01.Clicked += (sender, e) =>
            {
                Label lbTime = new Label(); 
                lbTime.Text = DateTime.Now.ToString("HH:mm:ss");

                stl.Children.Add(lbTime);
            };

        }
    }
}

3. Button Property

2번에서 했던 예제에서 계속 진행하겠다. Property라고 Button의 속성을 한번 설정해볼껀데. 주요 속성은 아래와 같다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BtnEvent.MyPage1">
    <StackLayout x:Name="stl">
        <Button x:Name="btn01" 
                Text="현재시간" // 버튼 텍스트
                FontSize="20" // 글자 크기
                FontAttributes="Bold" // 글자 굵게
                TextColor="Blue" // 글자색
                BorderColor="Lime" // 테두리 색
                BorderWidth="5" // 테두리 두께
                BorderRadius="30" // 테두리 둥근 정도
                BackgroundColor="Yellow" // 버튼 배경색
                WidthRequest="60" // 버튼 가로 크기
                HeightRequest="60" // 버튼 세로 크기
                />
    </StackLayout>
</ContentPage>

 

4. 이벤트 핸들러의 공유

각각의 버튼마다 이벤트 핸들러를 가지고 있으면 중복되는 코드도 많고 헷갈리기도 하고 그럴수 있다. 그래서 한개의 이벤트 핸들러에 여러개의 버튼을 묶어서 사용하는 방법을 '이벤트 핸들러의 공유'라고 한다.  아까 3번 코드에 추가해서 사용하겠다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BtnEvent.MyPage1">
    <StackLayout>
        <StackLayout>
            <Button x:Name="btn01" 
                Text="시간 추가" 
                FontSize="20"
                FontAttributes="Bold"
                TextColor="Blue"
                BorderColor="Lime"
                BorderWidth="5"
                BorderRadius="30"
                BackgroundColor="Yellow"
                WidthRequest="60"
                HeightRequest="60"
                StyleId="timeAdd"
                />
        
        <Button x:Name="btn02" 
                Text="시간 삭제" 
                FontSize="20"
                FontAttributes="Bold"
                TextColor="Blue"
                BorderColor="Lime"
                BorderWidth="5"
                BorderRadius="30"
                BackgroundColor="Yellow"
                WidthRequest="60"
                HeightRequest="60"
                StyleId="timeRemove"
                />
        </StackLayout>
        <StackLayout x:Name="stl" >
            
        </StackLayout>
        
    </StackLayout>
</ContentPage>

 

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace BtnEvent
{
    public partial class MyPage1 : ContentPage
    {
        public MyPage1()
        {
            InitializeComponent();

            // 버튼 이벤트를 같은걸로 씀
            this.btn01.Clicked += Btn_Clicked;
            this.btn02.Clicked += Btn_Clicked;

        }

        void Btn_Clicked(object sender, EventArgs e)
        {
            if((sender as Button).StyleId == "timeAdd")
            {
                Label lbTime = new Label();
                lbTime.Text = DateTime.Now.ToString("HH:mm:ss");

                stl.Children.Add(lbTime);
                btn02.IsEnabled = true;

            }
            else if((sender as Button).StyleId == "timeRemove")
            {
                stl.Children.RemoveAt(0);

                if(stl.Children.Count == 0)
                {
                    btn02.IsEnabled = false;
                }
            }
        }

    }
}