Flyout

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

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

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

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

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

Итак, по умолчанию у нас есть стандартная страница MainPage, которая представляет класс ContentPage. В приложении Flyout основной класс страницы, который загружается классом App при старте приложения, должен представлять класс Shell.

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

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlyoutApp.MainPage">
</Shell>

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

using Xamarin.Forms;

namespace FlyoutApp
{
    public partial class MainPage : Shell
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

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

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

Flyout/Shell представляет простую систему наполнения страницы элементами. Контейнерами верхнего уровня являются объекты FlyoutItem и TabBar, которые позволяют создать механизм навигации, перехода по вкладкам внутри страницы.

FlyoutItem и TabBar содержат объект Tab, который предназначен для группировки контента в виде одной нижней вкладки.

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

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

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlyoutApp.MainPage">
    <FlyoutItem Title="Европа">
        <Tab Title="Западная">
            <ShellContent Title="Франция">
                <ContentPage Title="Франция">
                    <StackLayout>
                        <Label Text="Париж" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
            <ShellContent Title="Великобритания">
                <ContentPage Title="Великобитания">
                    <StackLayout>
                        <Label Text="Лондон" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>
        <Tab Title="Центральная">
            <ShellContent Title="Германия">
                <ContentPage Title="Германия">
                    <StackLayout>
                        <Label Text="Берлин" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
            <ShellContent Title="Австрия">
                <ContentPage Title="Австрия">
                    <StackLayout>
                        <Label Text="Вена" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>
    </FlyoutItem>
    
    <FlyoutItem Title="Азия">
        <Tab Title="Ближний Восток">
            <ShellContent Title="Турция">
                <ContentPage Title="Турция">
                    <StackLayout>
                        <Label Text="Анкара" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
            <ShellContent Title="Иран">
                <ContentPage Title="Иран">
                    <StackLayout>
                        <Label Text="Тегеран" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>
        <Tab Title="Восточная Азия">
            <ShellContent Title="Китай">
                <ContentPage Title="Китай">
                    <StackLayout>
                        <Label Text="Пекин" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
            <ShellContent Title="Япония">
                <ContentPage Title="Япония">
                    <StackLayout>
                        <Label Text="Токио" />
                    </StackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>
    </FlyoutItem>
</Shell>

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

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

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

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