Окна просмотра и содержимое

Direct Manipulation использует окна просмотра, содержимое и контакты для описания интерактивных элементов пользовательского интерфейса.

• Настройка окна просмотра
• Точки и границы привязки
• Сценарии смещения точки привязки и RTL
• Расширения функциональности
• Система координат
• Преобразования
• Состояние окна просмотра
• Связанные темы

Окно просмотра — это регион в окне, который может получать и обрабатывать входные данные от взаимодействия с пользователем. Окно просмотра представляет область содержимого, которое может видеть конечный пользователь в данный момент времени (также называемый клипом содержимого). Окно просмотра имеет несколько функций:

• Он управляет состоянием взаимодействия (например, когда содержимое готово к управлению, когда содержимое подвергается манипуляциям, когда содержимое находится в анимации инерции) и сопоставляет входные данные с преобразованиями вывода.
• Он содержит содержимое, которое перемещается в ответ на взаимодействие с пользователем. Это может быть html-элемент div (прокрутка), список с возможностью сдвига (Windows 8 начальный экран) или всплывающее меню для элемента управления выбора.

Окно просмотра создается путем вызова CreateViewport. В одном окне можно создать несколько окон просмотра, чтобы обеспечить широкие возможности пользовательского интерфейса.

Содержимое представляет элемент, который преобразуется в ответ на взаимодействие. Другими словами, содержимое — это то, что перемещается или масштабируется по мере сдвига или сдвига пользователя. Существует два типа содержимого:

• Основное содержимое — это единый встроенный элемент в окне просмотра, который реагирует на операции ввода и инерцию. Основное содержимое создается одновременно с окном просмотра и не может быть добавлено или удалено из окна просмотра. Поведение основного содержимого можно настроить с помощью точек прикрепления (см. далее).
• Дополнительное содержимое перемещается относительно перемещения основного содержимого. Дополнительное содержимое создается отдельно от окна просмотра и может быть добавлено или удалено из окна просмотра. Все преобразования вторичного содержимого вычисляются на основе преобразования основного содержимого. Для изменения способа вычисления преобразования на основе предполагаемого назначения элемента, определяемого его CLSID во время создания, можно применить определенные правила.

На этой схеме, показывающая до и после сдвига, для сдвига основного содержимого используется один контакт. Несмотря на то, что пользователь не взаимодействует напрямую с индикатором сдвига (вторичным содержимым), дополнительное содержимое перемещается по мере сдвига основного содержимого. Это дает визуальные подсказки о том, насколько далеко пользователь сдвигается.

Настройка окна просмотра

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

Сдвиг изменяет положение содержимого вдоль горизонтальной или вертикальной оси или обоих при сдвиге пользователем. При настройке преобразования для обеих осей содержимое свободно перемещается в любом направлении.

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

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

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

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

Это поведение можно переопределить, указав центр разблокировки, который задает центр масштабирования в центре контактов.

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

Точки и границы привязки

Анимация инерции выполняется после завершения манипуляции в результате снятия пальца с экрана (в случае сенсорного ввода) или в результате действия клавиатуры или мыши (например, клавиш со стрелками, страницы вверх/вниз, прокрутка колесика мыши и т. д.).

Анимация инерции определяется двумя фрагментами информации:

• Остальная точка анимации — окончательная конечная позиция конкретного компонента преобразования.
• Длительность анимации, кривая, скорость определяются типом точки отдыха.

На анимацию инерции влияют точки прикрепления и границы. Границы определяют максимальное и минимальное количество точек отдыха для содержимого. Если содержимое достигает границы во время инерции, будет применена граничная анимация. Точки прикрепления определяются в основном содержимом, чтобы изменить точку отдыха и саму кривую анимации инерции.

Точки привязки определяются с помощью SetSnapInterval , когда содержимое регулярно распределяется по местам, или с помощью SetSnapPoints , когда содержимое имеет неравномерное пространство. Ниже приведен пример точек прикрепления:

На схеме представлен фрагмент содержимого с рядом блоков подсодержимого — элементов новостей в приложении типа "Читатель новостей" или элементов в представлении сетки. Цель состоит в том, чтобы привязать левый край элемента к левому краю окна просмотра после окончания инерции.

Существует две группы типов точек прикрепления:

• Необязательный и обязательный. Необязательная точка прикрепления прикрепивает анимацию инерции, только если точка отдыха инерции находится рядом с точкой прикрепления. Обязательная точка прикрепления всегда привязывает анимацию инерции к указанной точке прикрепления.
• Одинарный или множественный. Тип точки прикрепления с несколькими точками прикрепления позволяет содержимому перемещаться за многие точки привязки, прежде чем перейти к отдыху в точке прикрепления, близкой к естественной точке отдыха. Один тип точки прикрепления выбирает следующую ближайшую точку прикрепления в качестве точки отдыха для анимации инерции.

На следующей схеме показано, как типы точек прикрепления изменяют положение остальной части анимации инерции.

На этой схеме начальная точка инерции помечается как "Начало", а естественная позиция конца инерции при отсутствии точек прикрепления — как "Конец". Вертикальные линии обмечают различные точки прикрепления. В этой таблице описывается, как каждый тип точки прикрепления влияет на конечную позицию анимации.

Сценарии смещения точки привязки и RTL

Смещение точки прикрепления и система координат применяются с помощью API SetSnapCoordinate , который смещает все точки прикрепления или интервалы прикрепления с помощью указанной системы смещения или координат.

Система координат очень полезна в сценариях RTL, где требуется описать точки привязки от левого края содержимого в обратном направлении. На предыдущей схеме SetSnapCoordinate используется с флагом DIRECTMANIPULATION_MOTION_TRANSLATEX и DIRECTMANIPULATION_COORDINATE_MIRRORED , который автоматически смещает точки привязки от левого края содержимого и предоставляет их в порядке справа налево: S1 — 0 пикселей, S2 — 50 пикселей (и т. д.). Любое смещение, заданное с помощью SetSnapCoordinate , будет автоматически смещено от левого края содержимого, включая правильный коэффициент масштабирования.

Вы почти всегда используете SetSnapCoordinate с заданным параметром источника , чтобы избежать установки точек привязки за пределами области содержимого.

Например, если окно просмотра имеет значение 200x200, а содержимое — 1000x200, а интерфейс — RTL, окно просмотра будет иметь левый край x=800 при первом появлении окна просмотра. Вызовите Метод SetSnapCoordinate с SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) , чтобы указать, что точки прикрепления должны вычисляться справа налево, начиная с правого края содержимого.

Расширения функциональности

Поведение — это объект, который можно прикрепить к окне просмотра, чтобы изменить способ обработки преобразования выходных данных основного или дополнительного содержимого окна просмотра. Объект поведения может повлиять на один или несколько аспектов манипуляции, таких как обработка входных данных или применение анимации инерции. Например, поведение автостроения влияет на анимацию инерции, выполняя анимацию прокрутки к одному концу основного содержимого. Поведение конфигурации между слайдами влияет на обработку входных данных direct manipulation, которая определяет, когда выполняется действие перекрестного слайда.

Объект поведения создается путем вызова CreateBehavior, добавляется в окно просмотра, а затем его поведение настраивается асинхронно. При удалении поведения из окна просмотра удаляются его эффекты.

Система координат

Существует три main системы координат, используемые прямой манипуляцией:

• Система координат клиента — описывает прямоугольник клиентского окна. Единицы измерения в пикселях.
• Система координат окна просмотра — описывает прямоугольник области в клиенте, которая может обрабатывать входные данные. Единицы измерения определяются приложением (с помощью SetViewportRect).
• Система координат содержимого — описывает прямоугольник или размер основного содержимого. Единицы измерения определяются приложением (с помощью SetContentRect).

Для всех трех систем координаты определяются относительно их соответствующих верхних левых источников и имеют положительное увеличение вправо и вниз. Эти системы координат показаны на следующей схеме. Конечный пользователь может просматривать или управлять только разделом содержимого в прямоугольнике окна просмотра.

Преобразования

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

• Преобразование содержимого — первоначальное преобразование, вычисленное прямой манипуляцией на основе манипуляции или инерции. Он фиксирует эффекты точек прикрепления, перил, превышения по умолчанию (манипуляция), превышения по умолчанию (инерция) и анимации ZoomToRect.
• Преобразование выходных данных — окончательное визуальное или выходное преобразование. Это сочетание как содержимого, так и синхронных преобразований.
• Преобразование синхронизации — вычисляется при вызове SyncContentTransform. Это помогает direct manipulation применять новое преобразование содержимого, предоставляемое приложением, а также поддерживать существующее преобразование выходных данных.
• Преобразование отображения — применяется приложением в рамках постобработки. Дополнительные сведения см. в разделе SyncDisplayTransform .

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

Состояние окна просмотра

При обработке входных данных окно просмотра управляет состоянием взаимодействия и сопоставлением входных данных с преобразованиями вывода. Проверьте состояние взаимодействия окна просмотра, вызвав GetStatus.

• Сборка — окно просмотра создается и пока не может обрабатывать входные данные. Чтобы обработать входные данные, вызовите IDirectManipulationViewport::Enable. Если параметр Enable не вызывается, окно просмотра переходит в состояние Отключено.

  Примечание

  Это начальное состояние взаимодействия.

• Включено — окно просмотра готово к обработке входных данных. Когда контакт выходит из строя (вызывается SetContact ) и обнаружена манипуляция, окно просмотра переходит в состояние Выполняется.

• Выполняется — окно просмотра в настоящее время обрабатывает входные данные и обновляет содержимое. При отмене контакта окно просмотра переходит в режим Инерция, если это настроено.

• Инерция — содержимое перемещается в анимации инерции. После завершения инерции окно просмотра перейдет в состояние Готово. Если в окне просмотра задано автоматическое отключение, оно перейдет с "Инерция" на "Готово", а затем на "Отключено".

• Готово — окно просмотра готово к обработке входных данных. Когда контакт выходит из строя (вызывается SetContact ) и обнаружена манипуляция, окно просмотра переходит в состояние Выполняется.

• Приостановлено — окно просмотра может стать приостановленным, если его входные данные были повышены до родительского элемента в цепочке SetContact . Это более подробно рассматривается в разделе Несколько портов просмотра: проверка нажатия и иерархия окна просмотра.

• Отключено — окно просмотра не будет обрабатывать входные данные или совершать обратные вызовы. Окно просмотра можно отключить в различных состояниях, вызвав IDirectManipulationViewport::D isable. Если в окне просмотра задано автоматическое отключение, оно автоматически перейдет в состояние Отключено после обработки манипуляции. Чтобы повторно включить отключенное окно просмотра, вызовите IDirectManipulationViewport::Enable.

Связанные темы

Несколько портов просмотра: проверка нажатия и иерархия окна просмотра, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform