Статьи

InputScope для TextBox в приложениях Windows Phone 7

Октябрь 9, 2017

В этом уроке я продемонстрирую новую функцию InputScope платформы Windows Phone 7. Эта функция, примененная к текстовому полю, может быть очень полезна для всех пользователей WP7, поскольку она повышает удобство использования ваших приложений и сокращает время, необходимое для ввода определенного текста с помощью SIP ( Soft Input Panel ).

Дополнительная информация

Определение

Мое определение InputScope будет таким: InputScope — это атрибут, который можно применить к элементу управления текстового поля для изменения макета SIP по умолчанию (т. Е. Когда пользователь вводит текст в текстовое поле).

Способы указания InputScope

Есть несколько способов указать InputScope для текстового поля. Каждый из способов имеет схожий результат, но также имеет определенные преимущества («+») и недостатки («-»).

Полное объявление XAML

«+» доступ к IntelliSence (предложения) для атрибута NameValue элемента InputScopeName

«-» много разметки XAML

Пример:

<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
     <TextBox.InputScope>
          <InputScope>
              <InputScopeName  NameValue="Number" />
          </InputScope>
     </TextBox.InputScope>
</TextBox>

Короткое объявление XAML

«+» не очень много разметки XAML

«-» нет доступа к IntelliSence (предложения) для атрибута InputScope (необходимо помнить все доступные значения InputScope)

Пример:

<TextBox Text="NumericTextBox"
InputScope="Number" Height="70" Width="460" Grid.Row="1">

Программно (в коде)

«+» может быть установлен динамически

«+» строгого типа (доступ к предложениям для значений InputScopeNameValue)

«-» много
примеров кода
(может быть сделано в одной строке кода):

// tbEmotions - is a textbox
tbEmotions.InputScope =
                new InputScope()
                {
                    Names = { new InputScopeName() { NameValue = InputScopeNameValue.Chat }
                    }
                };

Образец

* Откройте Visual Studio 2010 (или Express Edition) с установленными инструментами разработчика для Windows Phone 7
* Создайте новый проект «Приложение для Windows Phone»
* Откройте файл MainPage.xaml в конструкторе
* Откройте редактор XAML. Найдите элемент <Grid> с x: Name = ”ContentGrid”. Эта сетка может использоваться в качестве контейнера для наших
текстовых полей * Далее нам нужно добавить два RowDefinitions для сетки:

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

* Следующим шагом является добавление TextBox с высотой = 70 для сетки (ContentGrid). Просто добавьте объявление TextBox в свой XAML:

<TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0">
</TextBox>

* Добавьте еще один TextBox с InputScope (со свойством NameValue = ”Number”) и Height = ”70 ″ в ContentGrid:

<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
    <TextBox.InputScope>
        <InputScope>
            <InputScopeName  NameValue="Number" />
        </InputScope>
    </TextBox.InputScope>
</TextBox>

* Ваш ContentGrid XAML теперь будет выглядеть так:

<Grid x:Name="ContentGrid" Grid.Row="1">
 
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
 
    <TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0">
    </TextBox>
 
    <TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
        <TextBox.InputScope>
            <InputScope>
                <InputScopeName  NameValue="Number" />
            </InputScope>
        </TextBox.InputScope>
    </TextBox>
 
</Grid>

* Теперь откройте приложение в эмуляторе в режиме отладки (просто нажав кнопку F5). Нажмите на StandardTextBox и обратите внимание, что отображается макет SIP по умолчанию.

* Теперь нажмите на NumericTextBox и обратите внимание, что макет SIP теперь зависит от номера. Таким образом, мы можем легко ввести числовые данные.

* Теперь мы можем заметить, как SIP Layout изменяется в соответствии с указанным InputScope. Мы завершили первую часть нашего урока.

Типы InputScope

По сути, вы можете найти все доступные типы InputScope на веб-сайте MSDN , но я создал специальный код C # для отображения всех этих InputScopes на одной странице XAML (текстовое поле для каждого типа). Сначала добавьте ScrollViewer и поместите StackPanel внутри с вертикальной ориентацией.

<ScrollViewer>
            <StackPanel x:Name="MyVerticalStackPanel"  Margin="12,0,12,0" Orientation="Vertical"></StackPanel>
</ScrollViewer>

Затем скопируйте следующий код в свой класс:

public InputScopeSample()
{
    InitializeComponent();
 
    MyVerticalStackPanel.Children.Clear();
 
    int index = 0;
    foreach (int enumValue in GetValues(typeof(InputScopeNameValue)))
    {
        if (enumValue >= 0)
        {
            TextBox tb = new TextBox();
            tb.Text = Enum.GetName(typeof(InputScopeNameValue), enumValue);
            tb.InputScope = new InputScope();
            tb.InputScope.Names.Add(new InputScopeName()
            {
                NameValue = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), enumValue.ToString(), true)
            });
 
            Grid.SetRow(tb, index);
            MyVerticalStackPanel.Children.Add(tb);
 
            index++;
        }
    }
}
 
public static int[] GetValues(Type typeOfEnum)
{
    int[] values = new int[0];
    if (typeOfEnum.BaseType == typeof(Enum))
    {
        // public static members of enumeration
        var fields = typeOfEnum.GetFields(BindingFlags.Public | BindingFlags.Static);
 
        // set a size of a result array to number of members
        values = new int[fields.Length];
 
        for (int index = 0; index < fields.Length; index++)
        {
            values[index] = (int)fields[index].GetValue(null);
        }
    }
    return values;
}

В результате ваша страница должна быть заполнена различными InputScopes (изображение ниже). Теперь вы можете сравнить различные InputScopes и их макеты SIP.

 

Наиболее часто используемые InputScopes

По моему мнению, наиболее часто используемые типы InputScope.

  • номер

  • Номер телефона

  • Веб-сайт

  • Электронное письмо

39
Share: