Makale Özeti

Bu makalemizde kullanıcı dostu veri giriş ekranları oluşturabilmek için Windows Phone 7' de Virtual Keyboard' u inceliyoruz.

Makale

Merhaba, bu yazımızda bir Windows Phone 7 uygulamasında Virtual Keyboard (Software Input Panel / SIP) kullanımını inceleyeceğiz. Windows Phone uygulamalarının ekran üzerinde virtual keyboard'u (görsel klavye'yi) desteklediğini biliyoruz. Fakat farklı kullanım alanları (veri girişleri) için keyboard' un da farklı tuşlarına da ihtiyaç duyabiliriz. Örneğin bir TextBox veri giriş alanına telefon girişi yapabilmek için öncelikle default keyboard üzerinden '&123' (rakamlar) tuşuna basarak klavyemizi sayısal moda ya da sayısal kapsamdaki tuş takımlarının görüntüleneceği klavyeyi açtıktan sonra rakamları kullanabiliyoruz. Ya da bir Web Browser' ımız için, bir url adresini textbox içerisine yazmamız gerekiyorsa bu adresin tamamını yazmak da belirli bir zaman alacaktır. Oysaki web url adresini yazarken en azından adresin sonunda bulunan '.com' un tek bir tıkla yazılmasını sağlayabilmek kullanıcılara oldukça kolaylık sağlayacaktır. (Ya da kullanıcı dostu olacaktır diyebiliriz.)

Görsel klavyeyi, yerleşim türlerine ve Enum olarak isimlendirilmelerine göre bir göz atalım. Tüm enum listesine buradan ulaşabilirsiniz.

Yerleşim Türü (SIP Layout) Enum Açıklama
Default Default Standart olarak açılan QWERTY klavye
Text Text Standart text bilgi giriş alanları için otomatik doğrulama desteği.
Web URL Kullanıcının Url girişleri yaptığı durumlarda
E-Mail Address EMailSmtpAddress E-Posta girişleri için
E-Mail name or Address EMailNameOrAddress E-Posta veya Adres girişlerinde
Maps Maps Harita üzerinden arama yapılırken kullanılır
Phone Number TelephoneNumber Telefon girişleri için
Search Search Bir kriter ile arama yapılırken
SMS contact NameOrPhoneNumber Kullanıcı SMS alanında iken kullanılır.

Şimdi örnek uygulamamızın ana ekranını tasarlamaya başlayalım. Örnek veri girişini sağlayabilmek adına bir TextBox ve SIP (Software Input Panel) türlerini belirleyebilmek için de ekranımıza aşağıdaki gibi radio butonlarımızı ekleyelim. Radio butonların GroupName property'lerini de aynı isim olacak şekilde set edelim ('group1' kullandık).

XAML
 

 

<!--ContentPanel - place additional content here-->

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

 

    <TextBox Height="72" HorizontalAlignment="Left" Margin="12,20,0,0" Name="txt" Text="" VerticalAlignment="Top" Width="438" />

 

    <RadioButton Content="Default" Height="72"

                 HorizontalAlignment="Left" Margin="25,98,0,0"

                 Name="radioButton1" VerticalAlignment="Top"

                 Width="377" GroupName="group1"

                 IsChecked="True" Checked="setDefaultSIP"/>

 

    <RadioButton Content="EMail" Height="72"

                 HorizontalAlignment="Left" Margin="25,176,0,0"

                 Name="radioButton2" VerticalAlignment="Top"

                 GroupName="group1" Checked="setEmailSIP" />

 

    <RadioButton Content="Web URL Address" Height="72"

                 HorizontalAlignment="Left" Margin="25,254,0,0"

                 Name="radioButton3" VerticalAlignment="Top"

                 GroupName="group1" Checked="setURLAddressSIP" />

 

    <RadioButton Content="Phone Number" Height="72"

                 HorizontalAlignment="Left" Margin="25,332,0,0"

                 Name="radioButton4" VerticalAlignment="Top"

                 GroupName="group1" Checked="setPhoneNumberSIP" />

 

 

  </Grid>

 

 

'txt' isimli text box üzerinde klavyemizin değişmesi için aşağıdaki asıl işi yapacak olan kod satırlarımızı private method olarak ana form.cs sınıfımızın içine ekleyelim. Methodumuzun içinde öncelikle bir InputScope nesnesi tanımlıyoruz, ardından input scope nesnemizin Names property'sine oluşturacağımız InputScopeName nesnelerini ekleyeceğiz. Son olarak txt isimli TextBox'ımızın InputScope Property'sine inputScope adında oluşturduğumuz nesnemizi bind edelim.

C#

private void setSIPType(InputScopeNameValue inputScopeNameValue) {

      if (txt != null) {

        InputScope inputScope = new InputScope();

        InputScopeName inputScopeName = new InputScopeName();

        inputScopeName.NameValue = inputScopeNameValue;

        inputScope.Names.Add(inputScopeName);

        txt.InputScope = inputScope;

      }

    }

Ana Ekranımıza eklediğimiz radio butonlarımızın Checked event'ları altına da aşağıdaki C# kod satırlarımızı ekleyelim.

C#

   private void setDefaultSIP(object sender, RoutedEventArgs e) {

      setSIPType(InputScopeNameValue.Default);

    }

 

    private void setEmailSIP(object sender, RoutedEventArgs e) {

      setSIPType(InputScopeNameValue.EmailNameOrAddress);

    }

 

    private void setURLAddressSIP(object sender, RoutedEventArgs e) {

      setSIPType(InputScopeNameValue.Url);

    }

 

    private void setPhoneNumberSIP(object sender, RoutedEventArgs e) {

      setSIPType(InputScopeNameValue.TelephoneNumber);

    }

 

Event'larımızın altında setSIPType methodumuzu da çağırdıktan sonra F5 ile uygulamamızı çalıştırarak sonuçları görelim.

Default SIP E-Mail SIP
URL SIP Telephone Number SIP

Veri giriş alanlarımızdaki ihtiyacımıza göre ilgili SIP türünü kolaylıkla belirlememiz mümkün.Örneğin bir Url adresini kullanıcıya girdirmek için kullanıcıyı yormadan '.com' butonuyla eriştirebiliyoruz, kullanıcı bu noktadan sonra ilgili uzantıya '.com' a basılı tutarak ya da direk .com'u tuşlayarak da erişiebilecektir. Eğer '.com' a basılı tuttulursa da diğer yaygın olan uzantılara (.org, .edu, .net) erişmemiz mümkün olacak. Örnek olarak yalnızca 4 farklı SIP türünü ele almış olduk. Yazının başında da belirttiğim gibi diğer türleride deneyerek ilgili veri giriş alanlarında kullanabiliriz.

Kolay gelsin.

Gökhan Manduz - gokhanmanduz@hotmail.com