Сложные приёмы разработки приложений для Windows Phone 8

Сенсорный пользовательский интерфейс

Разбить на страницы
Показывать лекцию целиком

Цель работы: освоить методы работы с сенсорным экраном

Экранная клавиатура

Устройства, работающие под управлением Windows Phone не оснащают аппаратной клавиатурой. Такая тенденция наблюдается сейчас повсеместно, поэтому особую важность во взаимодействии с пользователем приобретает экранная клавиатура устройства. Такая клавиатура вызывается автоматически, когда пользователь входит в режим редактирования полей, предусматривающих текстовый ввод. Кроме того, сейчас разработчик для платформы Windows Phone не может создавать собственные варианты клавиатуры, однако, это ограничение компенсируется большим набором вариантов встроенной в систему экранной клавиатуры.

Для того, чтобы задать тип клавиатуры, которая отображается при попытке пользователя редактировать содержимое элемента управления, поддерживающего ввод текста, нужно настроить свойство этого элемента ). Существует много вариантов такой клавиатуры. При заполнении этого свойства, например, для текстового поля, можно воспользоваться либо окном свойств, где представлен список доступных вариантов, либо, при заполнении его в XAML-коде – подсказкой IntelliSense. Можно отметить некоторые варианты встроенной клавиатуры, которые используются чаще других. Эти варианты проиллюстрированы в проекте P15_1 на странице Keyboard.xaml, рис. 45.1., Листинг 45.1.

(рис 45.1) Настройка типа клавиатуры, отображаемой при касании текстового поля 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,10,0,0" 
	         TextWrapping="Wrap" Text="Обычная клавиатура" 
			 VerticalAlignment="Top" Width="456"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,87,0,0" 
	         TextWrapping="Wrap" Text="Цифровая клавиатура" 
			 VerticalAlignment="Top" Width="456" InputScope="Number"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,164,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для чата" 
			 VerticalAlignment="Top" Width="456" InputScope="Chat"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,241,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для телефона" 
			 VerticalAlignment="Top" Width="456" InputScope="TelephoneNumber"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,318,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для URL" 
			 VerticalAlignment="Top" Width="456" InputScope="Url"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,395,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для формул" 
			 VerticalAlignment="Top" Width="456" InputScope="Formula"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,472,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для ввода текста" 
			 VerticalAlignment="Top" Width="456" InputScope="Text"/>
</Grid>

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

  • Number – цифровая клавиатура, предназначена для удобного ввода чисел.
  • Chat – клавиатура для приложений-чатов. Основная особенность – при вводе текста доступны подсказки, ускоряющие ввод и эмотиконы (значки, используемые для передачи настроения).
  • TelephoneNumber – имитирует клавиатуру телефона, служит для набора номера.
  • Url – используется для ввода URL-адресов, доступны кнопки для ввода частей адресов.
  • Formula – используется для ввода формул. При длительном касании кнопки "=" выводятся кнопки для ввода дополнительных специальных символов.
  • Text – используется для ввода и редактирования текста. В частности, при использовании этой разновидности клавиатуры доступны подсказки, которые ускоряют ввод, и функция автоматического исправления введенного текста.
    •

    На рис. 45.2. вы можете видеть клавиатуру для поля с InputScope, установленным в значение Formula.

    (рис 45.2) Клавиатура для ввода формул

    Дополнительные сведения об использовании экранной клавиатуры вы можете найти в материалах "How to change the on-screen keyboard input scope in Windows Phone" ("Как изменить область ввода экранной клавиатуры в Windows Phone", http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521152%28v=vs.105%29.aspx и "On-screen keyboard input scope index for Windows Phone" ("Перечень областей ввода экранной клавиатуры в Windows Phone", http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh393998%28v=vs.105%29.aspx.

    Особенности взаимодействия с сенсорным экраном

    Элементы управления, которыми мы пользовались до сих пор, позволяют обрабатывать стандартные варианты взаимодействия с ними с использованием обработчиков событий. Например, обработав событие Click кнопки можно задать реакцию системы на касание кнопки. Среди стандартных событий элементов управления можно обнаружить и другие события для обработки сенсорного ввода. Например, DoubleTap – для двойного касания, Hold – для удержания.

    Состав событий, связанных с сенсорным экраном для конкретного элемента управления отражает специфику его использования. В то же время, среди этих событий нет, например, таких, как события, служащие для обработки сложных жестов. Например – жеста Flick, когда пользователь касается экрана, быстро проводит пальцем и, не останавливая движения, отрывает палец от экрана. Например – популярных жестов сжатия/растяжения (Pinch/Zoom) для масштабирования объектов.

    Поддержку жестов можно реализовать самостоятельно, если обработать события ManipulationStarted (происходит при начале манипуляции), ManipulationDelta (происходит в процессе манипуляции, повторяется), и ManipulationCompleted (Происходит при завершении манипуляции). В проекте P15_1 использование манипуляций для перемещения окружности с градиентной заливкой по экрану показано на странице EventsAndGestures.xaml.

    Кроме того, можно обработать низкоуровневые события, воспользовавшись классом TouchPoint.

    Для того, чтобы упростить обработку жестов, можно воспользоваться библиотекой Windows Phone Toolkit – её можно подключить к проекту с помощью менеджера пакетов NuGet. Вот сайт проекта: http://phone.codeplex.com/. Найти библиотеку можно, введя в строку поиска запрос "wptoolkit". Эта библиотека, помимо набора элементов управления, предоставляет классы GestureService и GestureListener, предназначенные для обработки популярных жестов. В частности, поддерживаются следующие события:

  • GestureBegin – вызывается в начале касания
  • GestureCompleted – вызывается в конце касания
  • Tap – вызывается при выполнении жеста касания (палец касается экрана и быстро отрывается от экрана)
  • DoubleTap – вызывается при двойном касании экрана
  • Hold – вызывается при выполнении жеста удержания
  • DragStarted – вызывается в начале жеста перетаскивания
  • DragDelta – вызывается в процессе перетаскивания
  • DragCompleted – вызывается при окончании перетаскивания
  • Flick – вызывается когда пользователь касается экрана, быстро проводит пальцем и, не останавливая движения, отрывает палец от экрана
  • PinchStarted – вызывается в начале жеста сжатия/растяжения
  • PinchDelta – вызывается в процессе выполнения жеста сжатия/растяжения
  • PinchCompleted – вызывается в конце жеста сжатия/растяжения
    •

    Демонстрация обработки жестов Flick и Hold с помощью Windows Phone Toolkit сделана на примере прямоугольника на странице EventsAndGestures.xaml, рис. 45.3.

    (рис 45.3) Объекты, воспринимающие жесты и манипуляции

    Обратите внимание на то, как выглядит XAML-код страницы, на которой расположены элементы (Листинг 45.2). Здесь, во-первых, объявлено пространство имен toolkit. Во-вторых, для прямоугольника указаны обработчики событий Flick и Hold. По первому событию мы увеличиваем длину прямоугольника, по второму – сбрасываем прямоугольник в исходное состояние.

    <phone:PhoneApplicationPage
    x:Class="P15_1.EventsGestures"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot представляет корневую сетку, где размещается все содержимое страницы-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel содержит имя приложения и заголовок страницы-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="СЕНСОРНЫЙ ВВОД" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="жесты" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel – поместите здесь дополнительное содержимое-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Rectangle
                Fill="{StaticResource PhoneAccentBrush}" 
                HorizontalAlignment="Left" 
                Height="100" 
                Margin="147,109,0,0" 
                Stroke="Black" 
                VerticalAlignment="Top" 
                Width="100">
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener 
                        Flick="GestureListener_Flick"
                        Hold="GestureListener_Hold">

                    </toolkit:GestureListener>
                </toolkit:GestureService.GestureListener>
            </Rectangle>
            <TextBlock HorizontalAlignment="Left" Margin="24,25,0,0" TextWrapping="Wrap" 
Text="Жест скольжения для увеличеия размера, 
жест удержания - для возврата" VerticalAlignment="Top"/>
            <Ellipse x:Name="ellipseToDrag" HorizontalAlignment="Left" 
Height="100" Margin="147,399,0,0" Stroke="Black" 
VerticalAlignment="Top" Width="100" 
ManipulationDelta="Ellipse_ManipulationDelta">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#FFE51400" Offset="1"/>
                        <GradientStop Color="#FFF5F3F3"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <TextBlock HorizontalAlignment="Left" Margin="24,299,0,0" TextWrapping="Wrap" 
Text="Эту фигуру можно перемещать" VerticalAlignment="Top"/>

        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

    В Листинге 45.3 приведен код файла EventsGestures.xaml.cs. Необходимые пояснения к коду приведены в комментариях

    using Microsoft.Phone.Controls;
using System.Windows.Shapes;
using System.Windows.Media;

namespace P15_1
{
    public partial class EventsGestures : PhoneApplicationPage
    {
        //Трансформация для перемещения объекта
        private TranslateTransform dragTranslation;

        public EventsGestures()
        {
            InitializeComponent();
            //Инициализируем трансформацию
            dragTranslation = new TranslateTransform();
            //Назначаем её объекту
            ellipseToDrag.RenderTransform = this.dragTranslation;
        }
        //Обработчик события Hold
        private void GestureListener_Hold(object sender, GestureEventArgs e)
        {
            //Получим объект-отправитель событий
            Rectangle R = sender as Rectangle;
            //Сбросим ширину до 100 пикселей
            R.Width = 100;
        }

        private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            //Получим объект-отправитель событий
            Rectangle R = sender as Rectangle;
            //Увеличим на 10 пикселей ширину
            R.Width+=10;
        }

        //Обработчик соыбытия ManipulationDelta
        private void Ellipse_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            //Переместим объект в соответствии с координатами точки касания
            dragTranslation.X += e.DeltaManipulation.Translation.X;
            dragTranslation.Y += e.DeltaManipulation.Translation.Y;
        }
    }
}

    Выводы

    В этой лабораторной работе мы рассмотрели способы настройки экранной клавиатуры с помощью установки свойства InputScope текстового блока. Использование экранной клавиатуры, наилучшим образом подходящей для ввода данных конкретного текстового поля, повышает удобство работы с программой. Так же мы рассмотрели методику обработки жестов. Жесты позволяют расширить возможности по сенсорному взаимодействию пользователя и приложения. Используя жесты нужно следить за тем, чтобы они распознавались однозначно (не следует назначать элементу управления жесты, отдельные части которых могут быть интерпретированы как другие жесты, назначенные тому же элементу управления).

    Задание

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

    Дополнительные материалы

    К данной лекции подготовлено видеоприложение и демонстрационный программный проект.

    Страницы:

    Цель работы: освоить методы работы с сенсорным экраном

    Экранная клавиатура

    Устройства, работающие под управлением Windows Phone не оснащают аппаратной клавиатурой. Такая тенденция наблюдается сейчас повсеместно, поэтому особую важность во взаимодействии с пользователем приобретает экранная клавиатура устройства. Такая клавиатура вызывается автоматически, когда пользователь входит в режим редактирования полей, предусматривающих текстовый ввод. Кроме того, сейчас разработчик для платформы Windows Phone не может создавать собственные варианты клавиатуры, однако, это ограничение компенсируется большим набором вариантов встроенной в систему экранной клавиатуры.

    Для того, чтобы задать тип клавиатуры, которая отображается при попытке пользователя редактировать содержимое элемента управления, поддерживающего ввод текста, нужно настроить свойство этого элемента ). Существует много вариантов такой клавиатуры. При заполнении этого свойства, например, для текстового поля, можно воспользоваться либо окном свойств, где представлен список доступных вариантов, либо, при заполнении его в XAML-коде – подсказкой IntelliSense. Можно отметить некоторые варианты встроенной клавиатуры, которые используются чаще других. Эти варианты проиллюстрированы в проекте P15_1 на странице Keyboard.xaml, рис. 45.1., Листинг 45.1.

    (рис 45.1) Настройка типа клавиатуры, отображаемой при касании текстового поля 
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,10,0,0" 
	         TextWrapping="Wrap" Text="Обычная клавиатура" 
			 VerticalAlignment="Top" Width="456"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,87,0,0" 
	         TextWrapping="Wrap" Text="Цифровая клавиатура" 
			 VerticalAlignment="Top" Width="456" InputScope="Number"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,164,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для чата" 
			 VerticalAlignment="Top" Width="456" InputScope="Chat"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,241,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для телефона" 
			 VerticalAlignment="Top" Width="456" InputScope="TelephoneNumber"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,318,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для URL" 
			 VerticalAlignment="Top" Width="456" InputScope="Url"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,395,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для формул" 
			 VerticalAlignment="Top" Width="456" InputScope="Formula"/>
    <TextBox HorizontalAlignment="Left" Height="72" Margin="0,472,0,0" 
	         TextWrapping="Wrap" Text="Клавиатура для ввода текста" 
			 VerticalAlignment="Top" Width="456" InputScope="Text"/>
</Grid>

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

  • Number – цифровая клавиатура, предназначена для удобного ввода чисел.
  • Chat – клавиатура для приложений-чатов. Основная особенность – при вводе текста доступны подсказки, ускоряющие ввод и эмотиконы (значки, используемые для передачи настроения).
  • TelephoneNumber – имитирует клавиатуру телефона, служит для набора номера.
  • Url – используется для ввода URL-адресов, доступны кнопки для ввода частей адресов.
  • Formula – используется для ввода формул. При длительном касании кнопки "=" выводятся кнопки для ввода дополнительных специальных символов.
  • Text – используется для ввода и редактирования текста. В частности, при использовании этой разновидности клавиатуры доступны подсказки, которые ускоряют ввод, и функция автоматического исправления введенного текста.
    •

    На рис. 45.2. вы можете видеть клавиатуру для поля с InputScope, установленным в значение Formula.

    (рис 45.2) Клавиатура для ввода формул

    Дополнительные сведения об использовании экранной клавиатуры вы можете найти в материалах "How to change the on-screen keyboard input scope in Windows Phone" ("Как изменить область ввода экранной клавиатуры в Windows Phone", http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521152%28v=vs.105%29.aspx и "On-screen keyboard input scope index for Windows Phone" ("Перечень областей ввода экранной клавиатуры в Windows Phone", http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh393998%28v=vs.105%29.aspx.

    Особенности взаимодействия с сенсорным экраном

    Элементы управления, которыми мы пользовались до сих пор, позволяют обрабатывать стандартные варианты взаимодействия с ними с использованием обработчиков событий. Например, обработав событие Click кнопки можно задать реакцию системы на касание кнопки. Среди стандартных событий элементов управления можно обнаружить и другие события для обработки сенсорного ввода. Например, DoubleTap – для двойного касания, Hold – для удержания.

    Состав событий, связанных с сенсорным экраном для конкретного элемента управления отражает специфику его использования. В то же время, среди этих событий нет, например, таких, как события, служащие для обработки сложных жестов. Например – жеста Flick, когда пользователь касается экрана, быстро проводит пальцем и, не останавливая движения, отрывает палец от экрана. Например – популярных жестов сжатия/растяжения (Pinch/Zoom) для масштабирования объектов.

    Поддержку жестов можно реализовать самостоятельно, если обработать события ManipulationStarted (происходит при начале манипуляции), ManipulationDelta (происходит в процессе манипуляции, повторяется), и ManipulationCompleted (Происходит при завершении манипуляции). В проекте P15_1 использование манипуляций для перемещения окружности с градиентной заливкой по экрану показано на странице EventsAndGestures.xaml.

    Кроме того, можно обработать низкоуровневые события, воспользовавшись классом TouchPoint.

    Для того, чтобы упростить обработку жестов, можно воспользоваться библиотекой Windows Phone Toolkit – её можно подключить к проекту с помощью менеджера пакетов NuGet. Вот сайт проекта: http://phone.codeplex.com/. Найти библиотеку можно, введя в строку поиска запрос "wptoolkit". Эта библиотека, помимо набора элементов управления, предоставляет классы GestureService и GestureListener, предназначенные для обработки популярных жестов. В частности, поддерживаются следующие события:

  • GestureBegin – вызывается в начале касания
  • GestureCompleted – вызывается в конце касания
  • Tap – вызывается при выполнении жеста касания (палец касается экрана и быстро отрывается от экрана)
  • DoubleTap – вызывается при двойном касании экрана
  • Hold – вызывается при выполнении жеста удержания
  • DragStarted – вызывается в начале жеста перетаскивания
  • DragDelta – вызывается в процессе перетаскивания
  • DragCompleted – вызывается при окончании перетаскивания
  • Flick – вызывается когда пользователь касается экрана, быстро проводит пальцем и, не останавливая движения, отрывает палец от экрана
  • PinchStarted – вызывается в начале жеста сжатия/растяжения
  • PinchDelta – вызывается в процессе выполнения жеста сжатия/растяжения
  • PinchCompleted – вызывается в конце жеста сжатия/растяжения
    •

    Демонстрация обработки жестов Flick и Hold с помощью Windows Phone Toolkit сделана на примере прямоугольника на странице EventsAndGestures.xaml, рис. 45.3.

    (рис 45.3) Объекты, воспринимающие жесты и манипуляции

    Обратите внимание на то, как выглядит XAML-код страницы, на которой расположены элементы (Листинг 45.2). Здесь, во-первых, объявлено пространство имен toolkit. Во-вторых, для прямоугольника указаны обработчики событий Flick и Hold. По первому событию мы увеличиваем длину прямоугольника, по второму – сбрасываем прямоугольник в исходное состояние.

    <phone:PhoneApplicationPage
    x:Class="P15_1.EventsGestures"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot представляет корневую сетку, где размещается все содержимое страницы-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel содержит имя приложения и заголовок страницы-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="СЕНСОРНЫЙ ВВОД" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="жесты" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel – поместите здесь дополнительное содержимое-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Rectangle
                Fill="{StaticResource PhoneAccentBrush}" 
                HorizontalAlignment="Left" 
                Height="100" 
                Margin="147,109,0,0" 
                Stroke="Black" 
                VerticalAlignment="Top" 
                Width="100">
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener 
                        Flick="GestureListener_Flick"
                        Hold="GestureListener_Hold">

                    </toolkit:GestureListener>
                </toolkit:GestureService.GestureListener>
            </Rectangle>
            <TextBlock HorizontalAlignment="Left" Margin="24,25,0,0" TextWrapping="Wrap" 
Text="Жест скольжения для увеличеия размера, 
жест удержания - для возврата" VerticalAlignment="Top"/>
            <Ellipse x:Name="ellipseToDrag" HorizontalAlignment="Left" 
Height="100" Margin="147,399,0,0" Stroke="Black" 
VerticalAlignment="Top" Width="100" 
ManipulationDelta="Ellipse_ManipulationDelta">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#FFE51400" Offset="1"/>
                        <GradientStop Color="#FFF5F3F3"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <TextBlock HorizontalAlignment="Left" Margin="24,299,0,0" TextWrapping="Wrap" 
Text="Эту фигуру можно перемещать" VerticalAlignment="Top"/>

        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

    В Листинге 45.3 приведен код файла EventsGestures.xaml.cs. Необходимые пояснения к коду приведены в комментариях

    using Microsoft.Phone.Controls;
using System.Windows.Shapes;
using System.Windows.Media;

namespace P15_1
{
    public partial class EventsGestures : PhoneApplicationPage
    {
        //Трансформация для перемещения объекта
        private TranslateTransform dragTranslation;

        public EventsGestures()
        {
            InitializeComponent();
            //Инициализируем трансформацию
            dragTranslation = new TranslateTransform();
            //Назначаем её объекту
            ellipseToDrag.RenderTransform = this.dragTranslation;
        }
        //Обработчик события Hold
        private void GestureListener_Hold(object sender, GestureEventArgs e)
        {
            //Получим объект-отправитель событий
            Rectangle R = sender as Rectangle;
            //Сбросим ширину до 100 пикселей
            R.Width = 100;
        }

        private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            //Получим объект-отправитель событий
            Rectangle R = sender as Rectangle;
            //Увеличим на 10 пикселей ширину
            R.Width+=10;
        }

        //Обработчик соыбытия ManipulationDelta
        private void Ellipse_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            //Переместим объект в соответствии с координатами точки касания
            dragTranslation.X += e.DeltaManipulation.Translation.X;
            dragTranslation.Y += e.DeltaManipulation.Translation.Y;
        }
    }
}

    Выводы

    В этой лабораторной работе мы рассмотрели способы настройки экранной клавиатуры с помощью установки свойства InputScope текстового блока. Использование экранной клавиатуры, наилучшим образом подходящей для ввода данных конкретного текстового поля, повышает удобство работы с программой. Так же мы рассмотрели методику обработки жестов. Жесты позволяют расширить возможности по сенсорному взаимодействию пользователя и приложения. Используя жесты нужно следить за тем, чтобы они распознавались однозначно (не следует назначать элементу управления жесты, отдельные части которых могут быть интерпретированы как другие жесты, назначенные тому же элементу управления).

    Задание

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

    Дополнительные материалы

    К данной лекции подготовлено видеоприложение и демонстрационный программный проект.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^