WP7 - 改變 TextBox.InputScope 來提升使用者經驗

應用程式中會經常利用TextBox 控制項讓使用者輸入資料，所以我們可利用 XAML 來改變其 TextBox.InputScope 來提昇使用者使用經驗

      <TextBox x:Name="InputTextBox" Height="70" >
          <TextBox.InputScope>
              <InputScope>
                  <InputScopeName NameValue="EmailNameOrAddress" />
              </InputScope>
          </TextBox.InputScope>
      </TextBox>

也可以在利用程式碼來動態修改

InputTextBox.InputScope = new InputScope()

{
  Names = { 
      new InputScopeName()
      { 
         NameValue = InputScopeNameValue.EmailNameOrAddress 
      }
  }
};

接下來我們利用動態選擇的方式來改變InputScope

(必需先安裝 Silverlight for Windows Phone Toolkit)

先加入 Microsoft.Phone.Controls.Toolkit 參考

然後在 MainPage.xaml 中加入命名空間的別名

加入 ListPicker 控制項

<toolkit:ListPicker x:Name="InputScopeListPicker" />

在 MainPage 初始化後加入下面程式碼來取得所有 InputScopeNameValue的所有列舉值(EnumHelper 程式碼請參考範例檔)

InputScopeListPicker.ItemsSource = EnumHelper.GetNames<InputScopeNameValue>();

加入選取項目改變事件，在事件中動態改變 TextBox.InputScope
//使用程式碼在選取項目改變時更換 InputScope 範例
InputScopeListPicker.SelectionChanged += (sender, e) =>
{
  var nameValue = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), InputScopeListPicker.SelectedItem.ToString(), false);
  InputTextBox.InputScope = new InputScope
  {
    Names = { new InputScopeName { NameValue = nameValue } }
  };
};

測試畫面

也可以直接使用控制項資料繫結的方式來改變 TextBox.InputScope

<TextBox x:Name="InputTextBox" Height="70" InputScope="{Binding ElementName=InputScopeListPicker, Path=SelectedItem}" />

範例檔案下載