버튼
.NET 다중 플랫폼 앱 UI(.NET MAUI) Button 는 텍스트를 표시하고 앱이 작업을 수행하도록 지시하는 탭 또는 클릭에 응답합니다. Button 일반적으로 명령을 나타내는 짧은 텍스트 문자열을 표시하지만 비트맵 이미지 또는 텍스트와 이미지의 조합을 표시할 수도 있습니다. Button 손가락으로 누르거나 마우스로 클릭하면 해당 명령이 시작됩니다.
Button는 다음 속성을 정의합니다.
BorderColor형식 Color의 단추의 테두리 색을 설명합니다.BorderWidth형식double의 단추 테두리 너비를 정의합니다.CharacterSpacing형식double의 단추 텍스트 문자 사이의 간격을 정의합니다.Command형식 ICommand의 단추를 탭할 때 실행되는 명령을 정의합니다.CommandParameter형식object의 , 에 전달되는Command매개 변수입니다.ContentLayout형식ButtonContentLayout의 경우 단추 이미지의 위치와 단추 이미지와 텍스트 사이의 간격을 제어하는 개체를 정의합니다.CornerRadius형식int의 경우 단추 테두리의 모퉁이 반경을 설명합니다.FontAttributes형식FontAttributes의 텍스트 스타일을 결정합니다.FontAutoScalingEnabled형식bool의 단추 텍스트가 운영 체제에 설정된 크기 조정 기본 설정을 반영하는지 여부를 정의합니다. 이 속성의 기본값은true입니다.FontFamily형식string의 글꼴 패밀리를 정의합니다.FontSize형식double의 글꼴 크기를 정의합니다.- ImageSource형식 ImageSource의 은 단추의 내용으로 표시할 비트맵 이미지를 지정합니다.
LineBreakMode형식LineBreakMode의 한 줄에 맞지 않을 때 텍스트를 처리하는 방법을 결정합니다.Padding형식Thickness의 은 단추의 안쪽 여백을 결정합니다.Text형식string의 은 단추의 내용으로 표시되는 텍스트를 정의합니다.TextColor형식 Color의 단추 텍스트 색을 설명합니다.TextTransform형식TextTransform의 은 단추 텍스트의 대/소문자를 정의합니다.
이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
참고 항목
이미지를 Button표시할 수 있는 속성을 정의하는 ImageSource 동안 Button 이 속성은 텍스트 옆에 Button 작은 아이콘을 표시할 때 사용됩니다.
또한 Button , Pressed및 Released 이벤트를 정의합니다Clicked. 이 Clicked 이벤트는 단추의 화면에서 손가락 또는 마우스 포인터가 있는 탭이 해제될 때 Button 발생합니다. 이 Pressed 이벤트는 손가락을 눌렀 Button을 때 발생하거나 포인터를 포인터 위에 Button놓아 마우스 단추를 누르면 발생합니다. 이 Released 이벤트는 손가락 또는 마우스 단추를 놓을 때 발생합니다. 일반적으로 Clicked 이벤트도 이벤트와 Released 동시에 발생하지만 손가락 또는 마우스 포인터가 놓 Clicked 이기 전의 Button 표면에서 멀어지면 이벤트가 발생하지 않을 수 있습니다.
Important
탭에 응답하려면 true 해당 Button 속성이 설정되어 있어야 합니다IsEnabled.
단추 만들기
단추를 만들려면 개체를 Button 만들고 해당 이벤트를 처리합니다 Clicked .
다음 XAML 예제에서는 다음을 만드는 방법을 보여줍니다.Button
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ButtonDemos.BasicButtonClickPage"
Title="Basic Button Click">
<StackLayout>
<Button Text="Click to Rotate Text!"
VerticalOptions="Center"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
<Label x:Name="label"
Text="Click the Button above"
FontSize="18"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
Text 속성은 Button에 나타나는 텍스트를 지정합니다. 이벤트는 Clicked 이름이 OnButtonClicked지정된 이벤트 처리기로 설정됩니다. 이 처리기는 코드 숨김 파일에 있습니다.
public partial class BasicButtonClickPage : ContentPage
{
public BasicButtonClickPage ()
{
InitializeComponent ();
}
async void OnButtonClicked(object sender, EventArgs args)
{
await label.RelRotateTo(360, 1000);
}
}
이 예제에서는 Button 탭하면 메서드가 OnButtonClicked 실행됩니다. 인수는 sender 이 이벤트를 담당하는 개체입니다 Button . 이를 사용하여 개체에 Button 액세스하거나 동일한 Clicked 이벤트를 공유하는 여러 Button 개체를 구분할 수 있습니다. Clicked 처리기는 360도를 1000밀리초 단위로 회전 Label 하는 애니메이션 함수를 호출합니다.
만들 C# 코드는 다음과 같습니다.Button
Button button = new Button
{
Text = "Click to Rotate Text!",
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
};
button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);
명령 인터페이스 사용
앱은 이벤트를 처리하지 않고 탭에 응답 Button 할 Clicked 수 있습니다. 명령 Button 또는 명령 인터페이스라는 대체 알림 메커니즘을 구현합니다. 이 속성은 다음 두 가지 속성으로 구성됩니다.
Command형식 ICommand의 네임스페이스에 정의된 인터페이스입니다System.Windows.Input.CommandParameter형식Object의 속성입니다.
이 방법은 데이터 바인딩과 관련하여 특히 MVVM(Model-View-ViewModel) 패턴을 구현할 때 적합합니다. MVVM 애플리케이션에서 viewmodel은 데이터 바인딩을 사용하여 개체에 Button 연결된 형식 ICommand 의 속성을 정의합니다. .NET MAUI는 또한 인터페이스를 Command 구현 ICommand 하고 Command<T> viewmodel이 형식ICommand의 속성을 정의하는 데 도움이 되는 클래스를 정의합니다. 명령에 대한 자세한 내용은 명령을 참조 하세요.
다음 예제에서는 명명된 형식의 속성과 명명 NumberMultiplyBy2Command 된 형식 double 의 두 속성을 ICommand 정의하는 매우 간단한 viewmodel 클래스를 보여 줍니다DivideBy2Command.
public class CommandDemoViewModel : INotifyPropertyChanged
{
double number = 1;
public event PropertyChangedEventHandler PropertyChanged;
public ICommand MultiplyBy2Command { get; private set; }
public ICommand DivideBy2Command { get; private set; }
public CommandDemoViewModel()
{
MultiplyBy2Command = new Command(() => Number *= 2);
DivideBy2Command = new Command(() => Number /= 2);
}
public double Number
{
get
{
return number;
}
set
{
if (number != value)
{
number = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
}
}
}
}
이 예제에서는 두 속성이 형식Command의 두 ICommand 개체를 사용하여 클래스의 생성자에서 초기화됩니다. 생성자에는 Command 속성 값을 Number 두 배로 늘리거나 반으로 줄이는 작은 함수(생성자 인수라고 함execute)가 포함됩니다.
다음 XAML 예제에서는 클래스를 CommandDemoViewModel 사용합니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ButtonDemos"
x:Class="ButtonDemos.BasicButtonCommandPage"
Title="Basic Button Command">
<ContentPage.BindingContext>
<local:CommandDemoViewModel />
</ContentPage.BindingContext>
<StackLayout>
<Label Text="{Binding Number, StringFormat='Value is now {0}'}"
FontSize="18"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="Multiply by 2"
VerticalOptions="Center"
HorizontalOptions="Center"
Command="{Binding MultiplyBy2Command}" />
<Button Text="Divide by 2"
VerticalOptions="Center"
HorizontalOptions="Center"
Command="{Binding DivideBy2Command}" />
</StackLayout>
</ContentPage>
이 예제 Label 에서 요소와 두 Button 개체는 클래스의 세 속성에 대한 바인딩을 CommandDemoViewModel 포함합니다. 두 Button 개체를 탭하면 명령이 실행되고 숫자가 값을 변경합니다. 처리기에 비해 Clicked 이 방법의 장점은 이 페이지의 기능과 관련된 모든 논리가 코드 숨김 파일이 아닌 viewmodel에 있으므로 비즈니스 논리에서 사용자 인터페이스를 더 잘 분리할 수 있다는 것입니다.
개체가 개체의 사용 및 비활성화 Button 를 제어할 수도 Command 있습니다. 예를 들어 숫자 값의 범위를 2 10에서 2-10 사이로 제한하려는 경우를 가정해 보겠습니다. 사용하도록 설정해야 하는 경우 반환 true 되는 생성자(인수라고 함canExecute)에 다른 함수를 Button 추가할 수 있습니다.
public class CommandDemoViewModel : INotifyPropertyChanged
{
···
public CommandDemoViewModel()
{
MultiplyBy2Command = new Command(
execute: () =>
{
Number *= 2;
((Command)MultiplyBy2Command).ChangeCanExecute();
((Command)DivideBy2Command).ChangeCanExecute();
},
canExecute: () => Number < Math.Pow(2, 10));
DivideBy2Command = new Command(
execute: () =>
{
Number /= 2;
((Command)MultiplyBy2Command).ChangeCanExecute();
((Command)DivideBy2Command).ChangeCanExecute();
},
canExecute: () => Number > Math.Pow(2, -10));
}
···
}
이 예제에서는 메서드를 호출하고 ChangeCanExecute 메서드 Command 를 사용하지 않도록 설정할지 여부를 결정할 수 있도록 Command 메서드에 Button 대한 canExecute 호출이 필요합니다. 이 코드가 변경되면 숫자가 한도 Button 에 도달하면 비활성화됩니다.
둘 이상의 Button 요소가 동일한 ICommand 속성에 바인딩될 수도 있습니다. 의 Button 속성을 Button사용하여 CommandParameter 요소를 구분할 수 있습니다. 이 경우 제네릭 Command<T> 클래스를 사용하려고 합니다. CommandParameter 그런 다음 개체가 및 canExecute 메서드에 execute 인수로 전달됩니다. 자세한 내용은 명령을 참조 하세요.
단추를 누르고 놓습니다.
이 Pressed 이벤트는 손가락을 눌렀 Button을 때 발생하거나 포인터를 포인터 위에 Button놓아 마우스 단추를 누르면 발생합니다. 이 Released 이벤트는 손가락 또는 마우스 단추를 놓을 때 발생합니다. 일반적으로 Clicked 이벤트도 이벤트와 Released 동시에 발생하지만 손가락 또는 마우스 포인터가 놓 Clicked 이기 전의 Button 표면에서 멀어지면 이벤트가 발생하지 않을 수 있습니다.
다음 XAML 예제에서는 및 이벤트에 연결된 Pressed Released 처리기를 보여 Label Button 줍니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ButtonDemos.PressAndReleaseButtonPage"
Title="Press and Release Button">
<StackLayout>
<Button Text="Press to Rotate Text!"
VerticalOptions="Center"
HorizontalOptions="Center"
Pressed="OnButtonPressed"
Released="OnButtonReleased" />
<Label x:Name="label"
Text="Press and hold the Button above"
FontSize="18"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
코드 숨김 파일은 이벤트가 발생할 때 Pressed 애니메이션 Label 효과를 주지만 이벤트가 발생할 때 회전을 Released 일시 중단합니다.
public partial class PressAndReleaseButtonPage : ContentPage
{
IDispatcherTimer timer;
Stopwatch stopwatch = new Stopwatch();
public PressAndReleaseButtonPage()
{
InitializeComponent();
timer = Dispatcher.CreateTimer();
timer.Interval = TimeSpan.FromMilliseconds(16);
timer.Tick += (s, e) =>
{
label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);
};
}
void OnButtonPressed(object sender, EventArgs args)
{
stopwatch.Start();
timer.Start();
}
void OnButtonReleased(object sender, EventArgs args)
{
stopwatch.Stop();
timer.Stop();
}
}
그 결과 손가락이 Label 접촉 Button하는 동안에만 회전하고 손가락이 놓일 때 중지됩니다.
단추 시각적 상태
ButtonPressed VisualState 에는 눌렀을 때 시각적 변경을 Button 시작하는 데 사용할 수 있는 값이 있습니다.
다음 XAML 예제에서는 상태에 대한 Pressed 시각적 상태를 정의하는 방법을 보여줍니다.
<Button Text="Click me!"
...>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Button>
이 예제 Pressed VisualState 에서는 누를 때 Button 해당 Scale 속성이 기본값 1에서 0.8로 변경되도록 지정합니다. 이 Normal VisualState 속성은 정상 상태일 때 Button 해당 Scale 속성이 1로 설정되도록 지정합니다. 따라서 전반적인 효과는 누를 때 Button 크기가 약간 더 작게 조정되고 Button 릴리스되면 기본 크기로 다시 크기가 조정된다는 것입니다.
Important
Button 해당 상태로 돌아가 Normal 려면 상태 VisualStateGroup 도 정의 PointerOver 해야 합니다. .NET MAUI 앱 프로젝트 템플릿에서 만든 스타일을 ResourceDictionary 사용하는 경우 상태를 정의하는 PointerOver 암시적 Button 스타일이 이미 있습니다.
시각적 상태에 대한 자세한 내용은 시각적 상태를 참조 하세요.
단추와 함께 비트맵 사용
클래스는 Button 단독으로 또는 텍스트와 함께 작은 비트맵 이미지를 Button표시할 수 있는 속성을 정의 ImageSource 합니다. 텍스트와 이미지를 정렬하는 방법을 지정할 수도 있습니다. 속성은 ImageSource 형식 ImageSource입니다. 즉, 파일, 포함된 리소스, URI 또는 스트림에서 비트맵을 로드할 수 있습니다.
비트맵은 에 맞게 Button조정되지 않습니다. 가장 좋은 크기는 비트맵의 크기에 따라 일반적으로 32~64개의 디바이스 독립적 단위입니다.
의 Text 속성을 Button사용하여 ContentLayout 속성과 ImageSource 속성을 정렬하는 Button 방법을 지정할 수 있습니다. 이 속성은 형식 ButtonContentLayout이며 생성자에는 두 개의 인수가 있습니다.
- 열거형의
ImagePosition멤버:Left,Top,Right또는Bottom비트맵이 텍스트를 기준으로 표시되는 방식을 나타냅니다. double비트맵과 텍스트 사이의 간격에 대한 값입니다.
XAML에서는 열거형 멤버 또는 간격만 지정하거나 쉼표로 구분된 순서로 둘 다 지정하여 속성을 만들고 Button 설정할 ContentLayout 수 있습니다.
<Button Text="Button text"
ImageSource="button.png"
ContentLayout="Right, 20" />
해당하는 C# 코드는 다음과 같습니다.
Button button = new Button
{
Text = "Button text",
ImageSource = new FileImageSource
{
File = "button.png"
},
ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20)
};
참고 항목
Button 텍스트와 이미지가 포함된 경우 단추 내의 모든 콘텐츠에 맞지 않을 수 있으므로 원하는 레이아웃을 달성하기 위해 이미지의 크기를 수동으로 조정해야 합니다.
단추 사용 안 함
경우에 따라 앱은 클릭이 유효한 작업이 아닌 상태로 Button 들어갑니다. 이런 경우 IsEnabled 속성을 false로 설정하여 Button을 사용하지 않도록 설정할 수 있습니다.
.NET MAUI