День десятый. Ввод информации при помощи клавиатуры

Вступление

Для ввода информации используется реальная аппаратная или виртуальная клавиатура на сенсорном экране. Проблема заключается в размерах. Все мы знаем, что физические размеры устройств достаточно малы и разместить на экране таких аппаратов несколько десятков кнопок достаточно сложно, если оставлять кнопки большого размера. Поэтому зачастую кнопки остаются небольшими и ввод информации не такой удобный, как на настольных компьютерах или ноутбуках. С аппаратной выдвижной клавиатурой работать более удобно, но упомянутая выше проблема сохраняется – размеры кнопок невелики. Поэтому ввод информации при использовании мобильных устройств – одна из наиболее сложных проблем в удобстве пользования этих устройств.

Большинство телефонов сейчас не снабжены аппаратной клавиатурой, используя вместо нее виртуальную клавиатуру. Расссмотрим приемы работы с подобной клавиатурой на примерах. Также поговорим об элементе PasswordBox.

Большой секрет: подключаем настольную клавиатуру к эмулятору

Меня очень раздражало, что в эмуляторе при наборе текста нельзя было вводить символы, используя свою рабочую клавиатуру на настольном компьютере, как это было раньше в старых эмуляторах под Windows Mobile. Приходилось тыкать мышкой по маленьким кнопочкам. Оказывается, проблема решается очень просто. Достаточно нажать на клавишу Pause/Break на своей клавиатуре, чтобы переключиться на другой режим. Чтобы снова переключиться обратно на виртуальную клавиатуру, нажмите эту клавишу еще раз. Этот прием нужно использовать только в том случае, когда нужно быстро набрать какой-нибудь текст для текстового поля. Нужно понимать, что подобный способ не имеет ничего общего с реальным вводом информации на устройстве и вы не увидите виртуальную клавиатуру. В дальнейшем все примеры используют виртуальную клавиатуру.

InputScope

Если рассмотреть наиболее типичные для пользователя сценарии, то можно понять, что в большинстве случаев они повторяются. Так, например, клавиатура обычно используется для ввода номера телефона, имени контакта, ввода текстовой информации (например, сообщения электронной почты или SMS), ввода адреса электронной почты, адреса веб-ресурса и т.д.

Стоит заметить, что виртуальная клавиатура имеет более гибкие настройки по сравнению с аппаратной клавиатурой. Вы можете предложить пользователю тот вид клавиатуры, который наиболее подходит для решения текущей задачи. Например, если пользователю нужно набрать телефонный номер, то разумно предложить ему клавитуру с цифрами и и другими используемыми символами типа * или #. Например, мы можем вывести на экран только цифровую клавиатуру и клавиатуру со смайликами. Вот как будет выглядеть небольшой пример для двух текстовых полей в XAML:


<TextBox Height="100" />
<TextBox InputScope="TelephoneNumber" Height="100" />

Когда фокус получит первое текстовое поле, то отобразится стандартная клавиатура по умолчанию. Во втором случае отобразится клавиатура для набора телефонных номеров. Вот наиболее используемые виды клавиатур:

URL

У данной клавиатуры есть кнопка .com, позволяющая завершить ввод URL-адреса. Если удерживать кнопку несколько секунд, то появятся также варианты .net, .org, .edu. Локализованные версии телефонов могут иметь дополнительные варианты, например, .ru (я надеюсь).

Number

Обычная цифровая клавиатура. Кроме цифр используются различные математические символы (+, -, %) и другие знаки.

Text

Особенность у этой клавиатуры - наличие кнопки со смайликом. Нажав на кнопку, вы увидите большой список доступных смайликов. Подобная клавиатура пригодится в чатах и в программах мгновенных сообщений.

TelephoneNumber

Мы уже видели этот вариант - клавиатура для набора телефонных номеров.

EmailNameOrAddress

При вводе электронных адресов часто используются точки, собачки (@) и окончания доменов, типа .com или .net. Поэтому данные символы представлены в данной клавиатуре.

Используем Intellisense

Вариантов клавиатур слишком много, чтобы их помнить. Поэтому можно пойти на небольшую хитрость. Когда мы вводим просто InputScope="" в редакторе кода, то всплывающая подсказка не появляется. Поэтому чуть изменим код:


<TextBox Height="75">
	<TextBox.InputScope>
		<InputScope>
			<InputScopeName NameValue="Bopomofo" />
		</InputScope>
	</TextBox.InputScope>
</TextBox>

Если вам интересно, Bopomofo официальная фонетическая система ввода для Китайского языка. Вот полный список значений для InputScopeName:

Должен заметить, что большинство клавиатур не работает. Возможно, поддержка экзотических клавиатур будет осуществляться производителями телефонов.

Программный просмотр всех клавиатур

Для того, чтобы увидеть каждый случай можно, конечно, изменять это значение и перезапускать приложение; однако, мы воспользуемся другим способом. Для начала с помощью Reflection получим всевозможные значения этого перечисления. После этого для каждого значения перечисления создадим новое поле ввода и определим для него соответствующее значение свойства InputScope. Разметка формы при этом изменится следующим образом.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ScrollViewer BorderThickness="0" Height="280" VerticalAlignment="Top">
        <StackPanel x:Name="Elements">
            <StackPanel.Resources>
                <Style TargetType="TextBox">
                    <Setter Property="Margin" Value="10"/>
                </Style>
            </StackPanel.Resources>
        </StackPanel>
    </ScrollViewer>
</Grid>

При этом в момент создания и загрузки формы создадим следующий код. Здесь мы получаем все значения перечисления и для каждого значения создадим новое поле ввода и помещаем его на форму. При этом для каждого поля ввода задается текущее значение InputScope.


using System.Reflection;

foreach (var inputName in typeof(InputScopeNameValue).
     GetFields(BindingFlags.Public | BindingFlags.Static).Select(t => t.Name))
{
    InputScopeNameValue val = (InputScopeNameValue)(Enum.Parse(typeof(InputScopeNameValue), inputName, true));

    if (val > 0)
    {
        Elements.Children.Add(new TextBox()
        {
            Text = inputName,
            InputScope = new System.Windows.Input.InputScope
            {
                Names =  
{  
    new InputScopeName() 
        { 
            NameValue = val 
        } 
}
            }
        });
    }
}

При запуске приложения на форме будет созданы элементы управления. При установлении фокуса на каждое поле можно увидеть различные варианты виртуальной клавиатуры.

Программный запуск клавиатуры

Клавиатура показывается только при работе с текстовыми полями. Если по каким-то причинам вы хотите показать клавиатуру, не работая с текстовым полем (хороший пример - игра Виселица), то можно сделать следующее:

Разместите кнопку в приложении.
Разместите TextBox на странице, но сделайте ее невидимой для пользователя (можете сделать ее полностью прозрачной или вывести за пределы страницы). В этом случае пользователь не видит текстовое поле, которое тем не менее присутствует в приложении.
Установите обработчик события для кнопки, который установит Focus() для невидимого текстового поля.

Способ достаточно специфичный, но возможно вам пригодится.

PasswordBox

PasswordBox похож на TextBox, но имеет некоторые особенности. Во-первых, вводимый символа виден на экране, а затем заменяется на кружочек. Второй момент - вы можете заменить используемый по умолчанию кружочек на звездочку или другой символ при помощи свойства PasswordChar:


<PasswordBox x:Name="PassBox" PasswordChar="?" />