Windows Phone: InputScope kullanımı

Bu yazımızda InputScope kavramını bir örnekle inceleyerek, nerelerde ve nasıl kullanabileceğimizi göreceğiz.

Bildiğiniz gibi Windows Phone uygulamalarında kullanıcı veri girişini dokunmatik sanal klavye aracılığıyla gerçekleştiriyor. Metinsel veri girişi yapılabilecek bir nesne üzerine odaklanıldığında (focus), sanal klavye otomatik olarak açılıyor. Klavyenin açılması için programatik olarak herhangi bir işlem yapılması gerekmiyor. Ama, InputScope kullanarak standard sanal klavye yerine ihtiyaca göre özelleştirilmiş bir sanal klavyenin açılması sağlanabilir. Örneğin; telefon numarası girilecek olan alan için sadece sayısal değerlerin yer aldığı bir klavye ya da email girilecek alan için @ işaretine direkt ulaşılabilecek olan bir klavye gibi. Şimdi, InputScope kullanımını ele alacağımız bir form tasarımı yapalım. Formu, toolbox içerisinden gerekli kontrolleri sürükleyip bırakarak, aşağıdaki gibi tasarlayabilirsiniz.

Bu uygulamada senaryomuz, web sitesini bir index’e kayıt ettirmek isteyen bireysel kullanıcının ihtiyacını karşılamak. Bu amaçla kullanıcı tarafından doldurulacak olan formu ele alıyoruz. Form üzerinde e-Mail Adresi, Şifre, Telefon Numarası ve Web Sitesi girişi için kullanılacak metin kutuları dışında bir de bilgilerin gönderilmesi için kullanılacak buton yer alıyor.

Kullanıcıdan e-Mail adresini alacağımız metin kutusuna dokunulduğunda mail adresi içerisinde kullanılan özel karakterlerin yer aldığı bir sanal klavye açılması kullanıcının işleri daha kolay bir şekilde yapmasını sağlayacaktır. Şifre normal karakter kümesi üzerinden yazılabilir ve standart klavyenin kullanımı yeterli olacaktır. Hatırlaycağınız gibi standart klavyenin açılması için herhangi bir işlem yapılmasına gerek yoktur. Telefon numarası için kullanıcının sayısal değerleri zorlanmadan girebilmesini sağlamak adına numerik bir klavye kullanması daha iyi olur.

e-Mail adresi için sürükleyip bıraktığımız metin kutusunun (TextBox) kodları aşağıdaki gibi olacaktır.

<TextBox Height="72" HorizontalAlignment="Left" Margin="6,42,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="444" />

Bu satırı, ve diğer metin kutularına ait satırları, aşağıdakine benzer şekilde değiştirerek InputScope tanımlaması yapabilir ve sanal klavyenin görünümünü özelleştirebilirsiniz.

<TextBox Height="72" HorizontalAlignment="Left" Margin="6,42,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="444">
    <TextBox.InputScope>
        <InputScope>
            <InputScopeName NameValue="EmailSmtpAddress" />
        </InputScope>
    </TextBox.InputScope>
</TextBox>

Bu yöntemi tercih ettiğinizde InputScopeName için kullanacağınız NameValue değerini yazarken IntelliSense yardımcınız olacaktır. IntelliSense olmasa da olur ben daha az kod yazmak istiyorum diyorsanız da aşağıdaki yazım şeklini tercih edebilirsiniz.

<TextBox Height="72" HorizontalAlignment="Left" Margin="6,42,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="444" InputScope="EmailSmtpAddress" />

Burada, InputScope için kullanılan EmailSmtpAddress değeri, yandaki gibi @ ve .com tuşlarını barındıran bir klavye gösterilmesini sağlayacaktır.

InputScope olarak kullanabileceğimiz değerler arasında EmailSmtpAddress, Default, Digits, Url, TelephoneNumber gibi değerler bulunuyor. TelephoneNumber olarak tanımlayacağımız bir InputScope da aşağıdaki gibi bir sanal klavye açacaktır.

Tam liste için aşağıda verdiğim iki adresi inceleyebilirsiniz:

How to: Specify On-Screen Keyboard Layout for a TextBox

How to: Set the Keyboard Input Scope for Windows Phone

İlk ekran görüntümüzdeki form tasarımına ait XAML kodları aşağıda sunulduğu gibidir.

<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,6,0,0" Name="textBlock1" Text="e-Mail Adresi:" VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="6,42,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="444">
    <TextBox.InputScope>
        <InputScope>
            <InputScopeName NameValue="EmailSmtpAddress" />
        </InputScope>
    </TextBox.InputScope>
</TextBox>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,120,0,0" Name="textBlock2" Text="Şifre:" VerticalAlignment="Top" />
<TextBox InputScope="Default" Height="72" HorizontalAlignment="Left" Margin="6,156,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="444" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,234,0,0" Name="textBlock3" Text="Telefon Numarası:" VerticalAlignment="Top" />
<TextBox InputScope="TelephoneNumber" Height="72" HorizontalAlignment="Left" Margin="6,270,0,0" Name="textBox3" Text="" VerticalAlignment="Top" Width="444" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,348,0,0" Name="textBlock4" Text="Web Sitesi:" VerticalAlignment="Top" />
<TextBox InputScope="Url" Height="72" HorizontalAlignment="Left" Margin="6,384,0,0" Name="textBox4" Text="" VerticalAlignment="Top" Width="444" />
<Button Content="Gönder" Height="72" HorizontalAlignment="Left" Margin="290,462,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

Konuyu MSDN üzerinden okumak için bu linki kullanabilirsiniz.