боковое меню в xamarin forms

Flyout

Первое приложение с Flyout

Flyout позволяет создавать одностраничные приложения. Создадим проект с использованием Flyout. Для упрощения создания подобного проекта Visual Studio предлагает готовый шаблон. Поэтому при создании нового проекта Xamarin Forms можно выбрать шаблон Flyout :

Однако по умолчанию этот тип проекта добавляет множество дополнительных файлов и создает проект с уже довольно разветвленной структурой. Поэтому, чтобы более детально разобраться в Flyout создадим простейший проект по типу Blank :

Следует отметить, что на данный момент использование Flyout доступно только в проектах для Android и iOS (для UWP недоступно), поэтому в окне выше пукт для Windows(UWP) не надо отмечать.

После создания проекта мы увидим стандартную простейшую структуру:

Поэтому перейдем к файлу MainPage.xaml и изменим его следующим образом:

И также изменим файл MainPage.xaml.cs :

Теперь определение класса MainPage и в XAML, и в C# представляет класс Shell.

Наполнение элементами

Простейший пример Flyout:

Два элемента FlyoutItem представляют два пункта в боковом меню:

На каждом FlyoutItem есть по два элемента Tab, которые образуют нижние вкладки

В каждом элементе Tab есть по два элемента ShellContent, которые образуют верхние вкладки. А ShellContent с помощью ContentPage собственно определяет содержимое.

Таким образом, Shell может хранить несколько FlyoutItem. Один FlyoutItem может хранить несколько вкладок Tab. А одна вкладка Tab может хранить несколько вкладок ShellContent.

Источник

Всплывающий элемент оболочки Xamarin.Forms

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

Элементы всплывающего меню

Следующий пример создает всплывающее меню с двумя элементами:

Свойство FlyoutItem.Title типа string определяет заголовок всплывающего элемента. Свойство FlyoutItem.Icon типа ImageSource определяет значок всплывающего элемента:

В этом примере каждый объект ShellContent доступен только через элементы всплывающего меню, а не через вкладки: Это связано с тем, что по умолчанию вкладки отображаются только в случае, если всплывающий элемент содержит более одной вкладки.

Параметры отображения всплывающего меню

Свойство FlyoutItem.FlyoutDisplayOptions определяет, как всплывающий элемент и его дочерние элементы отображаются во всплывающем окне. Этому свойству должен быть присвоен член перечисления FlyoutDisplayOptions :

Всплывающий элемент для каждого объекта Tab в FlyoutItem можно отобразить путем присвоения свойству FlyoutItem.FlyoutDisplayOptions значения AsMultipleItems :

Все это создает такие элементы всплывающего меню:

[

Определение внешнего вида FlyoutItem

Внешний вид каждого объекта FlyoutItem можно настроить, присвоив присоединенному свойству Shell.ItemTemplate значение DataTemplate :

Этот пример отображает заголовок каждого объекта FlyoutItem курсивом:

Поскольку Shell.ItemTemplate является присоединенным свойством, для отдельных объектов FlyoutItem можно задавать разные шаблоны.

Шаблон по умолчанию для элементов FlyoutItem

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

Замена содержимого всплывающего меню

Элементы всплывающего меню, представляющие содержимое всплывающего меню, при необходимости можно заменить собственным содержимым, задав значение object для привязываемого свойства Shell.FlyoutContent :

Свойство FlyoutItems в классе Shell — это доступная только для чтения коллекция элементов всплывающего меню.

Содержимое всплывающего меню также можно определить, задав значение DataTemplate для привязываемого свойства Shell.FlyoutContentTemplate :

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

Пункты меню

Объекты MenuItem можно добавить в всплывающее окно, как показано в следующем примере:

Этот пример добавляет объект MenuItem во всплывающее меню под всеми всплывающими элементами:

Определение внешнего вида MenuItem

Внешний вид каждого объекта MenuItem можно настроить, присвоив присоединенному свойству Shell.MenuItemTemplate значение DataTemplate :

Поскольку Shell.MenuItemTemplate является присоединенным свойством, для отдельных объектов MenuItem можно задавать разные шаблоны.

Объекты Style FlyoutItem и MenuItem

В следующем коде XAML показан пример определения стилей для этих классов стилей:

Кроме того, для объектов FlyoutItem и MenuItem можно определить и применить пользовательские классы стилей. Дополнительные сведения о классах стилей см. в статье Классы стилей Xamarin.Forms.

Заголовок всплывающего меню

Тип FlyoutHeader показан в примере ниже.

Вот результат его применения к заголовку всплывающего меню:

По умолчанию заголовок всплывающего меню будет зафиксирован во всплывающем элементе, хотя приведенное ниже его содержимое прокручивается в том случае, если элементов много. Тем не менее это поведение можно изменить, задав в привязываемом свойстве Shell.FlyoutHeaderBehavior один из членов перечисления FlyoutHeaderBehavior :

В следующем примере показано, как свернуть заголовок всплывающего меню при прокрутке пользователем:

Нижний колонтитул всплывающего меню

Тип FlyoutFooter показан в примере ниже.

В результате получается нижний колонтитул следующего вида:

Кроме того, вид нижнего колонтитула всплывающего меню можно определить через свойство Shell.FlyoutFooterTemplate для DataTemplate :

Нижний колонтитул фиксируется в нижней части всплывающего окна и может иметь любую высоту. Кроме того, нижний колонтитул меню никогда не скрывает никаких его пунктов.

Ширина и высота всплывающего меню

Ширину и высоту всплывающего меню можно настроить, установив для присоединенных свойств Shell.FlyoutWidth и Shell.FlyoutHeight значение double :

Это позволяет выполнять такие сценарии как расширение всплывающего меню по всему экрану или уменьшение высоты всплывающего меню, чтобы оно не закрывало панель вкладок.

Значок всплывающего меню

По умолчанию приложения оболочки оснащаются значком «гамбургера», при нажатии которого открывается всплывающее меню. Вы можете изменить этот значок, присвоив привязываемому свойству Shell.FlyoutIcon с типом ImageSource значение, соответствующее нужному значку:

Фон всплывающего элемента

Свойство Shell.FlyoutBackgroundColor также можно задать из каскадной таблицы стилей (CSS). Подробные сведения см. в разделе Особые свойства оболочки Xamarin.Forms.

В этом примере для фона всплывающего элемента выбран светло-серый цвет ( SolidColorBrush ).

В следующем примере показано, что для фона всплывающего элемента задано LinearGradientBrush :

Дополнительные сведения о кистях см. в статье Кисти Xamarin.Forms.

Фоновое изображение всплывающего элемента

Всплывающий элемент может иметь необязательное фоновое изображение, которое отображается под заголовком всплывающего элемента, а также за всеми всплывающими элементами, пунктами меню и нижним колонтитулом. Фоновое изображение можно указать, задав для привязываемого свойства FlyoutBackgroundImage типа ImageSource файл, внедренный ресурс, URI или поток.

Пропорции фонового изображения можно настроить, установив для привязываемого свойства FlyoutBackgroundImageAspect типа Aspect один из членов перечисления Aspect :

В следующем примере показано задание этих свойств:

Это приводит к отображению фонового изображения во всплывающем элементе под заголовком:

Фон всплывающего элемента

Фон всплывающего элемента (внешний вид наложения всплывающего окна) можно указать, задав для Shell.FlyoutBackdrop присоединенное свойство Brush :

В этом примере для фона всплывающего элемента выбран серебряный цвет ( SolidColorBrush ).

В следующем примере показано, что для фона всплывающего элемента указана кисть LinearGradientBrush :

Дополнительные сведения о кистях см. в статье Кисти Xamarin.Forms.

Поведение всплывающего меню

Всплывающее меню отображается, если нажать кнопку «гамбургер» или провести пальцем от края экрана. Но вы можете изменить это поведение, задав в присоединенном свойстве Shell.FlyoutBehavior один из членов перечисления FlyoutBehavior :

В следующем примере показано, как отключить всплывающее меню.

Вертикальная прокрутка всплывающего меню

По умолчанию всплывающее меню можно прокручивать по вертикали, если элементы не помещаются в нем. Это поведение можно изменить, задав в привязываемом свойстве Shell.FlyoutVerticalScrollMode один из элементов перечисления ScrollMode :

В следующем примере показано, как отключить вертикальную прокрутку.

Последовательность табуляции для FlyoutItem

По умолчанию последовательность табуляции для объектов FlyoutItem соответствует порядку, в котором они перечислены в XAML или программно добавлены в дочернюю коллекцию. Этот порядок определяет порядок навигации по элементам FlyoutItem с клавиатуры, и часто порядок по умолчанию является оптимальным.

Следующие правила применяются при использовании последовательности табуляции по умолчанию или задании свойства TabIndex :

Выбор FlyoutItem

С учетом объекта ShellContent с именем aboutItem эквивалентный код на C# выглядит так:

Видимость FlyoutItem

По умолчанию элементы всплывающего меню являются видимыми. Однако элемент может быть скрыт во всплывающем меню со свойством FlyoutItemIsVisible и удален из всплывающего окна со свойством IsVisible :

В следующем примере показано скрытие элемента во всплывающем меню:

Открытие и закрытие всплывающего меню программным способом

Кроме того, это может быть выполнено в коде:

Источник

Xamarin.Forms Shell

В конце мая Microsoft выпустила в релиз Xamarin.Forms Shell — оболочку нацеленную на упрощение создания кроссплатформенных мобильных приложений и включающий в себя следующий функционал: боковое меню, вкладки, навигация, поиск.

Давайте начнем с создания пустого проекта Xamarin.Forms в Visual Studio 2019. Обратите внимание, на данный момент Shell официально поддерживает только 2 платформы: iOS и Android, UWP еще в стадии разработки. Рекомендую сразу же обновить все nuget пакеты в решении.

Далее создадим производный от Shell класс AppShell, для этого в добавим XAML-файл в общий проект со следующим содержимым:

после чего в файле App.xaml.cs указываем что в качестве MainPage у нас будет выступать AppShell:

и пару ContentPage страниц: Page1 и Page2. Так же в нашем тестовом приложении будут использоваться изображения, поэтому добавим их в платформозависимые проекты, для андройд в папку Resources=>drawable, а для ios в папку Resources.

Боковое меню

Боковое меню (часто его называют гамбургер меню) представляет из себя выезжающее меню, которое можно вызвать по нажатию на кнопку или специальным жестом и включает в себя заголовок (Header), список страниц (Flyout Items) и меню (Flyout Menu)

Вкладки

Xamarin.Forms Shell в качестве корневого шаблона может поддерживать нижние и верхние вкладки, а так же их комбинацию:

Как видите, сделать это довольно просто. Еще одним преимуществом является эффективная загрузка страниц, которая позволяет инициализировать страницу только когда на нее переходит пользователь, что существенно ускоряет запуск приложения.

Навигация

Xamarin.Forms предоставляет улучшенную навигацию по интерфейсу на основе URI, позволяя переходить на любую страницу в приложении без соблюдения строгой иерархии и переходить назад без необходимости прохода всех страниц в стеке навигации. Чтобы навигация работала, страницу нужно зарегистрировать, сделать это можно в разметке XAML в FlyoutItem, Tab и ShellContent с помощью свойства Route

навигация осуществляется с помощью команды

В качестве примера внесем изменения в следующие файлы:

Поиск

Xamarin.Forms Shell имеет встроенные функции поиска, предоставляемые классом SearchHandler. Чтобы добавить функцию поиска на страницу, мы создадим класс PetSearchHandler производный от SearchHandler и переопределим методы OnQueryChanged и OnItemSelected. Метод OnQueryChanged срабатывает при вводе пользователем текста в поисковое поле и принимает два аргумента: oldValue и newValue, которые содержат предыдущий и новый поисковый запрос соответственно.

Метод SelectedItem выполняется в момент выбора пользователем результата поиска и принимает в качестве параметров объект, в данном случае Animal.

Для примера создадим модель Animal

Класс PetData который будет содержать коллекцию наших любимых кошечек и собачек

Добавим страницу Pets в которой зададим наш PetSearchHandler

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

При желании мы легко можем настроить содержимое ячейки списка, добавив туда картинку и несколько текстовых меток:

Источник

Xamarin.Forms MenuItem

Xamarin.Forms MenuItem Класс определяет пункты меню для меню, такие как ListView Контекстные меню элементов и всплывающие меню приложения оболочки.

На следующих снимках экрана показаны MenuItem объекты в ListView контекстном меню в iOS и Android:

[! [«MenuItems on iOS and Android.»] (MenuItem-Images/menuitem-demo-cropped.png «MenuItems in iOS and Android».](menuitem-images/menuitem-demo-full.png#lightbox «Все MenuItems в iOS и Android Full Image»)

Класс MenuItem определяет следующие свойства:

Эти свойства поддерживаются объектами, BindableProperty поэтому MenuItem экземпляр может быть целевым объектом привязок данных.

Создание элемента меню

В следующем примере показано MenuItem Создание экземпляра в контексте ListView объекта:

MenuItem Также можно создать в коде:

Определение поведения элемента MenuItem с помощью событий

Обработчик событий можно также присоединить в коде:

В предыдущих примерах указан OnItemClicked обработчик событий. В следующем коде показан пример реализации:

Определение поведения MenuItem с помощью MVVM

MenuItem Класс поддерживает шаблон Model-View-ViewModel (MVVM) через BindableProperty объекты и ICommand интерфейс. В следующем коде XAML показаны MenuItem экземпляры, привязанные к командам, определенным в ViewModel:

В предыдущем примере два MenuItem объекта определяются с их Command свойствами и, CommandParameter привязанными к командам в ViewModel. ViewModel содержит команды, упоминаемые в XAML:

Пример приложения включает класс, DataService используемый для получения списка элементов для заполнения ListView объектов. Создается экземпляр ViewModel, элементы DataService класса и задаются как BindingContext в коде программной части:

Значки MenuItem

MenuItem на устройствах Android отображаются только значки. На других платформах будет отображаться только текст, заданный Text свойством.

Значки задаются с помощью IconImageSource Свойства. Если указан значок, то текст, заданный Text свойством, не будет отображаться. На следующем снимке экрана показан MenuItem значок со значком на Android:

Включение или отключение элемента MenuItem во время выполнения

Чтобы включить отключение MenuItem во время выполнения, привяжите его Command свойство к ICommand реализации и убедитесь, что canExecute делегат включает и отключается ICommand соответствующим образом.

В следующем примере показано, MenuItem Command свойство которого привязано к ICommand именованной MyCommand :

ICommand Для реализации требуется canExecute делегат, возвращающий значение свойства, bool чтобы включить и отключить MenuItem :

В этом примере элемент MenuItem отключен до тех пор, пока IsMenuItemEnabled не будет задано свойство. В этом случае Command.ChangeCanExecute вызывается метод, который вызывает canExecute MyCommand повторное вычисление делегата.

Поведение контекстного меню на разных платформах

К контекстным меню обращаются и отображаются по-разному на каждой платформе.

В Android контекстное меню активируется длительным нажатием элемента списка. Контекстное меню заменяет заголовок и область панели навигации, а MenuItem Параметры отображаются горизонтальными кнопками.

В iOS контекстное меню активируется функцией прокрутки на элементе списка. Контекстное меню отображается в элементе списка и MenuItems отображается в виде горизонтальных кнопок.

В UWP контекстное меню активируется щелчком правой кнопкой мыши по элементу списка. Контекстное меню отображается рядом с курсором в виде вертикального списка.

Источник

Вкладки оболочки Xamarin.Forms

Тип TabBar отключает всплывающее меню.

Одностраничное приложение

Этот код создаст такую структуру одностраничного приложения:

Нижние вкладки

Объекты Tab отображаются в виде нижних вкладок, если существует несколько объектов Tab в одном объекте TabBar :

Свойство Title типа string определяет заголовок вкладки. Свойство Icon типа ImageSource определяет значок вкладки:

При наличии более пяти вкладок в TabBar появляется вкладка Дополнительно, используемая для доступа к дополнительным вкладкам.

Вы также можете использовать операторы неявного преобразования оболочки для удаления объектов ShellContent и Tab из предыдущего примера:

Нижние и верхние вкладки

В результате создается такой макет, как показано на следующих снимках экрана:

[

Также вы можете использовать операторы неявного преобразования оболочки для удаления второго объекта Tab из предыдущего примера:

Внешний вид вкладок

Класс Shell предоставляет следующие присоединенные свойства, которые определяют внешний вид вкладок:

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

Кроме того, стиль вкладок можно задать с помощью каскадных таблиц стилей (CSS). Подробные сведения см. в разделе Особые свойства оболочки Xamarin.Forms.

Выбор вкладки

С учетом объекта ShellContent с именем dogsItem эквивалентный код на C# выглядит так:

Видимость TabBar и Tab

В этом примере панель вкладок скрывается при выборе вкладки Dogs вверху.

Кроме того, объекты Tab можно скрыть, задав для привязываемого свойства IsVisible значение false :

Источник