Kustomisasi Soft Input Panel

Pada Windows Phone dengan tidak terdapatnya hardware keyboard tentunya Anda sudah menduga bahwa untuk berinteraksi dengan device akan menggunakan on-screen keyboard. SIP yaitu Soft Input Panel adalah nama yang diberikan kepada on-screen keyboard Windows Phone. Salah satu skenario umum kemunculan SIP adalah jika kita melakukan aksi terhadap sebuah textbox.

clip_image002

Layout SIP standar adalah qwerty panel dengan alfabet sebagai screen utama. Dan untuk menampilkan angka kita perlu menekan tombol digit di bagian bawah kiri. Tapi tentunya ada beberapa skenario dimana Anda menginginkan bahwa SIP hanya menampilkan digit ketika pengguna ingin memasukkan suatu input. Hal ini tentunya juga dapat mengurangi kesalahan masukan dari pengguna.

Pengaturan semacam ini dapat dilakukan mudah dengan adanya property LayoutOptions untuk SIP tersebut. Layout yang didukung adalah : Default, Text, Digits, Web dan Email Address. Masing-masing layout memiliki karakteristik unik tersendiri. Text misalnya, memiliki layout yang mirip dengan Default namun memiliki fitur autocorrect dan text suggestion.

Untuk mempelajarinya mari ikuti langkah-langkah berikut ini :

1. Buatlah project baru untuk keperluan ini. Pada  MainPage.xaml tambahkan dua buah buttn dan sebuah textbox.

clip_image006

Untuk contoh ini kita, jika button pertama ditekan maka akan menampikan layout Text dan button kedua untuk layout Email.

2. Double-click pada button pertama dan ketikkan kode berikut ini :

   1:  private void button1_Click(object sender, RoutedEventArgs e)
   2:          {
   3:              textBox1.InputScope = new InputScope()
   4:              {
   5:                  Names = { new InputScopeName() { NameValue = InputScopeNameValue.Text } }
   6:              };
   7:          }

3.  Double-click pada button kedua dan ketikkan kode berikut ini :

   1:  private void button2_Click(object sender, RoutedEventArgs e)
   2:  
   3:  {
   4:  
   5:  textBox1.InputScope = new InputScope()
   6:  
   7:  {
   8:  
   9:  Names = { new InputScopeName() { NameValue = InputScopeNameValue.EmailSmtpAddress } }
  10:  
  11:  };
  12:  
  13:  }
  14:  

4.Tekan F5 untuk melihat hasilnya.

clip_image008 clip_image010 clip_image012

Klik textbox terlebih dahulu untuk melihat tampilan Default. Kemudian klik button pertama lalu klik kembali textbox tersebut. Sekarang keyboard menjadi tampilan Text. Ketika Anda mengetik Fr misalnya telah muncul suggestion yang bisa Anda pilih. Klik button kedua dan klik kembali textbox untuk melihat perubahaa layout. Meski tidak terlalu signifikan kini dibagian bawah keyboard terdapat dua karakter, yaitu @ dan .com yang sering digunakan untuk menuliskan alamat email.

5. Selain menggunakan kode, layout keyboard juga dapat kita atur langsung melalui XAML pada kontrol textbox. Simak kode berikut ini :

   1:  <TextBox Height="72" HorizontalAlignment="Left" Margin="12,207,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460">
   2:  
   3:  <TextBox.InputScope>
   4:  
   5:  <InputScope>
   6:  
   7:  <InputScopeName NameValue="Digits"/>
   8:  
   9:  </InputScope>
  10:  
  11:  </TextBox.InputScope>
  12:  
  13:  </TextBox>
  14:  

7. Tekan F5 untuk melihat hasilnya. Klik textbox dan kini layout SIP akan menampilkan panel angka sebagai layar utama.

clip_image014

Dengan SIP Layout kita dapat bebas mengatur keyboard yang ingin ditampilkan. Tentunya penggunaan fitur ini harus sesuai. Penggunaan yang baik akan menampilkan kesan aplikasi yang lebih profesional. Bukan begitu ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s