Windows Phone 7.1 Zoomable Image

By Burak TUNGUT - 21.11.2012 - Kategori Windows Phone 8

Bu makalemiz ile Windows Phone 7.1 uygulamalarımız da kullandığımız Image kontolünü zoomable yapacağız.
Gesture eventler konusu altında geçen bu makalemizde yapacağımız uygulama ile sayfa üzerindeki resimlerimize zoom in ve zoom out yapabileceğiz.

Önceki makalelerimiz de gerek Image kontrolünü gerek tab eventlerini işledik. Bu makalemiz ile elimizdeki Image kontrolünü bir resim galerisi için kullanmamız durumunda zoom in ve zoom out olaylarını tab eventinin haricinde nasıl yapabileceğimizi göreceğiz.


Bu işlemi yaparken gesture eventleri kullancağımızı daha önce de söylemiştim. Tabi ki bize Gesture Listeneri sağlayacak olan Windows Phone Toolkit kütüphanesini öncelikle buraya tıklyarak indirelim ve oluşturduğumuz uygulamaya referans ederecek build işlemini gerçekleştirelim.

xaml tarafda LayoutRoot içeriğimiz aşağıdaki gibi olmalıdır ;

 

 

<Grid x:Name="LayoutRoot">

 

 

        <Image Name="MainImage" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache">
            <Image.RenderTransform>
                <CompositeTransform x:Name="transform" />
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
            </toolkit:GestureService.GestureListener>
        </Image>
    </Grid>


OnPinchStarted ve OnPinchDelta eventlerini ise oluşturduktan sonra kod tarafına geçelim ve eventlerimizi aşağıdaki gibi dolduralım ; 

double initialAngle;
        double initialScale;

        private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
        {
            initialAngle = transform.Rotation;
            initialScale = transform.ScaleX;
        }

        private void OnPinchDelta(object sender, PinchGestureEventArgs e)
        {
            transform.ScaleX = initialScale * e.DistanceRatio;
            transform.ScaleY = initialScale * e.DistanceRatio;
        }


Artık Image kontrolümüz iki parmağın birbirinden uzaklaşması durumunda OnPinchDelta eventimiz iki parmak arasındaki delta değerini yani fark vektörünü bulacak ve diğer event ile yakalanan delta değeri kadar resimde in ve out işlemlerini gerçekleştirecektir.
Ne yazık ki emulatör de çift imleç kullanma gibi bir durumumuz çok kolay değil bu durumda uygulamayı bir telefonda test etmeniz daha sağlıklı olacaktır.

 

 

Bir sonraki makalem de görüşmek üzere, esen kalın :)

 

 

H.Burak TUNGUT
Bilgisayar Mühendisliği Öğrencisi

Yorum Bırak

Facebook
Son Yorumlar