«Натуральный» интерфейс в Metro приложениях СЕРГЕЙ БАЙДАЧНЫЙ СПЕЦИАЛИСТ ПО РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ SERGIY.BAYDACHNYY@MICROSOFT.COM MS SWIT. - презентация

1 «Натуральный» интерфейс в Metro приложениях СЕРГЕЙ БАЙДАЧНЫЙ СПЕЦИАЛИСТ ПО РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ MS SWIT 2012

2 2 О чем пойдет речь Стандартные элементы управления Touch Стандартная анимация

3 Windows 8 ориентирована на Touch

4 Стандартные элементы управления

5 Built-in controls реализуют Metro UI принципы

6 Разработаны для touch, мыши и клавиатуры

7 Native to HTML. Native to XAML.

8 8 Toggle Switch (XAML)

9 9 Toggle Switch (HTML)

10 Демонстрация

11 11 Простейшие элементы

12 12 Редактирование текста

13 13 Поведение текстовых элементов

14 14 Панели

15 15 List View Представление данных Grid ViewFlip View

16 16 Группировка, анимация, выбор Grouping Single & Multi Select Built-in Animations

17 17 Semantic zoom

18 18 GridView data templating (XAML)

19 Демонстрация

20 Touch

21 21 Взаимодействие с Windows 8 Press and hold to learnTap for primary actionSlide to dragSwipe to select Pinch to zoom Swipe from edge for app and system UI Rotate to rotate

22 22 Особенности платформы Унификация взаимодействия с платформой Поддержка натурального языка (жестов) по взаимодействию Облегчение жизни для разработчика

23 23 Нажатия Tapped - нажатие DoubleTapped – двойной щелчок Holding – задержка пальца или кнопки RightTapped – правая кнопка мыши или отпускание пальца после Holding Свойства элемента: IsTapEnabled IsDoubleTapEnabled IsHoldingEnabled IsRightTapEnabled

24 24 Манипуляция ManipulationStarting ManipulationStarted ManipulationDelta ManipulationCompleted ManipulationInertiaStarting ManipulationMode – задает тип обрабатываемых манипуляций

25 Демонстрация

26 26 Работа с курсором PointerPressed PointerReleased PointerWheelChanged PointerMoved PointerEntered PointerExited PointerCaptureLost PointerCanceled

27 Демонстрация

28 Встроенная анимация

29 29 Windows 8 Animation Library Входит в WinJS Содержит стандартные анимации Используют стандартные механизмы для работы Легкое использование

30 30 Два типа анимации Transition AddDeleteThemeTransition ContentThemeTransition EntranceThemeTransition ReorderThemeTransition RepositionThemeTransition EdgeUIThemeTransition Theme DragItemThemeAnimation DragOverThemeAnimation DropTargetItemThemeAnimation FadeInThemeAnimation FadeOutThemeAnimation PopInThemeAnimation и PopOutThemeAnimation RepositionThemeAnimation SplitCloseThemeAnimation и SplitOpenThemeAnimation TapDownThemeAnimation и TapUpThemeAnimation SwipeHintThemeAnimation SwipeBackThemeAnimation

31 Демонстрация

32 Вопросы?