탭 제스처 인식기 추가Adding a tap gesture recognizer

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

탭 제스처는 탭 감지에 사용되며 TapGestureRecognizer 클래스를 통해 구현됩니다.The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class.

사용자 인터페이스 요소를 탭 제스처를 사용하여 클릭할 수 있도록 만들려면 TapGestureRecognizer 인스턴스를 만들고, Tapped 이벤트를 처리하고, 사용자 인터페이스 요소의 GestureRecognizers 컬렉션에 새 제스처 인식기를 추가합니다.To make a user interface element clickable with the tap gesture, create a TapGestureRecognizer instance, handle the Tapped event and add the new gesture recognizer to the GestureRecognizers collection on the user interface element. 다음 코드 예제에서는 Image 요소에 연결된 TapGestureRecognizer를 보여줍니다.The following code example shows a TapGestureRecognizer attached to an Image element:

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap
};
image.GestureRecognizers.Add(tapGestureRecognizer);

기본적으로 이미지는 단일 탭에 응답합니다.By default the image will respond to single taps. 두 번 탭(또는 필요한 경우 더 많은 탭)을 기다리도록 NumberOfTapsRequired 속성을 설정합니다.Set the NumberOfTapsRequired property to wait for a double-tap (or more taps if required).

tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap

NumberOfTapsRequired가 1보다 크게 설정되면 설정된 일정 기간(이 기간은 구성할 수 없음) 내에 탭이 발생할 경우에만 이벤트 처리기가 실행됩니다.When NumberOfTapsRequired is set above one, the event handler will only be executed if the taps occur within a set period of time (this period is not configurable). 두 번째(또는 후속) 탭이 해당 기간 내에 발생하지 않으면 실질적으로 무시되고 ‘탭 수’는 다시 시작됩니다.If the second (or subsequent) taps do not occur within that period they are effectively ignored and the 'tap count' restarts.

XAML 사용Using Xaml

제스처 인식기는 연결된 속성을 사용하여 XAML에서 컨트롤에 추가할 수 있습니다.A gesture recognizer can be added to a control in Xaml using attached properties. 이미지에 TapGestureRecognizer를 추가할 구문은 다음과 같습니다(이 경우 두 번 탭 이벤트 정의).The syntax to add a TapGestureRecognizer to an image is shown below (in this case defining a double tap event):

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Tapped="OnTapGestureRecognizerTapped"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

샘플에서 이벤트 처리기의 코드는 카운터를 증가시키고 색의 이미지를 흑백으로 변경합니다.&The code for the event handler (in the sample) increments a counter and changes the image from color to black & white.

void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
    tapCount++;
    var imageSender = (Image)sender;
    // watch the monkey go from color to black&white!
    if (tapCount % 2 == 0) {
        imageSender.Source = "tapped.jpg";
    } else {
        imageSender.Source = "tapped_bw.jpg";
    }
}

ICommand 사용Using ICommand

MVVM(Model-View-ViewModel) 패턴을 사용하는 애플리케이션은 일반적으로 이벤트 처리기를 직접 연결하는 대신 ICommand를 사용합니다.Applications that use the Model-View-ViewModel (MVVM) pattern typically use ICommand rather than wiring up event handlers directly. TapGestureRecognizer는 코드에서 바인딩을 설정하거나 XAML을 사용하여 손쉽게 ICommandThe TapGestureRecognizer can easily support ICommand either by setting the binding in code:

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding (TapGestureRecognizer.CommandProperty, "TapCommand");
image.GestureRecognizers.Add(tapGestureRecognizer);

지원할 수 있습니다.or using Xaml:

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Command="{Binding TapCommand}"
            CommandParameter="Image1" />
    </Image.GestureRecognizers>
</Image>

이 보기 모델에 대한 전체 코드는 샘플에서 확인할 수 있습니다.The complete code for this view model can be found in the sample. 관련 Command 구현 세부 정보는 다음과 같습니다.The relevant Command implementation details are shown below:

public class TapViewModel : INotifyPropertyChanged
{
    int taps = 0;
    ICommand tapCommand;
    public TapViewModel () {
        // configure the TapCommand with a method
        tapCommand = new Command (OnTapped);
    }
    public ICommand TapCommand {
        get { return tapCommand; }
    }
    void OnTapped (object s)  {
        taps++;
        Debug.WriteLine ("parameter: " + s);
    }
    //region INotifyPropertyChanged code omitted
}