|
Windows Phone 7 Apps開發攻略 - 第參章 TextBox
序言
近期和 Window Phone 相關的重大新聞，應該就是手機大廠 Nokia 也一口氣 發表了兩隻號稱「真正的 Windows Phone」的手機，而且年底就會在台灣開賣的消息囉 !! 還沒入手 Windows Phone 或是想換機的朋友們，可以開始密切注意 相關的消息喔 !! 而台灣微軟也沒忘記要照顧廣大的開發者朋友們，在十一月 ~ 十二月間也舉辦了數場的免費課程，活動網址 ，有興趣投入開發的 朋友們不妨參考看看喔 !!
上一期的文章中跟各位朋友們分享了 Silverlight for Windows Phone 中內建的佈局容器；而這一次，就來跟大家分享一下用來輸入文字的 TextBox 控制項。沒錯，就是 TextBox !! 這個控制項只要是有接觸過程式設計的朋友們應該都有用過，但是，為什麼要特別拿它來大作文章呢？因為在 Silverlight for Windows Phone 裡的 TextBox 控制項為了要讓使用者有更好的使用者體驗，因此多下了些功夫，和其他平台的 TextBox 控制項有些許的差異。這次就與大家分享關於 Silverlight for Windows Phone 中 TextBox 控制項使用上需要注意的屬性以及小技巧。
TextBox 與 InputScope
在沒有外接鍵盤或是內建的實體鍵盤支援的 Windows Phone 裝置上，當使用者點選了 TextBox，就會自動帶出虛擬鍵盤供使用者進行文字的輸入。而 Windows Phone 內建的虛擬鍵盤就有好幾種不同的按鍵配置方式，以符合不同的輸入情境和需求。要針對 TextBox 設定不同的按鍵配置方式很簡單，只要透過設定它的 InputScope 屬性即可。以下就簡單的列出幾種常見的虛擬鍵盤配置：
預設鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top"/>
符合一般的使用情況，除了英文字母之外，也提供了切換為數字輸入模式和標點符號輸入的功能。
聊天、內文鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope="Chat"/>
除了基本的輸入功能外，還加入了表情符號輸入的功能，以及智慧候選字詞的 功能。
Email 位址鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope=
"EmailUserName "/>
提供常用到的 @ 符號和 .com 按鍵，且長按 .com 鍵的話會多出 .edu、.org、.edu 以及 .net 等常見域名可供選擇。
姓名或電話號碼鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope=
"NameOrPhone Number"/>
以 Email 位址鍵盤配置為基礎，但將 .com 鍵以；(分號) 鍵取代，以方便用來輸入多個 Email 位址。
網址鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope="Url"/>
類似 Email 位址鍵盤配置，但是少了 @ 按鍵，而長按「.」鍵的話，則會跳出網址中常用的符號可供選取；另外，原來的 Enter 鍵也改為了更顯眼的瀏覽示意箭頭。
貨幣及地址鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope=
"AddressStreet"/>
預設提供數字及基本符號可供輸入，切換到英文輸入模式則為預設鍵盤配置。
電話號碼鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope=
"Telephone Number"/>
除了一般電話鍵盤上有的按鍵之外，還多加了「-」和「．」符號。
數字鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope="Digits"/>
只提供數字和小數點的輸入。
搜尋鍵盤配置
<TextBox x:Name="textBgnmentox" VerticalAli="Top" InputScope="Search"/>
在標準鍵盤配置上加入了智慧候選字詞的功能，另外也將 Enter 鍵改為更顯眼的瀏覽箭頭。
公式鍵盤配置
<TextBox x:Name="textBox" VerticalAlignment="Top" InputScope="Formula"/>
在標準鍵盤配置上加入了智慧候選字詞的功能，另外也多了一個「=」鍵的按鈕，長按=鍵則會跳出更多公式中常用的符號可供選擇。
除了以上簡紹的幾種 InputScope 之外，微軟也很貼心的幫我們把目前支援的 InpupScope 以一個列舉型別封裝好了，所以工程師們也可以輕鬆的以程式碼來作到 InputScope 的設定 ，寫法如下：
InputScope inputScope = new InputScope();
InputScopeName inputScopeName = new InputScopeName();
inputScopeName.NameValue = InputScopeNameValue.Chat;
inputScope.Names.Add( inputScopeName );
textBox.InputScope = inputScope;
或是寫成：
textBox.InputScope = new InputScope();
textBox.InputScope.Names.Add( new InputScopeName { NameValue = InputScopeNameValue.Chat } );
這樣就可以輕鬆的設定 InputScope 屬性啦 !!
另外，對於設計師來說，直接使用 Expression Blend 4.0，也可以直接透過下拉選單來更輕鬆的設定 TextBox 的 InputScope 屬性喔 !!
額外小叮嚀：
雖然只是一個簡單的設定屬性的動作，但是對使用者體驗來說，可是有極大影響的。在設計 App 時，除了華麗的使用者介面之外，可千萬別忽略這小小的 TextBox 和 InputScope 屬性。
只要我們多替使用者著想，預先設定好 InputScope，就可以減少使用者在文字輸入方面可能遇到的障礙；千萬別因為偷懶或是 InputScopt 設定不當，而增加了使用者進行文字輸入時的複雜度，這樣可是得不償失的，而且很容易給使用者帶來負面的觀感喔 !!
AcceptsReturn 與 TextWrapping 屬性
在原生的 Silverlight for Windows Phone 上面並沒有特別提供另一組可以用來輸入多行文字 (類似 HTML 中的 TextArea) 的控制項，而是一樣得透過 TextBox 一手包辦多行文字的輸入。這個時候，TextBox 的 AcceptsReturn 和 TextWrapping 這兩個屬性就顯得特別的重要。
我們先簡單的在畫面中放一個 TextBox 如下，看看在預設的 TextBox 中輸入 超長的文字會發生什麼事：
<TextBox Name="textBox" Text="這是一個簡單的測試，在預設的情況下，文字是不會自動換行的!!"/>
就算我們想透過虛擬鍵盤上的 Enter 鍵來達到換行的效果，也不會有任何反應。
首先來看看 WMAppManifest.xml 的內容，這個檔案可是定義整個應用程式 相關資訊和功能的地方喔 !!
這個時候，AcceptsReturn 這個屬性就派上用場啦 !!，我們只要簡單的將 TextBox 的 AcceptsReturn 屬性設為 True，一切就變得不一樣了 !!
<TextBox Name="textBox" Text="這是一個簡單的測試，在將 AcceptsReturn 屬性設為True 的情況下，TextBox 就可以按受換行喔 !!" AcceptsReturn="True"/>
那麼，前面提到的 TextWrapping 屬性呢？如果我們希望文字會依據 TextBox 的寬度自動換行的話，用它就對了 !!
<TextBox Name="textBox" Text="這是一個簡單的測試，在將 TextWrapping 屬性設為 Wrap 的情況下，TextBox 裡的文字就會自動換行喔 !!" TextWrapping="Wrap"/>
額外小叮嚀：
AcceptsReturn 屬性和 TextWrapping 屬性可以混合使用。但是要注意的是，經由 TextWrapping 自動換行的文字，透過 TextBox.Text 屬性去取值的話，文字還是都會完整的接連在一起；但是，透過 AcceptsReturn 屬性由使用者透過 Enter 鍵進行斷行的話，去取得 TextBox.Text 的值時，裡面就真的會出現斷行字元 ("\r") 喔 !!
透過程式自動跳到下一欄位的小技巧
Silverlight for Windows 裡的 TextBox 一樣提供了 TextChanged 事件可供我們在使用者進行文字輸入的瞬間就觸發程式的處理函式。我們可以藉由這個小技巧，來作到當使用者輸入的值符合特定條件時，自動幫使用者將目前的焦點移到另一個欄位或是控制項上。
例如：
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="您的帳號："/>
<TextBox x:Name="txtAccount" MaxLength="8" TextChanged="txtAccount_TextChanged" />
<TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="密碼："/>
<TextBox x:Name="txtPassword" MaxLength="8" />
<Button x:Name="button" Content="登入"/>
</StackPanel>
MainPage.xaml (節錄)：
MainPage.xaml.cs (節錄)：
透過以上程式碼，只要 txtAccount 輸入滿 8 個字元，控制項的焦點就會自動轉移到 txtPassword 上，很簡單吧 !!
透過程式隱藏虛擬鍵盤的小技巧
而要透過程式來隱藏虛擬鍵盤也不是不可能的事，只要將 App 中取得焦點的控制項移到非 TextBox 的控制項上就行了 !!
承襲上個範例：
MainPage.xaml (節錄)：
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="您的帳號："/>
<TextBox x:Name="txtAccount" MaxLength="8" TextChanged="txtAccount_TextChanged" />
<TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="密碼："/>
<TextBox x:Name="txtPassword" MaxLength="8" TextChanged="txtPassword_TextChanged" />
<Button x:Name="button" Content="登入"/>
</StackPanel>
private void txtAccount_TextChanged( object sender , System.Windows.Controls.TextChangedEventArgs e )
{
if( ( sender as TextBox ).Text.Length == ( sender as TextBox ).MaxLength )
{
txtPassword.Focus();
}
}
MainPage.xaml.cs (節錄)：
也不難吧 !!?
這次的分享就到這邊 ~ 下一次，再來與各位針對 Silverlight for Window Phone Toolkit 進行更深入的分享和介紹喔 !! 我們下次見 !!
其他相關資源：
作者：微軟最有價值專家 (MVP) – 劉耀群
|