XAMARIN FORMS İLE IMAGE ZOOM

Merhaba,

Universalist Dergi Mobil çalışmasını Xamarin ile yaptığımı yazdım. O projenin (ilk versiyonunun) en mühim kısmı dergi sayfalarının okuma işlemi. Projenin genel yapısını proje sayfasında detaylı olarak görebilirsiniz. Bu yazımda sadece Image componentine ZoomIn/Zoom Out özelliğini nasıl kazandırabileceğimizden bahsedeceğim.

Aslında bu özelliğin bir property olarak verilmemesi büyük hata, tahminimce yeni gelecek güncellemelerle bir property ile bu özellik de eklenecektir. O gelene kadar aşağıdaki çözümü kullanabiliriz.

Aslında mantık basit, Keep It Simple prensibine uygun. Kodun yaptığı şey şu;

Kullanıcının büyütme-küçültme (Pinch) hareketini -meşhur parmak hareketi- yakalayıp Content içindeki elemanı o oranda yakınlaştır,
Kullanıcının sürükleme (Pan) hareketini yakalayıp Content içinde gösterilen kısmın ekrandaki yerini belirle,
Çift tıklama (Tap) hareketini yakalayıp Content içindeki değer daha önce büyütülmüşse orjinal boyuta döndür, orjinal boyuttaysa bir miktar yakınlaş.

Xamarin forumlarından aldığım örnekler üzerine;

Çift tıklama ile fotoğrafın orijinal boyutuna dönmesi özelliğini ekledim,
Parçalı sınıflara bağımlılığını kopardım,
Şekil şemailini düzelttim.

Kullanmak için;

ZoomImageBehavior.cs sınıfını projenizde istediğiniz bir yere kopyalayın,
Özelliği ekleyeceğiniz sayfanın Xaml koduna aşağıdaki şekilde image componentini ekleyin,

Ekranın bir Xaml ı yoksa Behavior u koddan da verebilirsiniz. O da şu şekilde;

imgActivePage.Behaviors.Add(new ZoomImageBehavior{ IsScaleEnabled=true, IsTranslateEnabled=true })

!!! Dikkat !!!

Image component inin bir ContentView içinde olması gerekiyor. Behavior kodlarını incelediğinizde Parent nesnesi olarak bir ContentView aradığını göreceksiniz. Parent ı burda değiştirecekseniz behavior içinde de değiştirmeniz gerekir.

Faydalı olması ümidiyle, herkese kolay gelsin.

Xaml Tarafı

Gist code example

Kod Tarafı

Gist code example

Kaynak

https://developer.xamarin.com/guides/xamarin-forms/user-interface/gestures