ImageButton

아티클
08/30/2024

.NET 다중 플랫폼 앱 UI(.NET MAUI) ImageButton 보기는 보기와 Image 보기를 결합하여 Button 콘텐츠가 이미지인 단추를 만듭니다. 손가락으로 누르 ImageButton 거나 마우스로 클릭하면 앱이 작업을 수행하도록 지시합니다. 그러나 보기와 Button ImageButton 달리 텍스트 및 텍스트 모양에 대한 개념은 없습니다.

ImageButton는 다음 속성을 정의합니다.

Aspect형식 Aspect은 표시 영역에 맞게 이미지의 크기를 조정하는 방법을 결정합니다.
BorderColor형식 Color의 단추의 테두리 색을 설명합니다.
BorderWidth형식 double의 단추 테두리 너비를 정의합니다.
Command형식 ICommand의 단추를 탭할 때 실행되는 명령을 정의합니다.
CommandParameter형식 object의 , 에 전달되는 Command매개 변수입니다.
CornerRadius형식 int의 경우 단추 테두리의 모퉁이 반경을 설명합니다.
IsLoading형식 bool의 는 이미지의 로드 상태를 나타냅니다. 이 속성의 기본값은 false입니다.
IsOpaque형식 bool의 .NET MAUI는 이미지를 렌더링할 때 불투명하게 처리해야 하는지 여부를 결정합니다. 이 속성의 기본값은 false입니다.
IsPressed형식 bool의 는 단추를 누르고 있는지 여부를 나타냅니다. 이 속성의 기본값은 false입니다.
Padding형식 Thickness의 은 단추의 안쪽 여백을 결정합니다.
Source형식 ImageSource의 은 단추의 내용으로 표시할 이미지를 지정합니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

이 속성은 Aspect 열거형의 Aspect 멤버 중 하나로 설정할 수 있습니다.

Fill - 이미지를 완전히 정확하게 채우도록 늘입니다 ImageButton. 이로 인해 이미지가 왜곡될 수 있습니다.
AspectFill - 가로 세로 비율을 유지하면서 채우도록 이미지를 클리핑합니다 ImageButton .
AspectFit - 이미지의 너비 또는 높이에 따라 위쪽/아래쪽 또는 측면에 빈 공간이 추가된 상태에서 전체 이미지가 이미지에 맞 ImageButton도록 이미지(필요한 경우)를 편지함으로 만듭니다. 열거형의 Aspect 기본값입니다.
Center - 가로 세로 비율을 유지하면서 이미지의 ImageButton 중심을 지정합니다.

또한 ImageButton , Pressed및 Released 이벤트를 정의합니다Clicked. 이 Clicked 이벤트는 단추의 화면에서 손가락 또는 마우스 포인터가 있는 탭이 해제될 때 ImageButton 발생합니다. 이 Pressed 이벤트는 손가락을 눌렀 ImageButton을 때 발생하거나 포인터를 포인터 위에 ImageButton놓아 마우스 단추를 누르면 발생합니다. 이 Released 이벤트는 손가락 또는 마우스 단추를 놓을 때 발생합니다. 일반적으로 Clicked 이벤트도 이벤트와 Released 동시에 발생하지만 손가락 또는 마우스 포인터가 놓 Clicked 이기 전의 ImageButton 표면에서 멀어지면 이벤트가 발생하지 않을 수 있습니다.

Important

ImageButton 탭에 응답하려면 true 해당 IsEnabled 속성이 설정되어 있어야 합니다.

ImageButton 만들기

이미지 단추를 만들려면 개체를 ImageButton 만들고, 속성을 Source 설정하고, 해당 이벤트를 처리합니다 Clicked .

다음 XAML 예제에서는 다음을 만드는 방법을 보여줍니다.ImageButton

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

속성은 Source 에 표시되는 이미지를 지정합니다 ImageButton. 이벤트는 Clicked 이름이 OnImageButtonClicked지정된 이벤트 처리기로 설정됩니다. 이 처리기는 코드 숨김 파일에 있습니다.

public partial class ImageButtonDemoPage : ContentPage
{
    int clickTotal;

    public ImageButtonDemoPage()
    {
        InitializeComponent();
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

이 예제에서는 ImageButton 탭하면 메서드가 OnImageButtonClicked 실행됩니다. 인수 sender 는 ImageButton 이 이벤트를 담당합니다. 이를 사용하여 개체에 ImageButton 액세스하거나 동일한 Clicked 이벤트를 공유하는 여러 ImageButton 개체를 구분할 수 있습니다. Clicked 처리기는 카운터를 증가시키고 카운터 값을 다음과 같이 Label표시합니다.

ImageButton의 스크린샷.

만들 ImageButton C# 코드는 다음과 같습니다.

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

명령 인터페이스 사용

앱은 이벤트를 처리하지 않고 탭에 응답 ImageButton 할 Clicked 수 있습니다. 명령 ImageButton 또는 명령 인터페이스라는 대체 알림 메커니즘을 구현합니다. 이 속성은 다음 두 가지 속성으로 구성됩니다.

Command 형식 ICommand의 네임스페이스에 정의된 인터페이스입니다 System.Windows.Input .
CommandParameter 형식 Object의 속성입니다.

이 방법은 데이터 바인딩과 관련하여, 특히 MVVM(Model-View-ViewModel) 패턴을 구현할 때 적합합니다. 명령에 대한 자세한 내용은 단추 문서의 명령 인터페이스 사용을 참조하세요.

ImageButton을 누르고 놓습니다.

이 Pressed 이벤트는 손가락을 눌렀 ImageButton을 때 발생하거나 포인터를 포인터 위에 ImageButton놓아 마우스 단추를 누르면 발생합니다. 이 Released 이벤트는 손가락 또는 마우스 단추를 놓을 때 발생합니다. 일반적으로 Clicked 이벤트는 이벤트와 Released 동시에 발생하지만 손가락 또는 마우스 포인터가 놓 Clicked 이기 전에 표면 ImageButton 에서 멀어지면 이벤트가 발생하지 않을 수 있습니다.

이러한 이벤트에 대한 자세한 내용은 단추 문서의 단추 누르기 및 해제 를 참조하세요.

ImageButton 시각적 상태

ImageButtonPressed VisualState 에는 눌렀을 때 시각적으로 변경(ImageButton활성화된 경우)을 시작하는 데 사용할 수 있는 a가 있습니다.

다음 XAML 예제에서는 상태에 대한 Pressed 시각적 상태를 정의하는 방법을 보여줍니다.

<ImageButton Source="image.png"
             ...>
    <VisualStateManager.VisualStateGroups>
        <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>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

이 예제 Pressed VisualState 에서는 누를 때 ImageButton 해당 Scale 속성이 기본값 1에서 0.8로 변경되도록 지정합니다. 이 Normal VisualState 속성은 정상 상태일 때 ImageButton 해당 Scale 속성이 1로 설정되도록 지정합니다. 따라서 전반적인 효과는 누를 때 ImageButton 크기가 약간 더 작게 조정되고 ImageButton 릴리스되면 기본 크기로 다시 크기가 조정된다는 것입니다.

Important

ImageButton 해당 상태로 돌아가 Normal 려면 상태 VisualStateGroup 도 정의 PointerOver 해야 합니다. .NET MAUI 앱 프로젝트 템플릿에서 만든 스타일을 ResourceDictionary 사용하는 경우 상태를 정의하는 PointerOver 암시적 ImageButton 스타일이 이미 있습니다.

시각적 상태에 대한 자세한 내용은 시각적 상태를 참조 하세요.

ImageButton 사용 안 함

경우에 따라 앱이 클릭이 유효한 작업이 아닌 상태로 ImageButton 들어갑니다. 이러한 경우 ImageButton 해당 IsEnabled 속성을 false.로 설정하여 사용하지 않도록 설정해야 합니다.

다음을 통해 공유