[WP7][修練][VB.NET] 指定不同的鍵盤模式輸入

在WP7的手機世界裡面,在輸入不同的資料時,可以設定為不同的模式,讓使用者可以更快速方的方式來進行資料的輸入。而有哪些輸入的模式,要如何設定這些模式呢,小喵用這篇做個記錄。

緣起

在WP7的手機世界裡面,在輸入不同的資料時,可以設定為不同的模式,讓使用者可以更快速方的方式來進行資料的輸入。而有哪些輸入的模式,要如何設定這些模式呢,小喵用這篇做個記錄。

 

指定輸入模式的程式碼

指定輸入模式的方式,一般的認知中,要切換輸入的模式,可能要寫一些Code做一些程式設的撰寫才能夠達到。但是在WP7的世界中,其實只需要設定XAML Code就可以完成指定輸入模式了。讓我們來看看以下這個例子

首先我們在畫面中拉近去一個TextBox,然後要指定這個TextBox用數字鍵盤輸入數字的資料。我們只需要設定以下的XAML就能夠輕鬆達成


    <TextBox.InputScope>
        <InputScope>
            <InputScopeName NameValue="Digits"></InputScopeName>
        </InputScope>
    </TextBox.InputScope>
</TextBox>

InputScope001

重點就是在InputScopeName的NameValue,裡面是個列舉,依照不同的設定就會有不同的鍵盤顯示方式。有哪些列舉,請參考以下MSDN的這一篇

http://msdn.microsoft.com/zh-tw/library/system.windows.input.inputscopenamevalue(v=VS.95).aspx

 

透過這樣簡單的設定,就可以指定讓使用者用不同的方式來進行輸入。比如說使用者其實只需要打數字,就直接給使用者數字鍵盤(Digits / Number),這樣使用者輸入時,按鍵比較大也比較少,可以很方便就輸入進去。

 

特殊輸入的整理

在上面MSDN的列舉中 ,有些還蠻特殊的,有些小喵分不出來與一般文字輸入有什麼不一樣的地方。所以小喵將這裡面,小喵覺得比較特別的,可能應用的地方做一下整理:

 

一般文字輸入:Default

一般的文字輸入,會用以下畫面的鍵盤,依照設定→鍵盤的設定,切換不同的輸入法

InputScope007InputScope008InputScope009

 

數字 / 貨幣的輸入:Digits / Number

如果是要輸入數字的話,可以使用Digits或者是Number,這種要輸入金額、數字的欄位還蠻直覺與快速的。

InputScope001

 

網址:url

在這裡面,有關於【網址】的可以用【url】,他長得像這樣

InputScope003InputScope004

比較不同的是他的左下角會有個【.com】可以協助我們快速輸入網址,而如果我們的網址不是.com,也可以【長按】,他會出現其他的快速選項,可以幫助我們快速輸入如【.org / .edu / .net】之類的網址。

 

EMail:EMailNameOrAddress

如果是要輸入【EMail】的話,可以選擇用【EmailNameOrAddress】,那麼會有如下畫面的輸入鍵盤

InputScope005InputScope006

在.com的旁邊,多了一個【@】方便輸入EMail,而一樣的,如果您的EMail不是.com的話,也可以【長按】.com,一樣可以快速選擇【.org / .edu / .net】

比較EMail與網址,其實差別就只在【@】符號。所以這兩個都選EmailNameOrAddress其實都算方便。

 

貨幣+貨幣符號: CurrencyAmountAndSymbol

如果選擇的是貨幣符號,則是會出現特殊符號與數字的這樣鍵盤,因此如果希望使用者輸入的是數字+特殊符號,可以使用這個。

InputScope010

 

電話號碼:TelephoneNumber

如果是要輸入電話號碼,也有專用的鍵盤,如下圖,與數字不同的是,方便輸入電話時所需要輸入的【*】、【#】、【-】符號。

InputScope011

 

日期時間:

說到日期,雖然裡面也有Date的項目,不過我們有更好的選擇可以用,那是Silverlight Toolkit,裡面的控制項,使用很簡單,只要安裝好Silverlight Toolkit之後,就可以直接從工具箱中拖拉出來放。放好就設計好了。

小喵分別拉一個日期、一個時間控制項到畫面上:


<toolkit:TimePicker HorizontalAlignment="Left" Margin="176,106,0,0" Name="TimePicker1" VerticalAlignment="Top" />

這樣就可以使用了。不過這時候會發現,真正在挑選日期或時間的時候,下面的完成與取消的圖示都不見。要處理這個問題,首先可以到您所安裝的SDK中,找到相關的圖示。小喵是從這個位置找到的:【C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark】。再來,在專案的跟目錄下,建立一個名為【Toolkit.Content】的資料夾。接著將兩個圖分別為【appbar.check.rest】與【appbar.cancel.rest】複製到這個資料夾中,接著要幫他們重新命名為【ApplicationBar.Check.png】與【ApplicationBar.Cancel.png】,最後,還要設定兩個圖形的【屬性】,找到【建置動作】,改為【內容】。

這樣就可以得到下面畫面的效果了。

DatePicker01TimePicker01

 

結語:

在Windows Phone設計時,我們可以多幫使用者操作的時候想一想,用什麼樣的鍵盤方式來進行輸入會比較快速。而輸入日期時間的時候,也可以透過Control Toolkits的幫忙,直接使用DatePicker與TimePicker的控制向來協助。用非常簡單的方式,就能夠幫助使用者快速輸入資料,提升使用者的操作感受。小喵特以此篇筆記一下這些地設定方式,提供自己未來設計時可以參考。


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat