Flutter: прокачиваем AppBar & SliverAppBar
Во Flutter для создания панели инструментов используется хорошо всем известный AppBar, ну а когда нам нужна динамическая панель инструментов, которая покажет контент при свайпе, мы используем отличный виджет SliverAppBar.
Оба виджета позволяют сделать приложение чуточку красивее, что во Flutter, без сомнений, весьма просто.
Я видел много вопросов на StackOverflow и в группах Facebook о том, как можно изменить AppBar и SliverAppBar с точки зрения поведения или дизайна.
Давайте рассмотрим две задачи.
Задача 1
Мы хотим создать, не привинченный к верху экрана AppBar, но не так как делаем это обычно. Мы хотим добавить Drawer (боковое меню), на открытие которого AppBar будет реагировать. Вот и всё: наш собственный AppBar с нужными нам размерами.
Проблема в том что, как мы знаем, у AppBar есть размер по умолчанию, и изменить его мы не можем. Заглянув в исходный код, мы видим параметр appBar в Scaffold, видим, что он принимает виджет типа PreferredSizeWidget, теперь просматриваем исходный код AppBar и узнаём, что это только StatefulWidget, который реализует PreferredSizeWidget.
Дело за малым: просто создать наш собственный виджет, который реализует PreferredSizeWidget.
Вот что мы хотим
Как бы так сделать, чтобы при нажатии кнопки меню нашего AppBar открывалось боковое меню.
Мы можем сделать это двумя способами:
Используя `AppBar`
Вот так AppBar сможет контролировать открытие бокового меню внутри Scaffold.
class Sample1 extends StatelessWidget < @override Widget build(BuildContext context) < return SafeArea( child: Scaffold( drawer: Drawer(), appBar: MyCustomAppBar( height: 150, ), body: Center( child: FlutterLogo( size: MediaQuery.of(context).size.width / 2, ), ), ), ); >> class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget < final double height; const MyCustomAppBar(< Key key, @required this.height, >) : super(key: key); @override Widget build(BuildContext context) < return Column( children: [ Container( color: Colors.grey[300], child: Padding( padding: EdgeInsets.all(30), child: AppBar( title: Container( color: Colors.white, child: TextField( decoration: InputDecoration( hintText: "Search", contentPadding: EdgeInsets.all(10), ), ), ), actions: [ IconButton( icon: Icon(Icons.verified_user), onPressed: () =>null, ), ], ) , ), ), ], ); > @override Size get preferredSize => Size.fromHeight(height); > Используя кастомный виджет
Здесь у нас больше гибкости и можно использовать GlobalKey типа ScaffoldState или InheritedWidget от Scaffold, получив таким образом доступ к методам состояния для открытия Drawer.
import 'package:flutter/material.dart'; class Sample1 extends StatelessWidget < @override Widget build(BuildContext context) < return SafeArea( child: Scaffold( drawer: Drawer(), appBar: MyCustomAppBar( height: 150, ), body: Center( child: FlutterLogo( size: MediaQuery.of(context).size.width / 2, ), ), ), ); >> class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget < final double height; const MyCustomAppBar(< Key key, @required this.height, >) : super(key: key); @override Widget build(BuildContext context) < return Column( children: [ Container( color: Colors.grey[300], child: Padding( padding: EdgeInsets.all(30), child: Container( color: Colors.red, padding: EdgeInsets.all(5), child: Row(children: [ IconButton( icon: Icon(Icons.menu), onPressed: () < Scaffold.of(context).openDrawer(); >, ), Expanded( child: Container( color: Colors.white, child: TextField( decoration: InputDecoration( hintText: "Search", contentPadding: EdgeInsets.all(10), ), ), ), ), IconButton( icon: Icon(Icons.verified_user), onPressed: () => null, ), ]), ), ), ), ], ); > @override Size get preferredSize => Size.fromHeight(height); > Результат
Просто, не так ли? Давайте рассмотрим вторую задачу для SliverAppBar.
Задача 2
Как мы знаем, SliverAppBar работает следующим образом:
Что мы хотим, так это поместить Card, встроенную в наш SliverAppBar, как показано на следующем рисунке.
Подождите, но содержимое внутри SliverAppBar обрезается, поэтому не может выйти за рамки, что же делать?
Без паники, давайте посмотрим исходный код SliverAppBar и, о сюрприз, это StatefulWidget, использующий внутри SliverPersistentHeader, вот и весь секрет.
Мы создадим свой собственный SliverPersistentHeaderDelegate, чтобы использовать SliverPersistentHeader.
class Sample2 extends StatelessWidget < @override Widget build(BuildContext context) < return SafeArea( child: Material( child: CustomScrollView( slivers: [ SliverPersistentHeader( delegate: MySliverAppBar(expandedHeight: 200), pinned: true, ), SliverList( delegate: SliverChildBuilderDelegate( (_, index) =>ListTile( title: Text("Index: $index"), ), ), ) ], ), ), ); > > class MySliverAppBar extends SliverPersistentHeaderDelegate < final double expandedHeight; MySliverAppBar(); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) < return Stack( fit: StackFit.expand, overflow: Overflow.visible, children: [ Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", fit: BoxFit.cover, ), Center( child: Opacity( opacity: shrinkOffset / expandedHeight, child: Text( "MySliverAppBar", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w700, fontSize: 23, ), ), ), ), Positioned( top: expandedHeight / 2 - shrinkOffset, left: MediaQuery.of(context).size.width / 4, child: Opacity( opacity: (1 - shrinkOffset / expandedHeight), child: Card( elevation: 10, child: SizedBox( height: expandedHeight, width: MediaQuery.of(context).size.width / 2, child: FlutterLogo(), ), ), ), ), ], ); >@override double get maxExtent => expandedHeight; @override double get minExtent => kToolbarHeight; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; > Результат
Готово, обе задачи решены.
Вывод
Часто мы отчаиваемся, когда не находим каких-нибудь свойств у виджета, но надо лишь посмотреть его исходный код, чтобы понять как он реализован во Flutter, открыв для себя таким образом варианты реализации собственных виджетов.
- Программирование
- Интерфейсы
- Разработка под Android
- Dart
- Flutter
Тип элемента управления AppBar
В этом разделе содержатся сведения о поддержке microsoft модель автоматизации пользовательского интерфейса для типа элемента управления AppBar.
Панель приложения — это элемент пользовательского интерфейса, который предоставляет пользователю навигацию, команды и инструменты. Для приложений Магазина Windows панели приложений для приложений можно отобразить, нажав клавиши Windows + Z.
В следующих разделах определяются необходимые модель автоматизации пользовательского интерфейса древовидная структура, свойства, шаблоны элементов управления и события для типа элемента управления AppBar.
В этом разделе содержатся следующие подразделы.
- Типичная древовидная структура
- Релевантные свойства
- Обязательные события
- Релевантные события
- Связанные темы
Типичная древовидная структура
В следующей таблице представлен типичный элемент управления и представление содержимого дерева модель автоматизации пользовательского интерфейса, относящегося к элементам управления AppBar, и описание того, что может содержаться в каждом представлении. Кнопка является наиболее распространенным элементом в AppBar , но также возможны другие элементы управления, вызывающие действия для приложения. Элемент AppBar также может иметь 0 или более разделителей (тип элемента управления «Разделитель«), которые отображаются в представлении элемента управления в расположении между другими элементами управления. Дополнительные сведения о дереве модель автоматизации пользовательского интерфейса см. в разделе Общие сведения о дереве модель автоматизации пользовательского интерфейса.
- AppBar
- Button (0 или более)
- Другие элементы управления (0 или более)
- Неприменимо
- Button (0 или более)
- Другие элементы управления (0 или более)
Релевантные свойства
В следующей таблице перечислены свойства модель автоматизации пользовательского интерфейса, значение или определение которых особенно важно для элементов управления, реализующих тип элемента управления AppBar. Дополнительные сведения о свойствах модель автоматизации пользовательского интерфейса см. в разделе Извлечение свойств из элементов модель автоматизации пользовательского интерфейса.
Свойство модели автоматизации пользовательского интерфейса Значение Примечания UIA_AutomationIdPropertyId См. примечания. Значение этого свойства должно быть уникальным среди всех одноранговых элементов в необработанном представлении дерева модель автоматизации пользовательского интерфейса. UIA_BoundingRectanglePropertyId См. примечания. Значение, представляемое этим свойством, должно включать все содержащиеся в нем элементы управления. UIA_ControlTypePropertyId AppBar UIA_IsContentElementPropertyId Ложь. Элемент управления панелью приложения не включается в представление содержимого дерева модель автоматизации пользовательского интерфейса. UIA_IsControlElementPropertyId TRUE Элемент управления панелью приложения всегда включается в представление элемента управления дерева модель автоматизации пользовательского интерфейса. UIA_IsKeyboardFocusablePropertyId См. примечания Если элемент управления может получать фокус клавиатуры, он должен поддерживать это свойство. Элементы управления на панели приложения обычно могут фокусироваться с клавиатуры. UIA_IsOffscreenPropertyId См. примечания. Значение этого свойства зависит от того, можно ли видеть элемент управления на экране. UIA_LabeledByPropertyId Null Элементы управления панели приложения обычно не имеют метки. UIA_LocalizedControlTypePropertyId См. примечания. Локализованная строка, соответствующая типу элемента управления AppBar . Значение по умолчанию — «панель приложений» для en-US или english (США). UIA_NamePropertyId См. примечания. Элементу управления панель приложений не требуется имя, если приложение не имеет более одной панели приложения. Если в приложении несколько строк приложения, используйте это свойство для предоставления различающихся имен, таких как «Сверху» или «Снизу». Обязательные события
В следующей таблице перечислены события модель автоматизации пользовательского интерфейса, которые требуются для поддержки элементов управления панели приложения. Дополнительные сведения о событиях см. в разделе UI Automation Events Overview.
Событие модель автоматизации пользовательского интерфейса Примечания UIA_AutomationFocusChangedEventId UIA_BoundingRectanglePropertyId событие изменения свойства. UIA_IsEnabledPropertyId событие изменения свойства. Если элемент управления поддерживает свойство IsEnabled , он должен поддерживать это событие. UIA_IsOffscreenPropertyId событие изменения свойства. Если элемент управления поддерживает свойство IsOffscreen , он должен поддерживать это событие. UIA_StructureChangedEventId Релевантные события
В следующей таблице перечислены события модель автоматизации пользовательского интерфейса, которые особенно важны для элементов управления, реализующих тип элемента управления AppBar, но не обязательного.
Событие модель автоматизации пользовательского интерфейса Примечания UIA_MenuClosedEventId Реализации платформы могут вызывать это событие при закрытии элемента управления панели приложения. UIA_MenuOpenedEventId Реализации платформы могут вызывать это событие при открытии элемента управления панели приложения. IUIAutomationPropertyChangedEventHandler Обработчик событий изменения свойства. Связанные темы
Основные понятия
Справочные материалы
App Bar Класс
Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
Представляет элемент управления контейнером, содержащий компоненты пользовательского интерфейса приложения для управления командами и взаимодействиями.
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)] /// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)] /// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)] class AppBar : ContentControl[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)] [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)] [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)] public class AppBar : ContentControlPublic Class AppBar Inherits ContentControl-or- content Наследование
Object IInspectable DependencyObject UIElement FrameworkElement Control ContentControl AppBar
ПроизводныйКомментарии
AppBar — это базовый класс для CommandBar, который обеспечивает более широкие функциональные возможности. Мы рекомендуем использовать элемент управления CommandBar в приложениях AppBar вместо .
Вы можете открыть и закрыть панель приложения программным способом, задав свойство IsOpen . События Opening, Opened, Closing и Closed можно использовать для реагирования на открываемую или закрытую панель приложения.
По умолчанию панель приложения закрывается (закрывается), когда пользователь взаимодействует с приложением в любом месте за пределами панели приложения. Закрытие панели приложения таким образом называется легким закрытием. Вы можете управлять закрытием панели приложения, задав свойство IsSticky . Если панель приложения липкая, она не закрывается с помощью жеста легкого закрытия . Панель приложения остается видимой, пока пользователь не щелкнут правой кнопкой мыши или не нажмет многоточие [**].
Конструкторы
Инициализирует новый экземпляр класса AppBar .
Свойства
Возвращает или задает ключ доступа (мнемонический) для этого элемента.
Возвращает или задает исходный элемент, предоставляющий ключ доступа область для этого элемента, даже если он не находится в визуальном дереве исходного элемента.
Возвращает отрисованную высоту объекта FrameworkElement. См. заметки.
Возвращает положение этого элемента UIElement относительно его родительского элемента, вычисленное во время прохода упорядочения процесса макета.
Возвращает размер, вычисленный этим элементом UIElement во время упорядочения процесса макета.
Возвращает тему пользовательского интерфейса, которая в настоящее время используется элементом , которая может отличаться от RequestedTheme.
Возвращает ширину отображаемого элемента FrameworkElement. См. заметки.
Возвращает или задает значение, определяющее, может ли этот элемент UIElement быть целевым объектом перетаскивания для операций перетаскивания.
Возвращает или задает значение, указывающее, получает ли элемент автоматически фокус при взаимодействии с ним.
Возвращает или задает значение, указывающее, может ли отключенный элемент управления получать фокус.
Возвращает или задает кисть, которая предоставляет фон элемента управления .
Возвращает или задает значение, указывающее, насколько далеко фон расширяется относительно границы этого элемента.
Возвращает универсальный код ресурса (URI), представляющий базовый URI для созданного в XAML объекта во время загрузки XAML. Это свойство полезно для разрешения URI во время выполнения.
Возвращает или задает кисть, описывающую заливку границы элемента управления.
Возвращает или задает толщину границы элемента управления.
Возвращает или задает значение, указывающее, что отображаемое содержимое должно кэшироваться в виде составного растрового изображения, если это возможно.
Возвращает или задает значение, указывающее, может ли UIElement быть кандидатом для привязки прокрутки.
Возвращает или задает значение, указывающее, можно ли перетаскивать элемент как данные в операции перетаскивания.
Возвращает или задает центральную точку элемента, то есть точку, о которой происходит поворот или масштабирование. Влияет на позицию отрисовки элемента.
Возвращает или задает единый интервал между символами в единицах 1/1000 em.
Возвращает или задает объект RectangleGeometry, используемый для определения структуры содержимого элемента UIElement.
Возвращает или задает значение, указывающее, отображаются ли кнопки значков, когда панель приложения не полностью открыта.
Определяет свойство зависимости ClosedDisplayMode .
Возвращает или задает свойство, объявляющее альтернативные режимы композиции и смешивания для элемента в родительском макете и окне. Это относится к элементам, участвующим в смешанном пользовательском интерфейсе XAML/Microsoft DirectX.
Возвращает или задает содержимое ContentControl.
Возвращает или задает шаблон данных, используемый для отображения содержимого ContentControl.
Возвращает корневой элемент шаблона данных, заданного свойством ContentTemplate .
Получает или задает объект выделения, который изменяет DataTemplate для применения к содержимому на основе данных об обработке сведений об элементе содержимого или его контейнере во время выполнения.
Возвращает или задает коллекцию элементов стиля перехода , применяемых к содержимому ContentControl.
Возвращает или задает всплывающий элемент, связанный с этим элементом.
Возвращает или задает радиус для углов границы элемента управления.
Возвращает или задает контекст данных для Объекта FrameworkElement. Часто контекст данных используется, когда FrameworkElement использует расширение разметки и участвует в привязке данных.
Возвращает или задает ключ, который ссылается на стиль по умолчанию для элемента управления. Авторы пользовательских элементов управления используют это свойство для изменения стиля по умолчанию, используемого их элементом управления.
Возвращает или задает путь к файлу ресурсов, который содержит стиль по умолчанию для элемента управления .
Возвращает размер, вычисленный этим элементом UIElement во время прохождения меры процесса макета.
Всегда возвращается null в приложении Windows App SDK. Вместо этого используйте DispatcherQueue .
Возвращает объект , DispatcherQueue с которым связан данный объект. DispatcherQueue представляет объект, который может получить доступ к потоку DependencyObject пользовательского интерфейса, даже если код инициируется потоком, не относящегося к пользовательскому интерфейсу.
Возвращает или задает значение, указывающее предпочтительное значение элемента управления для воспроизведения звуков.
Возвращает или задает значение, указывающее, закрывается ли отображение ключа доступа при вызове ключа доступа.
Возвращает или задает направление потока текста и других элементов пользовательского интерфейса в любом родительском элементе, управляющего их макетом. Этому свойству можно присвоить значение LeftToRight или RightToLeft . RightToLeft Для FlowDirection любого элемента устанавливается выравнивание справа, порядок чтения — справа налево, а макет элемента управления — справа налево.
Возвращает значение, указывающее, имеет ли этот элемент управления фокус, и режим, с помощью которого был получен фокус.
Возвращает или задает внешнее поле визуального элемента фокуса для FrameworkElement.
Получает или задает кисть, используемую для рисования внешней границы визуального HighVisibility элемента или Reveal фокуса для FrameworkElement.
Возвращает или задает толщину внешней границы визуального элемента или Reveal фокуса HighVisibility для FrameworkElement.
Получает или задает кисть, используемую для рисования внутренней границы визуального HighVisibility элемента или Reveal фокуса для FrameworkElement.
Возвращает или задает толщину внутренней границы визуального элемента или Reveal фокуса HighVisibility для FrameworkElement.
Возвращает или задает шрифт, используемый при отображении текста в элементе управления.
Возвращает или задает размер текста в этом элементе управления.
Получение или установка межсимвольного интервала.
Возвращает или задает стиль, в котором отображается текст.
Возвращает или задает толщину указанного шрифта.
Возвращает или задает кисть, которая описывает основной цвет.
Возвращает или задает предполагаемую высоту элемента FrameworkElement.
Возвращает или задает значение, указывающее, настраивает ли платформа автоматически визуальные свойства элемента при включении тем с высокой контрастностью.
Возвращает или задает характеристики горизонтального выравнивания, применяемые к Объекту FrameworkElement при его создании в родительском элементе макета, например панели или элемента управления элементами.
Возвращает или задает способ горизонтального выравнивания содержимого элемента управления.
Возвращает или задает значение, указывающее, определяет ли элемент собственный ключ доступа область.
Возвращает или задает значение, определяющее, может ли событие DoubleTapped исходить из этого элемента.
Возвращает или задает значение, указывающее, может ли пользователь взаимодействовать с элементом управления.
Возвращает или задает значение, указывающее, ограничен ли фокус элементом управления, когда пользователь нажимает кнопку A/Select на игровом контроллере.
Возвращает или задает значение, указывающее, может ли фокус быть ограничен элементом управления, когда пользователь нажимает кнопку A/Select на игровом контроллере.
Возвращает или задает значение, указывающее, может ли автономная область этого элемента UIElement возвращать истинные значения для проверки попадания.
Возвращает или задает значение, определяющее, может ли событие Holding исходить из этого элемента.
Возвращает значение, указывающее, был ли элемент добавлен в дерево элементов и готов ли он к взаимодействию.
Возвращает или задает значение, указывающее, открыт ли элемент AppBar .
Определяет свойство зависимости IsOpen .
Возвращает или задает значение, определяющее, может ли событие RightTapped исходить из этого элемента.
Возвращает или задает значение, указывающее, не закрывается ли AppBar при закрытии света.
Определяет свойство зависимости IsSticky .
Возвращает или задает значение, показывающее, включается ли элемент управления в переходы по ТАВ.
Возвращает или задает значение, определяющее, может ли событие Tapped исходить из этого элемента.
Возвращает или задает значение, указывающее, включено ли автоматическое увеличение текста в соответствии с параметром системного размера текста.
Возвращает или задает значение, указывающее, отображает ли подсказка элемента управления сочетание клавиш для связанного ускорителя клавиатуры.
Возвращает или задает значение, указывающее подсказку элемента управления, отображающую сочетание клавиш ускорителя.
Возвращает коллекцию сочетаний клавиш, которые вызывают действие с помощью клавиатуры.
Ускорители обычно назначаются кнопкам или пунктам меню.
Пример меню, в котором показаны сочетания клавиш для различных пунктов меню
Возвращает или задает значение, указывающее, насколько далеко слева или справа находится подсказка клавиши относительно UIElement.
Возвращает или задает значение, указывающее, где находится подсказка клавиши доступа относительно границы UIElement.
Возвращает или задает значение, указывающее элемент, на который нацелена подсказка клавиши доступа.
Возвращает или задает значение, указывающее, насколько далеко находится подсказка клавиши относительно элемента пользовательского интерфейса.
Возвращает или задает сведения о языке локализации и глобализации, которые применяются к Объекту FrameworkElement, а также ко всем дочерним элементам текущего FrameworkElement в представлении объекта и в пользовательском интерфейсе.
Возвращает или задает значение, указывающее, является ли область за пределами закрывающегося пользовательского интерфейса затемнённой.
Определяет свойство зависимости LightDismissOverlayMode .
Возвращает коллекцию объектов XamlLight, присоединенных к этому элементу.
Возвращает или задает значение ManipulationModes , используемое для поведения UIElement и взаимодействия с жестами. Установка этого значения позволяет обрабатывать события манипуляции из этого элемента в коде приложения.
Возвращает или задает внешнее поле объекта FrameworkElement.
Возвращает или задает ограничение максимальной высоты объекта FrameworkElement.
Возвращает или задает ограничение максимальной ширины объекта FrameworkElement.
Возвращает или задает ограничение минимальной высоты объекта FrameworkElement.
Возвращает или задает ограничение минимальной ширины элемента FrameworkElement.
Возвращает или задает идентифицирующие имя объекта. Когда обработчик XAML создает дерево объектов из разметки XAML, код времени выполнения может ссылаться на объект, объявленный XAML, по этому имени.
Возвращает или задает степень непрозрачности объекта.
Возвращает или задает ScalarTransition, который анимирует изменения в свойстве Opacity.
Получение или установка отбивки внутри элемента управления.
Возвращает родительский объект этого объекта FrameworkElement в дереве объектов.
Возвращает набор всех захваченных указателей, представленных в виде значений указателя .
Возвращает или задает проекцию перспективы (трехмерный эффект), применяемую при отрисовке этого элемента.
Возвращает или задает курсор, отображаемый, когда указатель находится над этим элементом. По умолчанию имеет значение NULL, указывающее на отсутствие изменения курсора.
Представляет элемент управления контейнером, содержащий компоненты пользовательского интерфейса приложения для управления командами и взаимодействиями.
Возвращает окончательный размер отрисовки элемента UIElement. Использовать не рекомендуется. См. примечания.
Возвращает или задает сведения о преобразовании, влияющие на положение отрисовки элемента UIElement.
Возвращает или задает точку начала любого возможного преобразования отрисовки, объявленного RenderTransform, относительно границ UIElement.
Возвращает или задает тему пользовательского интерфейса, используемую uiElement (и его дочерними элементами) для определения ресурса. Тема пользовательского интерфейса, указанная с помощью RequestedTheme , может переопределить запрошенныйTheme на уровне приложения.
Возвращает или задает значение, указывающее, поддерживает ли элемент пользовательского интерфейса режим мыши, который эмулирует взаимодействие с указателями с устройствами ввода без указателя, такими как клавиатура или игровой контроллер.
Возвращает локально определенный словарь ресурсов. В XAML элементы ресурсов можно установить в качестве дочерних элементов объекта элемента свойства с помощью синтаксиса frameworkElement.Resources неявной коллекции XAML.
Возвращает или задает угол поворота по часовой стрелке в градусах. Поворачивается относительно RotationAxis и CenterPoint. Влияет на позицию отрисовки элемента.
Возвращает или задает ось для поворота элемента.
Возвращает или задает scalarTransition, который анимирует изменения свойства Rotation.
Возвращает или задает масштаб элемента. Масштабируется относительно Элемента CenterPoint. Влияет на позицию отрисовки элемента.
Возвращает или задает Vector3Transition, который анимирует изменения в свойстве Scale.
Возвращает или задает эффект тени, приведение к элементу .
Возвращает или задает стиль экземпляра, который применяется к этому объекту во время макета и отрисовки.
Возвращает или задает значение, изменяющее работу tabbing и TabIndex для этого элемента управления.
Возвращает или задает значение, определяющее порядок, в котором элементы получают фокус при переходе пользователя по элементам управления с помощью клавиши TAB .
Возвращает или задает значение, изменяющее работу tabbing и UIElement.TabIndex для этого элемента управления.
Для Windows 10 Creators Update (сборка 10.0.15063) и более поздней версии свойство TabFocusNavigation доступно в базовом классе UIElement для включения объектов в последовательность вкладок, не использующих ControlTemplate.
Возвращает или задает произвольное значение объекта, которое можно использовать для хранения пользовательских сведений об этом объекте.
Получает или задает шаблон элемента управления. Шаблон элемента управления определяет внешний вид элемента управления в пользовательском интерфейсе и определяется в разметке XAML.
Возвращает объект , предоставляющий вычисляемые значения, на которые можно ссылаться как на источники расширений разметки при определении шаблонов для элемента управления AppBar .
Возвращает или задает эффект трехмерного преобразования, применяемый при отрисовке этого элемента.
Возвращает или задает матрицу преобразования, применяемую к элементу .
Возвращает или задает коллекцию элементов стиля перехода , применяемых к UIElement.
Возвращает или задает положение отрисовки x, y и z элемента.
Возвращает или задает Vector3Transition, который анимирует изменения свойства Translation.
Возвращает коллекцию триггеров для анимаций, определенных для FrameworkElement. Не часто используется. См. заметки.
Возвращает или задает значение, определяющее, должна ли отрисовка объекта и его визуального поддеревь использовать поведение округления, которое выравнивает отрисовку по целым пикселям.
Возвращает или задает значение, указывающее, использует ли элемент управления визуальные элементы фокуса, нарисованные системой, или визуальные элементы фокуса, определенные в шаблоне элемента управления.
Возвращает или задает характеристики вертикального выравнивания, применяемые к Объекту FrameworkElement при его создании в родительском объекте, например панели или элемента управления элементами.
Возвращает или задает способ вертикального выравнивания содержимого элемента управления.
Возвращает или задает видимость объекта UIElement. Невидимый UIElement объект не отображается и не передает нужный размер макету.
Возвращает или задает объект , XamlRoot в котором просматривается данный элемент.
Возвращает или задает объект, который получает фокус, когда пользователь нажимает на панель направления (D-pad) игрового контроллера.
Возвращает или задает значение, указывающее стратегию, используемую для определения целевого элемента навигации вниз.
Возвращает или задает значение, которое включает или отключает навигацию с помощью стрелков с помощью клавиатуры.
Возвращает или задает объект, который получает фокус, когда пользователь нажимает слева на панели направления (D-pad) игрового контроллера.
Возвращает или задает значение, указывающее стратегию, используемую для определения целевого элемента левой навигации.
Возвращает или задает объект, который получает фокус, когда пользователь нажимает прямо на панель направления (D-pad) игрового контроллера.
Возвращает или задает значение, указывающее стратегию, используемую для определения целевого элемента правой навигации.
Возвращает или задает объект, который получает фокус, когда пользователь нажимает кнопку управления направлением (D-pad) игрового контроллера.
Возвращает или задает значение, указывающее стратегию, используемую для определения целевого элемента навигации вверх.
Методы
Добавляет обработчик перенаправленного события для указанного перенаправленного события, помещая этот обработчик в коллекцию обработчиков текущего элемента. Укажите handledEventsToo как true , чтобы был вызван предоставленный обработчик, даже если событие обрабатывается в другом месте.
Загружает соответствующий шаблон элемента управления, чтобы можно было ссылаться на его части.
Размещает дочерние объекты и определяет размер элемента UIElement. Родительские объекты, реализующие пользовательский макет для своих дочерних элементов, должны вызывать этот метод из реализаций переопределения макета, чтобы сформировать рекурсивное обновление макета.
Предоставляет поведение для прохода «Упорядочить» макета. Классы могут переопределить этот метод, чтобы определить собственное поведение передачи «Упорядочить».
Отменяет текущую обработку прямых манипуляций (системное сдвига или масштабирование) в любом родительском элементе ScrollViewer , содержающем текущий элемент UIElement.
Задает запись указателя на элемент UIElement. После захвата только элемент, имеющий запись, будет запускать события, связанные с указателем.
Очищает локальное значение свойства зависимостей.
Извлекает объект с указанным именем идентификатора.
Позволяет подклассу UIElement предоставлять дочерние элементы, помогающие в разрешении сенсорного нацеливания.
Попытка задать фокус для данного элемента.
Возвращает любое базовое значение, установленное для свойства зависимостей, которое применяется в случаях, когда анимация не активна.
Возвращает BindingExpression , представляющее привязку к указанному свойству.
Позволяет подклассу UIElement предоставлять дочерние элементы, которые принимают участие в фокусе tab.
Извлекает именованный элемент в визуальном дереве ControlTemplate , созданном экземпляром.
Возвращает текущее действующее значение свойства зависимостей из DependencyObject.
Извлекает объект , Visual в который разрешается элемент .
При реализации в производном классе включает создание визуального дерева для каждого состояния для шаблона элемента управления в коде, а не путем загрузки XAML для всех состояний при запуске элемента управления.
Делает недействительным состояние упорядочения (макет) для UIElement. После аннулирования макет UIElement будет обновлен, что будет происходить асинхронно.
Делает недействительным состояние измерения (макет) для элемента UIElement.
Делает недействительным состояние окна просмотра для UIElement , используемого для вычисления действующего окна просмотра.
Обновления DesiredSizeэлемента UIElement. Как правило, объекты, реализующие пользовательский макет для дочерних элементов макета, вызывают этот метод из собственных реализаций MeasureOverride , чтобы сформировать рекурсивное обновление макета.
Обеспечивает поведение для прохода «Measure» цикла макета. Классы могут переопределить этот метод, чтобы определить собственное поведение передачи «Measure».
Вызывается всякий раз, когда код приложения или внутренние процессы (такие как перестроение передачи макета) вызывают Метод ApplyTemplate. Проще говоря, это означает, что метод вызывается непосредственно перед отображением элемента пользовательского интерфейса в приложении. Переопределите этот метод, чтобы повлиять на логику post-template по умолчанию класса.
Вызывается перед событием CharacterReceived .
Вызывается при изменении элемента AppBar с видимого на скрытое.
Вызывается, когда элемент AppBar начинает меняться с видимого на скрытый.
Вызывается при изменении значения свойства Content .
Вызывается при изменении значения свойства ContentTemplate .
Вызывается при изменении значения свойства ContentTemplateSelector .
При реализации в производном классе возвращает реализации AutomationPeer для конкретного класса для инфраструктуры Microsoft модель автоматизации пользовательского интерфейса.
Переопределите этот метод, чтобы реализовать поведение макета и логики при удалении элементов из свойства содержимого или дочерних элементов класса.
Вызывается перед событием DoubleTapped .
Вызывается перед событием DragEnter .
Вызывается перед событием DragLeave .
Вызывается перед событием DragOver .
Вызывается перед событием Drop .
Вызывается перед событием GotFocus .
Вызывается перед событием Holding .
Вызывается при обработке сочетания клавиш (или ускорителя) в приложении. Переопределите этот метод для обработки реакции приложения при вызове ускорителя клавиатуры.
Вызывается перед событием KeyDown .
Вызывается перед событием KeyUp .
Вызывается перед событием LostFocus .
Вызывается перед событием ManipulationDelta .
Вызывается перед событием ManipulationStarted .
Вызывается при изменении элемента AppBar с скрытого на видимый или при первом отображении.
Вызывается, когда элемент AppBar начинает меняться с скрытого на видимый или начинает отображаться впервые.
Вызывается перед событием PointerCanceled .
Вызывается перед событием PointerCaptureLost .
Вызывается перед событием PointerExited .
Вызывается перед событием PointerMoved .
Вызывается перед событием PointerPressed .
Вызывается перед событием PointerReleased .
Вызывается перед событием PointerWheelChanged .
Вызывается перед событием PreviewKeyDown .
Вызывается перед событием PreviewKeyUp .
Вызывается непосредственно перед обработкой сочетания клавиш (или ускорителя) в приложении. Вызывается всякий раз, когда код приложения или внутренние процессы вызывают ProcessKeyboardAccelerators. Переопределите этот метод, чтобы повлиять на обработку ускорителя по умолчанию.
Вызывается перед событием RightTapped .
Вызывается перед событием Tapped .
Определяет свойство, которое можно анимировать.
При переопределении в производном классе определяет свойство, которое можно анимировать.
Возвращает локальное значение свойства зависимостей, если задано локальное значение.
Регистрирует функцию уведомления для прослушивания изменений определенной DependencyProperty в этом экземпляре DependencyObject .
Освобождает записи указателя для захвата одного конкретного указателя данным элементом UIElement.
Освобождает все записи указателей, хранящиеся в этом элементе.
Освобождает элемент управления от ограничений фокусировки, поддерживающих взаимодействие с игровым контроллером (где IsFocusEngaged имеет значение true).
Удаляет указанный обработчик перенаправленных событий из этого элемента UIElement. Как правило, рассматриваемый обработчик был добавлен с помощью AddHandler.
Присоединяет привязку к Объекту FrameworkElement с помощью предоставленного объекта привязки.
Задает локальное значение свойства зависимостей для Объекта DependencyObject.
Начинает указанную анимацию элемента.
Инициирует запрос к платформе XAML для представления элемента в любых прокручиваемых областях, в которые он содержится.
Инициирует запрос к платформе XAML для вывода элемента в представление с помощью указанных параметров.
Представляет элемент управления контейнером, содержащий компоненты пользовательского интерфейса приложения для управления командами и взаимодействиями.
Инициирует операцию перетаскивания.
Не поддерживается, если пользователь запускает приложение в режиме с повышенными привилегиями в качестве администратора.
Останавливает указанную анимацию в элементе .
Возвращает объект преобразования, который можно использовать для преобразования координат из UIElement в указанный объект.
Пытается вызвать сочетание клавиш (или ускоритель), выполнив поиск сочетания клавиш во всем визуальном дереве UIElement.
Отменяет уведомление об изменениях, которое было ранее зарегистрировано путем вызова метода RegisterPropertyChangedCallback.
Обеспечивает правильное обновление всех положений дочерних объектов UIElement для макета.
События
Происходит, когда ключи доступа больше не должны отображаться.
Происходит, когда пользователь запрашивает отображение ключей доступа.
Происходит, когда пользователь завершает последовательность ключей доступа.
Происходит при изменении значения свойства ActualTheme.
Происходит при вызове StartBringIntoView для этого элемента или одного из его потомков.
Происходит при получении одного составного символа входной очередью.
Происходит, когда элемент AppBar меняется с видимого на скрытый.
Происходит, когда элемент AppBar начинает меняться с видимого на скрытый.
Происходит, когда жест ввода контекста переходит в жест манипуляции, чтобы уведомить элемент о том, что всплывающий элемент контекста не должен открываться.
Происходит, когда пользователь завершил жест ввода контекста, например щелчок правой кнопкой мыши.
Происходит при изменении значения свойства FrameworkElement.DataContext .
Происходит, когда необработанное в противном случае взаимодействие DoubleTap происходит над областью проверки попадания этого элемента.
Происходит, когда система ввода сообщает о базовом событии перетаскивания с этим элементом в качестве целевого объекта.
Происходит, когда система ввода сообщает о базовом событии перетаскивания с этим элементом в качестве источника.
Происходит, когда подсистема ввода сообщает о соответствующем событии перетаскивания, имеющем в качестве потенциальной цели данный элемент.
Происходит при инициации операции перетаскивания.
Происходит, когда система ввода сообщает о базовом событии удаления с этим элементом в качестве цели удаления.
Происходит при завершении операции перетаскивания с этим элементом в качестве источника.
Происходит при изменении действующего окна просмотраFrameworkElement.
Происходит при освобождении фокуса из элемента управления, когда пользователь нажимает кнопку B/Back на игровом контроллере.
Происходит, когда фокус ограничивается элементом управления, когда пользователь нажимает кнопку A/Select на игровом контроллере.
Происходит до того, как элемент UIElement получит фокус. Это событие создается синхронно, чтобы фокус не перемещался во время восходящего события.
Происходит, когда элемент UIElement получает фокус. Это событие возникает асинхронно, поэтому фокус может снова переместиться до завершения восходящего движения.
Происходит, когда в противном случае происходит необработанное взаимодействие удержания над областью проверки попадания этого элемента.
Происходит при изменении свойства IsEnabled .
Происходит при нажатии клавиши клавиатуры, когда элемент UIElement находится в фокусе.
Происходит при отпускание клавиши клавиатуры, когда элемент UIElement находится в фокусе.
Происходит при изменении макета визуального дерева из-за изменения значения свойств, относящихся к макету, или другого действия, которое обновляет макет.
Происходит, когда FrameworkElement был создан и добавлен в дерево объектов и готов к взаимодействию.
Происходит, когда FrameworkElement начинает загружаться.
Происходит до того, как элемент UIElement теряет фокус. Это событие создается синхронно, чтобы фокус не перемещался во время восходящего события.
Происходит, когда элемент UIElement теряет фокус. Это событие возникает асинхронно, поэтому фокус может снова переместиться до завершения восходящего движения.
Происходит после завершения манипуляции с UIElement .
Происходит, когда устройство ввода меняет положение в процессе манипуляции.
Происходит, если во время манипуляции устройство ввода теряет контакт с объектом UIElement и начинает действовать инерция.
Происходит, когда устройство ввода начинает манипуляцию над UIElement.
Происходит при первоначальном создании процессора манипулирования.
Происходит, когда пользователь пытается переместить фокус (с помощью табуляции или стрелки направления), но фокус не перемещается, так как в направлении перемещения не найден кандидат фокуса.
Происходит, когда элемент AppBar меняется с скрытого на видимый.
Происходит, когда элемент AppBar начинает меняться с скрытого на видимый.
Происходит, когда указатель, создающий контакт, теряет контакт.
Происходит, когда захват указателя, ранее удерживаемый этим элементом, перемещается в другой элемент или в другое место.
Происходит, когда указатель входит в область проверки попадания этого элемента.
Происходит, когда указатель покидает область проверки попадания этого элемента.
Происходит при перемещении указателя, в то время как указатель остается в области проверки попадания этого элемента.
Происходит, когда указатель инициирует действие Нажатие в этом элементе.
Происходит при освобождении устройства указателя, которое ранее инициировало действие Нажатие , в этом элементе. Обратите внимание, что окончание действия Нажатие не гарантирует, что событие будет вызываться PointerReleased . Вместо этого могут возникать другие события. Дополнительные сведения см. в разделе Примечания.
Происходит при изменении разностного значения колесика указателя.
Происходит при нажатии клавиши клавиатуры, когда элемент UIElement находится в фокусе.
Происходит при отпускание клавиши клавиатуры, когда элемент UIElement находится в фокусе.
Возникает при возникновении стимула ввода правой кнопкой касания, когда указатель находится над элементом.
Происходит при изменении значения свойства ActualHeight или ActualWidth в FrameworkElement.
Происходит, когда в противном случае происходит необработанное взаимодействие с касанием в области проверки попадания этого элемента.
Происходит, когда этот объект больше не подключен к дереву объектов main.
День шестой. Application Bar
В Windows Phone 7 есть специальный элемент — Application Bar (панель приложения), который представляет собой набор круглых значков в нижней части приложения.
Коснувшись значка, вы можете перейти на нужную страницу. При этом сами значки остаются на месте. По сути это схоже с полоской меню в обычных настольных приложениях.
Добавляем Application Bar (XAML)
Если вы создаете новый проект, то там уже есть заготовка для добавления Application Bar в приложение. Вам нужно снять комментарии с кода в файле MainPage.xaml file. Вернемся к нашему примеру и уберем комментарии:
Если вы создаете проект с нуля, то кроме указанного выше кода необходимо добавить пространства имен в (не забудьте установить также ссылки):
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"После того, как вы уберете комментарии, в программе появятся два значка на панели приложения. Запустите проект, чтобы убедиться в этом. Всего в Application Bar может содержаться от 1 до 4 значков. Высота панели равна 72 пикселам.
Кстати обратите внимание, что в коде для значков указаны пути к изображениям (напр. /Images/appbar_button1.png), которые не являются частью проекта. Если вы запустите проект, то в Application Bar будут выводиться значки X для ApplicationBarIconButtons. Безусловно, вы можете создать собственные значки, добавить их в проект и использовать их в своей программе. Но можно пойти другим путем и использовать уже готовые значки для этих целей. Откроем проект в Expression Blend и найдем объекты ApplicationBarIconButton в дереве объектов Objects and Timeline.
Щелкните на одном из них и изучите вкладку Properties.
Щелкнув по выпадающему списку IconUri, вы можете выбрать из множества предопределенных значков. Также вы можете задать текст для кнопок панели приложения.
Пусть вас не пугает, что стандартные значки имеют белый цвет на черном фоне. Если в телефоне будет использоваться светлая тема (о темах говорилось в прошлом занятии), то значки поменяют свой цвет на противоположный автоматически.
Вам нужно взять это на заметку, если собираетесь использовать собственные значки. О том, как создавать подобные значки, мы поговорим в одной из наших статей.
События для Application Bar
Теперь неплохо бы заставить кнопки-значки реагировать на наши действия. Добавим событие Click и его обработчик в коде.
[XAML] Click="AppBarIconButton1_Click"/> Click="AppBarIconButton2_Click"/>[C#] private void AppBarIconButton1_Click(object sender, EventArgs e) < PageTitle.Text = "котята"; >private void AppBarIconButton2_Click(object sender, EventArgs e)
Кроме значков на Application Bar вы можете видеть три точки (. ). Если коснуться в этом месте, то откроется дополнительная выдвижная панель с текстовым меню. Повторное касание троеточия закроет панель. Сейчас там мы видим команды menuutem 1 и menuitem 2. Поступаем с ними аналогичным образом:
[XAML] Click="AppBarMenuItem1_Click"/> Click="AppBarMenuItem2_Click"/>[C#] private void AppBarMenuItem1_Click(object sender, EventArgs e) < MessageBox.Show("Наверное, котенок"); >private void AppBarMenuItem2_Click(object sender, EventArgs e)В отличие от значков на панели, текстовых команд может быть больше и при этом поддерживается прокрутка.
Управляем прозрачностью Application Bar
Можно использовать свойство Opacity для изменения прозрачности панели. Если значение Opacity равно 1, то панель непрозрачна, если установить значение «0.5», то панель станет полупрозрачной.
Системная область
При запущенном приложении мы по-прежнему видим в верхней части экрана часы, уровень сигнала Wi-Fi, заряд батареи и другую системную информацию (на реальном устройстве, на эмуляторе ничего не отображается). Вы можете скрыть эту область, которая видима по умолчанию. Все, что нужно сделать — присвоить свойству Visible значение false.
shell:SystemTray.IsVisible="False"Дополнительные сведения
Есть несколько значков панели приложения, которые устанавливаются вместе с Windows Phone Developer Tools. Вы можете найти эти значки в одном из следующих мест:
- На 32-битных операционных системах: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons
- На 64-битных операционных системах: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons
Если вам необходимо создать собственный значок панеди приложения, то он должен соответствовать следующим требованиям:
- Размер 48 пикселей на 48 пикселей.
- Должен быть белого цвета на прозрачном фоне.
- Не включает в себя изображения круга, поскольку он отображается панелью приложения.