Xamarin.Forms ImageButtonXamarin.Forms ImageButton

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Imagebutton이 이미지를 표시 하 고 탭 또는 특정 작업을 수행 하는 응용 프로그램을 지시 하는 클릭에 응답 합니다.The ImageButton displays an image and responds to a tap or click that directs an application to carry out a particular task.

ImageButton 결합 보기는 Button 보기 및 Image 내용이 단추를 만들려면 뷰는 이미지입니다.The ImageButton view combines the Button view and Image view to create a button whose content is an image. 사용자가 ImageButton 손가락을 사용 하 여 특정 작업을 수행 하 고 응용 프로그램이를 마우스로 클릭 하거나 탭 할 합니다.The user presses the ImageButton with a finger or clicks it with a mouse to direct the application to carry out a particular task. 달리 합니다 Button 보기는 ImageButton 뷰에 텍스트 및 텍스트 모양에 대 한 개념이 없습니다.However, unlike the Button view, the ImageButton view has no concept of text and text appearance.

참고

하는 동안 합니다 Button 뷰 정의 Image 속성에서 이미지를 표시할 수 있도록를 Button,이 속성은 작은 아이콘을 표시할 때 사용 하기 위한 다음에 Button 텍스트입니다.While the Button view defines an Image property, that allows you to display a image on the Button, this property is intended to be used when displaying a small icon next to the Button text.

이 가이드의 코드 예제에서 수행 되는 FormsGallery 샘플합니다.The code examples in this guide are taken from the FormsGallery sample.

이미지 원본 설정Setting the image source

ImageButton 정의 Source 이미지 원본 파일, URI, 리소스 또는 스트림을 사용 하 여 단추에 표시할 이미지를 설정 해야 하는 속성입니다.ImageButton defines a Source property that should be set to the image to display in the button, with the image source being either a file, a URI, a resource, or a stream. 다양 한 원본에서 이미지를 로드 하는 방법에 대 한 자세한 내용은 참조 하세요. xamarin.forms에서 이미지합니다.For more information about loading images from different sources, see Images in Xamarin.Forms.

다음 예제에서는 인스턴스화하는 방법을 보여 줍니다는 ImageButton XAML에서:The following example shows how to instantiate a ImageButton in XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

합니다 Source 속성에 표시 되는 이미지를 지정 합니다 ImageButton합니다.The Source property specifies the image that appears in the ImageButton. 이 예제에서는 다음 스크린샷에서 결과, 각 플랫폼 프로젝트에서 로드 되는 로컬 파일에 설정 됩니다.In this example it's set to a local file that will be loaded from each platform project, resulting in the following screenshots:

기본 ImageButtonBasic ImageButton

기본적으로 ImageButton 사각형이 사용 하 여 it 둥근 모퉁이 제공할 수 있지만 CornerRadius 속성.By default, the ImageButton is rectangular, but you can give it rounded corners by using the CornerRadius property. 에 대 한 자세한 내용은 ImageButton 모양을 참조 ImageButton 모양을합니다.For more information about ImageButton appearance, see ImageButton appearance.

다음 예제에는 완전히 이지만 이전 하는 XAML 예와 기능적으로 동일 하 게 연결 되는 페이지를 만드는 방법을 보여 줍니다 C#:The following example shows how to create a page that is functionally equivalent to the previous XAML example, but entirely in C#:

public class ImageButtonDemoPage : ContentPage
{
    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children = { header, imageButton }
        };
    }
}

가 ImageButton 처리Handling ImageButton clicks

ImageButton 정의 된 Clicked 사용자가 누를 때 실행 되는 이벤트를 ImageButton 손가락이 나 마우스 포인터를 사용 하 여 합니다.ImageButton defines a Clicked event that is fired when the user taps the ImageButton with a finger or mouse pointer. 이벤트의 화면에서 손가락이 나 마우스 단추를 놓으면 발생 합니다 ImageButton합니다.The event is fired when the finger or mouse button is released from the surface of the ImageButton. 합니다 ImageButton 있어야 해당 IsEnabled 속성으로 설정 true 탭에 응답할 합니다.The ImageButton must have its IsEnabled property set to true to respond to taps.

다음 예제에서는 인스턴스화하는 방법을 보여 줍니다는 ImageButton XAML 핸들에 해당 Clicked 이벤트:The following example shows how to instantiate a ImageButton in XAML and handle its Clicked event:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnImageButtonClicked" />

        <Label x:Name="label"
               Text="0 ImageButton clicks"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

합니다 Clicked 이벤트를 명명 된 이벤트 처리기로 OnImageButtonClicked 코드 숨김 파일에 있는:The Clicked event is set to an event handler named OnImageButtonClicked that is located in the code-behind file:

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 메서드를 실행 합니다.When the ImageButton is tapped, the OnImageButtonClicked method executes. 합니다 sender 인수가 ImageButton 이 이벤트를 담당 합니다.The sender argument is the ImageButton responsible for this event. 에 액세스 하는 데 사용할 수 있습니다는 ImageButton 개체 또는 여러 구별할 수 ImageButton 공유 하는 동일한 개체 Clicked 이벤트입니다.You can use this to access the ImageButton object, or to distinguish between multiple ImageButton objects sharing the same Clicked event.

이 특정 Clicked 처리기는 카운터를 증가 하 고 카운터 값 표시를 Label :This particular Clicked handler increments a counter and displays the counter value in a Label:

기본 ImageButton 클릭Basic ImageButton Click

다음 예제에는 완전히 이지만 이전 하는 XAML 예와 기능적으로 동일 하 게 연결 되는 페이지를 만드는 방법을 보여 줍니다 C#:The following example shows how to create a page that is functionally equivalent to the previous XAML example, but entirely in C#:

public class ImageButtonDemoPage : ContentPage
{
    Label label;
    int clickTotal = 0;

    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };
        imageButton.Clicked += OnImageButtonClicked;

        label = new Label
        {
            Text = "0 ImageButton clicks",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children =
            {
                header,
                imageButton,
                label
            }
        };
    }

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

Imagebutton이 사용 하지 않도록 설정Disabling the ImageButton

경우에 따라 응용 프로그램은 특정 상태의 경우 특정 ImageButton 클릭은 올바른 작업이 아닙니다.Sometimes an application is in a particular state where a particular ImageButton click is not a valid operation. 이러한 경우에는 ImageButton 해야 사용할 수 없게 설정 하 여 해당 IsEnabled 속성을 false입니다.In those cases, the ImageButton should be disabled by setting its IsEnabled property to false.

인터페이스를 사용 하 여Using the command interface

응용 프로그램에 응답할 가능성이 ImageButton 처리 없이 탭은 Clicked 이벤트입니다.It is possible for an application to respond to ImageButton taps without handling the Clicked event. 합니다 ImageButton 이라는 다른 알림 메커니즘을 구현 합니다 명령 또는 명령 인터페이스입니다.The ImageButton implements an alternative notification mechanism called the command or commanding interface. 이 두 속성으로 구성 됩니다.This consists of two properties:

이 방법은 모델-뷰-ViewModel (MVVM) 아키텍처를 구현 하는 경우에 특히 데이터 바인딩 관련 하 여 및에 적합 합니다.This approach is suitable in connection with data-binding, and particularly when implementing the Model-View-ViewModel (MVVM) architecture.

인터페이스를 사용 하는 방법에 대 한 자세한 내용은 참조 하세요. 인터페이스를 사용 하 여단추 가이드입니다.For more information about using the command interface, see Using the command interface in the Button guide.

Imagebutton이 눌렀다 놓아Pressing and releasing the ImageButton

외에 합니다 Clicked 이벤트 ImageButton 도 정의 PressedReleased 이벤트입니다.Besides the Clicked event, ImageButton also defines Pressed and Released events. 합니다 Pressed 이벤트 손가락을 누를 때 발생을 ImageButton, 또는 위에 포인터를 사용 하 여 마우스 단추를 누를 ImageButton합니다.The Pressed event occurs when a finger presses on a ImageButton, or a mouse button is pressed with the pointer positioned over the ImageButton. Released 이벤트 손가락이 나 마우스 단추를 놓을 때 발생 합니다.The Released event occurs when the finger or mouse button is released. 일반적으로 Clicked 이벤트와 동일한 시간에도 발생 합니다 Released 손가락이 나 마우스 포인터의 화면에서 슬라이드 하는 경우 있지만 이벤트는 ImageButton 반환 되기 전에 Clicked 이벤트가 발생 하지 않을 수 있습니다.Generally, the Clicked event is also fired at the same time as the Released event, but if the finger or mouse pointer slides away from the surface of the ImageButton before being released, the Clicked event might not occur.

이러한 이벤트에 대 한 자세한 내용은 참조 하세요. 키를 눌러 및 단추에서 손을 떼기단추 가이드입니다.For more information about these events, see Pressing and releasing the button in the Button guide.

ImageButton 모양ImageButton appearance

속성 외에 ImageButton 에서 상속 되는 View 클래스 ImageButton 도 해당 모양에 영향을 주는 몇 가지 속성을 정의 합니다.:In addition to the properties that ImageButton inherits from the View class, ImageButton also defines several properties that affect its appearance:

  • Aspect 이미지는 표시 영역에 맞게 크기가 조정 하는 방법입니다.Aspect is how the image will be scaled to fit the display area.
  • BorderColor 주위의 영역 색인을 ImageButton입니다.BorderColor is the color of an area surrounding the ImageButton.
  • BorderWidth 테두리의 너비가입니다.BorderWidth is the width of the border.
  • CornerRadius 모서리 반지름을 ImageButton입니다.CornerRadius is the corner radius of the ImageButton.

합니다 Aspect 속성의 멤버 중 하나로 설정할 수 있습니다 합니다 Aspect 열거형:The Aspect property can be set to one of the members of the Aspect enumeration:

  • Fill -이미지를 완전히 정확 하 게 입력 확장 된 ImageButton합니다.Fill - stretches the image to completely and exactly fill the ImageButton. 이 이미지 왜곡 되지 될 수 있습니다.This may result in the image being distorted.
  • AspectFill -을 채우도록 이미지를 자릅니다는 ImageButton 가로 세로 비율을 유지 하면서 합니다.AspectFill - clips the image so that it fills the ImageButton while preserving the aspect ratio.
  • AspectFit -레터 박스 (필요한 경우) 이미지 전체 이미지에 맞도록는 ImageButton, 위쪽/아래쪽 또는 이미지를 가로 또는 세로 인지에 따라 양쪽에 추가 공백이 있는 합니다.AspectFit - letterboxes the image (if necessary) so that the entire image fits into the ImageButton, with blank space added to the top/bottom or sides depending on whether the image is wide or tall. 기본 값을 Aspect 열거형입니다.This is the default value of the Aspect enumeration.

참고

ImageButton 클래스에 Margin 하 고 Padding 레이아웃 동작을 제어 하는 속성을 ImageButton합니다.The ImageButton class also has Margin and Padding properties that control the layout behavior of the ImageButton. 자세한 내용은 여백 및 안쪽 여백합니다.For more information, see Margin and Padding.

ImageButton 시각적 상태ImageButton visual states

ImageButtonPressed VisualState 시각적으로 변화를 시작 하려면 사용할 수 있는 ImageButton 설정 된 사용자가 누를 때.ImageButton has a Pressed VisualState that can be used to initiate a visual change to the ImageButton when pressed by the user, provided that it's enabled.

다음 XAML 예제에 대 한 시각적 상태를 정의 하는 방법을 보여 줍니다는 Pressed 상태:The following XAML example shows how to define a visual state for the Pressed state:

<ImageButton Source="XamarinLogo.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>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

Pressed VisualState 되도록 지정 합니다 ImageButton 를 누르면 해당 Scale 1 0.8은 사용자의 기본 값에서 속성을 변경할 수는.The Pressed VisualState specifies that when the ImageButton is pressed, its Scale property will be changed from its default value of 1 to 0.8. 합니다 Normal VisualState 되도록 지정 합니다 ImageButton 정상 상태의 해당 Scale 속성이 1로 설정 됩니다.The Normal VisualState specifies that when the ImageButton is in a normal state, its Scale property will be set to 1. 따라서 전체적인 효과 때를 ImageButton 는 약간 더 작은 및 시기를 재조정는 누른는 ImageButton 는 기본 크기를 재조정은 해제 합니다.Therefore, the overall effect is that when the ImageButton is pressed, it's rescaled to be slightly smaller, and when the ImageButton is released, it's rescaled to its default size.

시각적 상태에 대 한 자세한 내용은 참조 하세요. 은 Xamarin.Forms Visual State Manager합니다.For more information about visual states, see The Xamarin.Forms Visual State Manager.