Xamarin.Forms 단추 자습서

아티클
Developer (초급)
완료하는 데 7분 걸림

이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.

첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
StackLayout 자습서

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

XAML에서 Xamarin.FormsButton을 만듭니다.
눌러진 Button에 응답합니다.
Button의 모양을 변경합니다.

Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 Button을 사용자 지정하는 방법을 보여 주는 간단한 애플리케이션을 만들겠습니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.

또한 Xamarin.Forms용 XAML 핫 다시 로드를 사용하여 애플리케이션을 다시 빌드하지 않고 UI 변경 내용을 확인할 수 있습니다.

단추 만들기

6분 남음

Visual Studio
Mac용 Visual Studio

이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.

Visual Studio를 실행하고, ButtonTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각에서 솔루션의 이름이 ButtonTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
솔루션 탐색기의 ButtonTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
<?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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Button으로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Button.Text 속성은 Button에 나타나는 텍스트를 지정합니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

기본적으로 Button은 허용된 모든 공간의 전체 너비를 차지하는 경향이 있습니다(이 경우 해당 부모(StackLayout)의 전체 너비).

Visual Studio에서 애플리케이션을 중지합니다.

이 자습서를 완료하려면 iOS 및 Android 플랫폼 지원이 설치된 Mac용 Visual Studio(최신 릴리스)가 있어야 합니다. 또한 Xcode(최신 릴리스)도 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요.

Mac용 Visual Studio를 실행하고, ButtonTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각에서 솔루션의 이름이 ButtonTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
Solution Pad의 ButtonTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml에서 템플릿 코드를 모두 제거하고 다음 코드로 바꿉니다.
```
<?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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Button으로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Button.Text 속성은 Button에 나타나는 텍스트를 지정합니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

기본적으로 Button은 허용된 모든 공간의 전체 너비를 차지하는 경향이 있습니다(이 경우 해당 부모(StackLayout)의 전체 너비).

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

클릭 처리

4분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 Button 선언을 수정하여 Clicked 이벤트에 대한 처리기를 설정합니다.
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
이 코드는 Clicked 이벤트를 다음 단계에서 만들 OnButtonClicked라는 이벤트 처리기로 설정합니다.
솔루션 탐색기의 ButtonTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnButtonClicked 처리기를 클래스에 추가합니다.
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Button을 탭하면 OnButtonClicked 메서드가 실행됩니다. sender 인수는 Clicked 이벤트의 실행을 담당하는 Button 개체이며 Button 개체에 액세스하는 데 사용될 수 있습니다. 이 이벤트 처리기는 Button에 표시된 텍스트를 업데이트합니다.

참고 항목

Clicked 이벤트 외에도 Button은 Pressed 및 Released 이벤트도 정의합니다. 자세한 내용은 Xamarin.Forms 단추 가이드에서 단추 눌렀다 놓기를 참조하세요.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button을 클릭하고 표시되는 텍스트가 변경되었음을 확인합니다.

단추 클릭 처리에 관한 자세한 내용은 Xamarin.Forms 단추 가이드에서 단추 클릭 처리를 참조하세요.

MainPage.xaml에서 Button 선언을 수정하여 Clicked 이벤트에 대한 처리기를 설정합니다.
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
이 코드는 Clicked 이벤트를 다음 단계에서 만들 OnButtonClicked라는 이벤트 처리기로 설정합니다.
Solution Pad의 ButtonTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnButtonClicked 처리기를 클래스에 추가합니다.
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Button을 탭하면 OnButtonClicked 메서드가 실행됩니다. sender 인수는 Clicked 이벤트의 실행을 담당하는 Button 개체이며 Button 개체에 액세스하는 데 사용될 수 있습니다. 이 이벤트 처리기는 Button에 표시된 텍스트를 업데이트합니다.

참고 항목

Clicked 이벤트 외에도 Button은 Pressed 및 Released 이벤트도 정의합니다. 자세한 내용은 Xamarin.Forms 단추 가이드에서 단추 눌렀다 놓기를 참조하세요.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button을 클릭하고 표시되는 텍스트가 변경되었음을 확인합니다.

단추 클릭 처리에 관한 자세한 내용은 Xamarin.Forms 단추 가이드에서 단추 클릭 처리를 참조하세요.

모양 변경

2분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 Button 선언을 수정하여 해당 시각적 개체 모양을 변경합니다.
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
이 코드는 Button의 시각적 개체 모양을 변경하는 속성을 설정합니다. TextColor 속성은 Button 텍스트 색을 설정하고, BackgroundColor 속성은 텍스트의 배경색을 설정합니다. BorderColor 속성은 Button 주위의 영역 색을 설정하고, BorderWidth 속성은 테두리의 너비를 설정합니다. 기본적으로 Button은 직사각형이지만 CornerRadius 속성을 적절한 값으로 설정하여 둥근 모서리를 만들 수 있습니다. 또한 해당하는 WidthRequest 및 HeightRequest 속성을 설정하여 Button의 크기를 변경합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button 모양이 변경되었음을 확인합니다.

Visual Studio에서 애플리케이션을 중지합니다.

Button 모양 설정에 관한 자세한 내용은 Xamarin.Forms 단추 가이드의 단추 모양을 참조하세요.

MainPage.xaml에서 Button 선언을 수정하여 해당 시각적 개체 모양을 변경합니다.
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
이 코드는 Button의 시각적 개체 모양을 변경하는 속성을 설정합니다. TextColor 속성은 Button 텍스트 색을 설정하고, BackgroundColor 속성은 텍스트의 배경색을 설정합니다. BorderColor 속성은 Button 주위의 영역 색을 설정하고, BorderWidth 속성은 테두리의 너비를 설정합니다. 기본적으로 Button은 직사각형이지만 CornerRadius 속성을 적절한 값으로 설정하여 둥근 모서리를 만들 수 있습니다. 또한 해당하는 WidthRequest 및 HeightRequest 속성을 설정하여 Button의 크기를 변경합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Button 모양이 변경되었음을 확인합니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

Button 모양 설정에 관한 자세한 내용은 Xamarin.Forms 단추 가이드의 단추 모양을 참조하세요.

Xamarin.Forms 단추 자습서

단추 만들기

클릭 처리

모양 변경

축하합니다!

다음 단계

관련 링크