Xamarin.Forms
몸짓
수색…
TapGestureRecognizer를 추가하여 이미지를 태핑 가능하게 만들기
Xamarin.Forms에는 몇 가지 기본 인식기가 있으며, 그 중 하나는 TapGestureRecognizer
입니다.
거의 모든 시각적 요소에 추가 할 수 있습니다. Image
바인딩하는 간단한 구현을 살펴보십시오. 다음은 코드에서 수행하는 방법입니다.
var tappedCommand = new Command(() =>
{
//handle the tap
});
var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand };
image.GestureRecognizers.Add(tapGestureRecognizer);
또는 XAML :
<Image Source="tapped.jpg">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TappedCommand}"
NumberOfTapsRequired="2" />
</Image.GestureRecognizers>
</Image>
이 명령은 데이터 바인딩을 사용하여 설정됩니다. 볼 수 있듯이 NumberOfTapsRequired
를 설정하여 조치를 취하기 전에 더 많은 도청이 가능하도록 설정할 수 있습니다. 기본값은 1 탭입니다.
다른 제스처는 핀치와 팬입니다.
핀치 제스처로 이미지 확대 / 축소
Image
(또는 다른 시각적 요소)를 확대 / PinchGestureRecognizer
할 수 PinchGestureRecognizer
하려면 PinchGestureRecognizer
를 추가해야합니다. 다음은 코드에서 수행하는 방법입니다.
var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => {
// Handle the pinch
};
image.GestureRecognizers.Add(pinchGesture);
그러나 XAML에서도이 작업을 수행 할 수 있습니다.
<Image Source="waterfront.jpg">
<Image.GestureRecognizers>
<PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
</Image.GestureRecognizers>
</Image>
동반 이벤트 처리기에서 이미지를 확대 / 축소하는 코드를 제공해야합니다. 물론 다른 용도로도 사용할 수 있습니다.
void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
// ... code here
}
다른 제스처는 탭 및 팬입니다.
PanGestureRecognizer로 확대 된 모든 이미지 컨텐츠를 보여줍니다.
확대 된 Image
(또는 다른 컨텐트)가있는 경우 확대 된 상태의 모든 컨텐트를 표시하려면 Image
를 드래그 할 수 있습니다.
PanGestureRecognizer를 구현하면이 작업을 수행 할 수 있습니다. 코드에서 이것은 이렇게 보입니다 :
var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
// Handle the pan
};
image.GestureRecognizers.Add(panGesture);
XAML에서도이 작업을 수행 할 수 있습니다.
<Image Source="MonoMonkey.jpg">
<Image.GestureRecognizers>
<PanGestureRecognizer PanUpdated="OnPanUpdated" />
</Image.GestureRecognizers>
</Image>
코드 숨김 이벤트에서 이에 따라 패닝을 처리 할 수 있습니다. 이 메서드 시그니처를 사용하여 처리합니다.
void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
// Handle the pan
}
사용자가 MR.Gestures를 사용하여 화면을 터치 한 곳에 핀 배치
제스처 인식기에 내장 된 Xamarins는 매우 기본적인 터치 처리 만 제공합니다. 예를 들어 감동적인 손가락의 위치를 잡을 방법이 없습니다. MR.Gestures는 14 가지 터치 처리 이벤트를 추가하는 구성 요소입니다. 감동 손가락의 위치는 모든 MR.Gestures 이벤트에 전달되는 EventArgs
일부입니다.
화면의 아무 곳에 나 핀을 배치하려면 가장 쉬운 방법은 Tapping
이벤트를 처리하는 MR.Gestures.AbsoluteLayout
을 사용하는 MR.Gestures.AbsoluteLayout
입니다.
<mr:AbsoluteLayout x:Name="MainLayout" Tapping="OnTapping">
...
</mr:AbsoluteLayout>
보시다시피 Tapping="OnTapping"
은 중첩 된 GestureRecognizers
가있는 Xamarins 구문보다 .NET과 비슷하다고 느낍니다. 이 구문은 iOS에서 복사되었으며 .NET 개발자에게는 약간의 냄새가 난다.
코드 뒤에 다음과 같은 OnTapping
핸들러를 추가 할 수 있습니다.
private void OnTapping(object sender, MR.Gestures.TapEventArgs e)
{
if (e.Touches?.Length > 0)
{
Point touch = e.Touches[0];
var image = new Image() { Source = "pin" };
MainLayout.Children.Add(image, touch);
}
}
Tapping
이벤트 대신 TappingCommand
사용하여 ViewModel에 바인딩 할 수도 있지만이 간단한 예제에서는 복잡합니다.
MR.Gestures에 대한 더 많은 샘플은 GitHub 의 GestureSample 앱 과 MR.Gestures 웹 사이트 에서 찾을 수 있습니다. 이들은 또한 이벤트 처리기, 명령, MVVM, 다른 모든 터치 이벤트를 사용하는 방법을 보여줍니다 ...