İçeriğe geç

Windows 8 Uygulamalarında Semantic Zoom

Mayıs 10, 2013

Windows 8 ile gelen Semantic Zoom ;  kullanıcıya elindeki data üzerinde gerek bütün olarak dolaşabilmeye imkan verirken gerekse veriyi gruplayarak ;bunun üzerinde kullanıcının dolaşmasına imkan sağlamaktadır.

Windows 8 üzerinde Semantic Zoom’un kullanıldığı  yerlerden biri Start Screen’dir.Start Screen kısmında Zoom-in/out yaptığımızda StartScreen içerisinde bulunan itemlar ekranda aşağıdaki gibi daha ufak bir biçimde gösterilir.Bunu dokunmatik özelliği olmayanlarda Ctrl +/- tuşları yardımı ile yapabilirsiniz.

10

Şimdi semantic zoom la basit bir uygulama yapalım.İlk başta Visual Studio 2012 ile File–>New–>Project diyip Other Project Types  altında bir Visual Studio Solutions oluşturuyoruz ve isim verdikten sonra  Add->New Project diyorum ve WCF sekmesi altinda bulunan WCF Service Application’i secerek  Servisimin ismini WebServisi2 koyuyorum.

Servis olustuktan sonra oncelikle Interface sinifimda olan IService1.cs sinifimda gerekli  işlemleri yapıyorum.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WebService2
{

[ServiceContract]
public interface IService1
{
[OperationContract]
string YemekAdı(string ad);
} }

Daha sonra Servis1.svc dosyamıza gidiyoruz.Aşağıdaki işlemleri yapıyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WebService2
{

public class Service1 : IService1
{
public string YemekAdı(string ad)
{
return ad;
}
}
}

Servis1.svc üzerine gelip sağa tıklayıp View in Browser dediğimizde projemizin çalışıp çalışmadığını öğrenmiş olacağız.Bu adımı geçtikten sonra  Web Servisle ilgili gerekli işlemleri tamamlıyor olduk.Daha sonra Add–>New Project diyip Windows Store sekmesi altındaki Blank app sayfasını seçiyoruz.

WCF projemize ek olarak Windows Store projeside eklemiş olduk. Oncelik olarak Windows Store projemizin çalışması gerekli.Bunun için projenin üzerine gelip sağa tıklayıp Set As A StartUp Project seçeneğini seçmeliyiz. Aksi halde projemizi calistirmak istedigimizde WCF servisinizin Test kismi calisacaktir.

Projemizi olusturduktan sonra  web servisimizi eklemis oldugumuz windows store projemize referans olarak gostermemiz gerekmektedir. Bunun için projenin üzerinde sağa tıklayıp Add Service Referance seçeneğini seçmemiz gerekmektedir.

Projemize servisimizi ekledikten sonra MainPage.xaml sayfasına aşağıdaki gibi 1 adet textblock,1 adet combobox,1 adet textbox,bir adet buton ekleyelim.

11

Daha sonra 1 adet appbar ekleyip  aşağıda gösterildiği gibi xaml tarafında bir kaç değişiklik yapalım.
<TextBox Name=”Txtveri” HorizontalAlignment=”Left” Margin=”134,88,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Width=”345″/>
<Button Content=”Ekle” HorizontalAlignment=”Left” Margin=”548,51,0,0″ VerticalAlignment=”Top” Width=”105″ Height=”59″ Click=”Button_Click_1″/>
<AppBar VerticalAlignment=”Bottom” Margin=”10,0,-10,10″>

<Button Name=”btnExit” Content=”Çıkış” HorizontalAlignment=”Left” Width=”112″ Click=”btnExit_Click”/>
</AppBar>

Bu değişiklikler:

1) Textboxın adını Txtveri olarak değiştirdim.

2)Butonun Content’ini Ekle olarak değiştirdim.

3)Appbar kısmına 1 adet buton ekledim ve bu buton ile kullanıcının uygulamadan çıkmasını sağlamak için ilk başta butonun adını btnExit olarak değiştirdim.

İlk başta appbar da bulunan butonun click eventine aşağıdaki kodları yazdım.

private void btnExit_Click(object sender, RoutedEventArgs e)
{
Application.Current.Exit();
}

Appbar kullanıma hazır.Şimdi ise uygulamamıza 1 adet semantic zoom ekleyelim.

<SemanticZoom>

    <SemanticZoom.ZoomedInView>
       <GridView/>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
       <GridView/>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>
               SemanticZoom kontrolünü uygulamaya ekledikten sonra oluşan XAML kodumuz yukarıdaki şekildedir.  Oluşan XAML kodunda 2 adet property ortaya çıkmaktadır. Bunlardan biri ZoomedInView diğeri de ZoomedOutView. Kullanıcı Zoom-in yaptığında oluşacak görünümü ZoomedInView’a  koyacağız, yine kullanıcı zoom-out yaptığında da oluşacak görünümü de ZoomOutView’a  koyacağız.

<SemanticZoom HorizontalAlignment=”Left” Margin=”71,150,0,0″ VerticalAlignment=”Top” Width=”720″ Height=”192″>
<SemanticZoom.ZoomedInView>
<GridView Name=”Yemek” ScrollViewer.IsHorizontalScrollChainingEnabled=”False” ScrollViewer.IsVerticalScrollChainingEnabled=”False”/>

</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView x:Name=”listview1″ >

<x:String>Ana Yemekler</x:String>
<x:String>Tatlılar</x:String>
<x:String>Çorbalar</x:String>

</ListView>

</SemanticZoom.ZoomedOutView>
</SemanticZoom>

Daha sonra yukarıdaki gibi Xaml tarafında değişiklikler yaptık .

Şimdi sıra geldi aldığımız bilgileri gridview da göstermeye. Ekle Butonumuzun click eventine gidelim.Burada aşağıdaki işlemleri yapalım.

private async void Button_Click_1(object sender, RoutedEventArgs e)
{

ServiceReference1.Service1Client ServistenAl = new ServiceReference1.Service1Client();

public int sayi1 = 0;
public int sayi2 = 0;
public int sayi3 = 0;
public string anayemek, corba, tatli;

public string[] dizi1 = new string[25];
public string[] dizi2 = new string[25];
public string[] dizi3 = new string[25];
if (combobox1.SelectedIndex==0)
{

anayemek =await ServistenAl.YemekAdıAsync(Txtveri.Text);
dizi1[sayi1] = anayemek.ToString();
Yemek.Items.Add(anayemek);
sayi1++;

}
if (combobox1.SelectedIndex == 1)
{
corba =await ServistenAl.YemekAdıAsync(Txtveri.Text);
dizi1[sayi2] = corba.ToString();
Yemek.Items.Add(corba);
sayi2++;

}
if (combobox1.SelectedIndex == 2)
{

tatli = await ServistenAl.YemekAdıAsync(Txtveri.Text);
dizi1[sayi3] = tatli.ToString();
Yemek.Items.Add(tatli);
sayi3++;

}

}

Uygulamamız bitti.Şimdi çalıştıralım ve görelim ekran görüntülerimizi.

screenshot_05102013_170313

Yukarıda görüldüğü gibi  comboboxtan  ekleyeceğimiz yemeğin türünü seçiyoruz daha sonrasında ekranda eklediklerimiz gözüküyor.Faremizin sağ tuşuna tıkladığımızda appbarımızda bulunan çıkış butonunu görüyoruz.Asıl gelelim semantic zoom olayına .Bilgisayarımda Ctrl – tuşuna bastığımda aşağıdaki ekran karşıma çıkıyor.

screenshot_05102013_170326

Evet uygulamamız başarıyla tamamlanmış oldu 🙂

Reklamlar

From → Arşiv

Yorum Yapın

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s

%d blogcu bunu beğendi: