Краткое руководство по созданию приложения Xamarin.Forms

  • Статья

Download Sample Скачайте пример

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

  • Создание приложения Оболочки в Xamarin.Forms
  • Определение пользовательского интерфейса страницы с помощью языка XAML и взаимодействие с элементами XAML из кода.
  • Описание визуальной иерархии приложения Оболочки путем создания подкласса класса Shell.

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

Notes ApplicationNotes About Page

Необходимые компоненты

  • Последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET.
  • Знание языка C#.
  • (Необязательно) Парный компьютер Mac для построения приложения в iOS.

Дополнительные сведения об этих предварительных требованиях см. в разделе Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Начало работы с Visual Studio 2019

  1. Запустите Visual Studio 2019 и в начальном окне щелкните Создать проект, чтобы создать новый проект:

    New Solution

  2. В окне Создать проект в раскрывающемся списке Тип проекта щелкните Мобильное приложение, а затем выберите шаблон Мобильное приложение (Xamarin.Forms) и нажмите кнопку Далее:

    Choose a Template

  3. В диалоговом окне Настроить новый проект в поле Имя проекта укажите Notes, выберите подходящее расположение для проекта и нажмите кнопку Создать:

    Configure the Shell Application

    Внимание

    Фрагменты кода на C# и XAML из этого краткого руководства предполагают, что решение и проект называются Notes. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого краткого руководства в проект.

  4. В диалоговом окне Новое мобильное приложение выберите шаблон С вкладками и нажмите кнопку Создать:

    Create the Shell Application

    После создания проекта закройте файл GettingStarted.txt.

    Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Оболочки в Xamarin.Forms статьи Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

  5. В обозревателе решений в проекте Notes удалите следующие папки (и их содержимое):

    • Модели
    • Сервисы;
    • ViewModels
    • Представления

  6. В обозревателе решений в проекте Notes удалите GettingStarted.txt.

  7. В обозревателе решений в проект Notes добавьте новую папку с именем Views.

  8. В обозревателе решений в проекте Notes выберите папку Views, щелкните ее правой кнопкой и выберите Добавить > Новый элемент.... В диалоговом окне Добавление нового элемента выберите Элементы Visual C# >Xamarin.Forms> Страница содержимого, присвойте новому файлу имя NotesPage и нажмите кнопку Добавить:

    Add NotesPage

    В результате этого в папку Views будет добавлена новая страница с именем NotesPage. Эта страница будет основной страницей в приложении.

  9. В обозревателе решений дважды щелкните файл NotesPage.xaml в проекте Notes, чтобы открыть его:

    Open NotesPage.xaml

  10. Удалите из NotesPage.xaml весь шаблонный код и замените его приведенным ниже.

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NotesPage"
             Title="Notes">
    <!-- Layout children vertically -->
    <StackLayout Margin="20">
        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
        <!-- Layout children in two columns -->
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

    Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Editor для ввода текста, а также двух объектов Button, которые предписывают приложению сохранить или удалить файл. Два объекта Button располагаются по горизонтали в Grid, а Editor и Grid — по вертикали в StackLayout. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле NotesPage.xaml, нажав клавиши CTRL+S.

  11. В обозревателе решений дважды щелкните файл NotesPage.xaml.cs в проекте Notes, чтобы открыть его:

    Open NotesPage.xaml.cs

  12. Удалите из NotesPage.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using System;
using System.IO;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");

        public NotesPage()
        {
            InitializeComponent();

            // Read the file.
            if (File.Exists(_fileName))
            {
                editor.Text = File.ReadAllText(_fileName);
            }
        }

        void OnSaveButtonClicked(object sender, EventArgs e)
        {
            // Save the file.
            File.WriteAllText(_fileName, editor.Text);
        }

        void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            // Delete the file.
            if (File.Exists(_fileName))
            {
                File.Delete(_fileName);
            }
            editor.Text = string.Empty;
        }
    }
}

    Этот код определяет поле _fileName, которое ссылается на файл с именем notes.txt, где будут храниться данные с заметками в локальной папке данных для приложения. При выполнении конструктора страниц файл считывается, если он существует, и отображается в Editor. При нажатии кнопки СохранитьButton выполняется обработчик событий OnSaveButtonClicked, который сохраняет содержимое Editor в файле. При нажатии кнопки УдалитьButton выполняется обработчик событий OnDeleteButtonClicked, который удаляет файл при условии, что он существует, и весь текст из Editor. Дополнительные сведения о взаимодействии с пользователем см. в разделе Реакция на действия пользователей в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле NotesPage.xaml.cs, нажав клавиши CTRL+S.

  13. В обозревателе решений в проекте Notes выберите папку Views, щелкните ее правой кнопкой и выберите Добавить > Новый элемент.... В диалоговом окне Добавление нового элемента выберите Элементы Visual C# >Xamarin.Forms> Страница содержимого, присвойте новому файлу имя AboutPage и нажмите кнопку Добавить:

    Add AboutPage

    В результате этого в папку Views будет добавлена новая страница с именем AboutPage.

  14. В обозревателе решений дважды щелкните файл AboutPage.xaml в проекте Notes, чтобы открыть его:

    Open AboutPage.xaml

  15. Удалите из AboutPage.xaml весь шаблонный код и замените его приведенным ниже.

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->
        <StackLayout Grid.Row="1"
                     Margin="20"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из Image, двух объектов Label, которые отображают текст, и Button. Два объекта Label и Button располагаются по горизонтали в StackLayout, а Image и StackLayout — по вертикали в Grid. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AboutPage.xaml, нажав клавиши CTRL+S.

  16. В обозревателе решений дважды щелкните файл AboutPage.xaml.cs в проекте Notes, чтобы открыть его:

    Open AboutPage.xaml.cs

  17. Удалите из AboutPage.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            // Launch the specified URL in the system browser.
            await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
        }
    }
}

    Этот код определяет обработчик событий OnButtonClicked, который выполняется при нажатии кнопки ПодробнееButton. При нажатии кнопки запускается веб-браузер и отображается страница, представленная аргументом URI для метода OpenAsync. Дополнительные сведения о взаимодействии с пользователем см. в разделе Реакция на действия пользователей в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AboutPage.xaml.cs, нажав клавиши CTRL+S.

  18. В обозревателе решений дважды щелкните файл AppShell.xaml в проекте Notes, чтобы открыть его:

    Open AppShell.xaml

  19. Удалите из AppShell.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"
       xmlns:views="clr-namespace:Notes.Views"
       x:Class="Notes.AppShell">
    <!-- Display a bottom tab bar containing two tabs -->   
    <TabBar>
        <ShellContent Title="Notes"
                      Icon="icon_feed.png"
                      ContentTemplate="{DataTemplate views:NotesPage}" />
        <ShellContent Title="About"
                      Icon="icon_about.png"
                      ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

    Этот код декларативно определяет визуальную иерархию приложения, которая состоит из TabBar, где содержатся два объекта ShellContent. Эти объекты не представляют собой какие-либо элементы пользовательского интерфейса, они служат лишь для организации визуальной структуры приложения. На основе этих объектов Оболочка создает пользовательский интерфейс для содержимого. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AppShell.xaml, нажав клавиши CTRL+S.

  20. В обозревателе решений в проекте Notes разверните AppShell.xaml и дважды щелкните файл AppShell.xaml.cs, чтобы открыть его:

    Open AppShell.xaml.cs

  21. Удалите из AppShell.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

    Сохраните изменения в файле AppShell.xaml.cs, нажав клавиши CTRL+S.

  22. В обозревателе решений дважды щелкните файл App.xaml в проекте Notes, чтобы открыть его:

    Open App.xaml

  23. Удалите из App.xaml весь шаблонный код и замените его приведенным ниже.

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

</Application>

    Этот код декларативно определяет класс App, который отвечает за создание экземпляра приложения.

    Сохраните изменения в файле App.xaml, нажав клавиши CTRL+S.

  24. В обозревателе решений в проекте Notes разверните App.xaml и дважды щелкните файл App.xaml.cs, чтобы открыть его:

    Open App.xaml.cs

  25. Удалите из App.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

    Этот код определяет код программной части для класса App, который отвечает за создание экземпляра приложения. Он инициализирует свойство MainPage для производного класса Shell.

    Сохраните изменения в файле App.xaml.cs, нажав клавиши CTRL+S.

Сборка примера из краткого руководства

  1. В Visual Studio выберите элемент меню Сборка > Построить решение (или нажмите клавишу F6). Выполняется сборка решения, а в строке состояния Visual Studio отображается сообщение об успешном выполнении:

    Build Successful

    При наличии ошибок повторите предыдущие шаги и исправьте все ошибки, пока сборка проектов не будет проходить успешно.

  2. На панели инструментов Visual Studio нажмите клавишу Запустить (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном эмуляторе Android.

    Visual Studio Android Toolbar

    Notes in the Android Emulator

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

    Нажмите значок About для перехода к AboutPage:

    Notes about page in the Android Emulator

    Нажмите кнопку Подробнее, чтобы запустить веб-страницу кратких руководств.

    Дополнительные сведения о запуске приложения на каждой платформе см. в разделе Запуск приложения на каждой платформе в статье Подробное изучение кратких руководств по Xamarin.Forms.

    Примечание.

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

  3. На панели инструментов Visual Studio щелкните правой кнопкой мыши проект Notes.iOS, а затем выберите команду Назначить запускаемым проектом.

    Set Notes.iOS as Startup Project

  4. На панели инструментов Visual Studio нажмите клавишу Запустить (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном эмуляторе для iOS.

    Visual Studio iOS Toolbar

    Notes in the iOS Simulator

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

    Нажмите значок About для перехода к AboutPage:

    Notes about page in the iOS Simulator

    Нажмите кнопку Подробнее, чтобы запустить веб-страницу кратких руководств.

    Дополнительные сведения о запуске приложения на каждой платформе см. в разделе Запуск приложения на каждой платформе в статье Подробное изучение кратких руководств по Xamarin.Forms.

Необходимые компоненты

  • Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS.
  • Xcode (последний выпуск).
  • Знание языка C#.

Дополнительные сведения об этих предварительных требованиях см. в разделе Установка Xamarin.

Начало работы с Visual Studio для Mac

  1. Запустите Visual Studio для Mac и в начальном окне щелкните Создать, чтобы создать новый проект:

    New Solution

  2. В диалоговом окне Выберите шаблон из нового проекта щелкните Многоплатформенность > Приложение и выберите шаблон Приложение Shell Forms, а затем нажмите кнопку Далее:

    Choose a Template

  3. В диалоговом окне Configure your Shell Forms app (Настройка приложения Shell Forms) присвойте новому приложению имя Notes, а затем нажмите кнопку Далее:

    Configure the Shell Application

  4. В диалоговом окне Configure your new Shell Forms app (Настройка нового приложения Shell Forms) сохраните для проекта и решения имя Notes, выберите подходящее расположение для проекта и нажмите кнопку Создать для создания проекта:

    Configure the Shell Project

    Внимание

    Фрагменты кода на C# и XAML из этого краткого руководства предполагают, что решение и проект называются Notes. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого краткого руководства в проект.

    Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Оболочки в Xamarin.Forms статьи Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

  5. На Панели решения в проекте Notes удалите следующие папки (и их содержимое):

    • Модели
    • Сервисы;
    • ViewModels
    • Представления

  6. На Панели решения в проекте Notes удалите GettingStarted.txt.

  7. На Панели решения в проект Notes добавьте новую папку с именем Views.

  8. На Панели решения выберите проект Notes, выберите папку Views, щелкните ее правой кнопкой мыши и выберите Добавить >Новый файл.... В диалоговом окне Новый файл выберите Forms > Forms ContentPage XAML, назовите новый файл NotesPage и нажмите кнопку Создать:

    Add NotesPage

    В результате этого в папку Views будет добавлена новая страница с именем NotesPage. Эта страница будет основной страницей в приложении.

  9. На Панели решения дважды щелкните файл NotesPage.xaml в проекте Notes, чтобы открыть его:

    Open NotesPage.xaml

  10. Удалите из NotesPage.xaml весь шаблонный код и замените его приведенным ниже.

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NotesPage"
             Title="Notes">
    <!-- Layout children vertically -->
    <StackLayout Margin="20">
        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
        <!-- Layout children in two columns -->
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

    Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Editor для ввода текста, а также двух объектов Button, которые предписывают приложению сохранить или удалить файл. Два объекта Button располагаются по горизонтали в Grid, а Editor и Grid — по вертикали в StackLayout. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле NotesPage.xaml, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  11. На Панели решения дважды щелкните файл NotesPage.xaml.cs в проекте Notes, чтобы открыть его:

    Open NotesPage.xaml.cs

  12. Удалите из NotesPage.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using System;
using System.IO;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");

        public NotesPage()
        {
            InitializeComponent();

            // Read the file.
            if (File.Exists(_fileName))
            {
                editor.Text = File.ReadAllText(_fileName);
            }
        }

        void OnSaveButtonClicked(object sender, EventArgs e)
        {
            // Save the file.
            File.WriteAllText(_fileName, editor.Text);
        }

        void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            // Delete the file.
            if (File.Exists(_fileName))
            {
                File.Delete(_fileName);
            }
            editor.Text = string.Empty;
        }
    }
}

    Этот код определяет поле _fileName, которое ссылается на файл с именем notes.txt, где будут храниться данные с заметками в локальной папке данных для приложения. При выполнении конструктора страниц файл считывается, если он существует, и отображается в Editor. При нажатии кнопки СохранитьButton выполняется обработчик событий OnSaveButtonClicked, который сохраняет содержимое Editor в файле. При нажатии кнопки УдалитьButton выполняется обработчик событий OnDeleteButtonClicked, который удаляет файл при условии, что он существует, и весь текст из Editor. Дополнительные сведения о взаимодействии с пользователем см. в разделе Реакция на действия пользователей в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле NotesPage.xaml.cs, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  13. На Панели решения в проекте Notes выберите папку Views, щелкните ее правой кнопкой мыши и выберите Добавить > Новый файл.... В диалоговом окне Новый файл выберите Forms > Forms ContentPage XAML, назовите новый файл AboutPage и нажмите кнопку Создать:

    Add AboutPage

  14. На Панели решения дважды щелкните файл AboutPage.xaml в проекте Notes, чтобы открыть его:

    Open AboutPage.xaml

    В результате этого в папку Views будет добавлена новая страница с именем AboutPage.

  15. Удалите из AboutPage.xaml весь шаблонный код и замените его приведенным ниже.

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->
        <StackLayout Grid.Row="1"
                     Margin="20"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из Image, двух объектов Label, которые отображают текст, и Button. Два объекта Label и Button располагаются по горизонтали в StackLayout, а Image и StackLayout — по вертикали в Grid. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AboutPage.xaml, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  16. На Панели решения дважды щелкните файл AboutPage.xaml.cs в проекте Notes, чтобы открыть его:

    Open AboutPage.xaml.cs

  17. Удалите из AboutPage.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            // Launch the specified URL in the system browser.
            await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
        }
    }
}

    Этот код определяет обработчик событий OnButtonClicked, который выполняется при нажатии кнопки ПодробнееButton. При нажатии кнопки запускается веб-браузер и отображается страница, представленная аргументом URI для метода OpenAsync. Дополнительные сведения о взаимодействии с пользователем см. в разделе Реакция на действия пользователей в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AboutPage.xaml.cs, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  18. На Панели решения дважды щелкните файл AppShell.xaml в проекте Notes, чтобы открыть его:

    Open AppShell.xaml

  19. Удалите из AppShell.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"
       xmlns:views="clr-namespace:Notes.Views"
       x:Class="Notes.AppShell">
    <!-- Display a bottom tab bar containing two tabs -->
    <TabBar>
        <ShellContent Title="Notes"
                      Icon="icon_feed.png"
                      ContentTemplate="{DataTemplate views:NotesPage}" />
        <ShellContent Title="About"
                      Icon="icon_about.png"
                      ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

    Этот код декларативно определяет визуальную иерархию приложения, которая состоит из TabBar, где содержатся два объекта ShellContent. Эти объекты не представляют собой какие-либо элементы пользовательского интерфейса, они служат лишь для организации визуальной структуры приложения. На основе этих объектов Оболочка создает пользовательский интерфейс для содержимого. Дополнительные сведения о создании пользовательского интерфейса см. в разделе Пользовательский интерфейс в статье Подробное изучение кратких руководств по Оболочке в Xamarin.Forms.

    Сохраните изменения в файле AppShell.xaml, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  20. На Панели решения в проекте Notes разверните AppShell.xaml и дважды щелкните файл AppShell.xaml.cs, чтобы открыть его:

    Open AppShell.xaml.cs

  21. Удалите из AppShell.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

    Сохраните изменения в файле AppShell.xaml.cs, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  22. На Панели решения дважды щелкните файл App.xaml в проекте Notes, чтобы открыть его.

    Open App.xaml

  23. Удалите из App.xaml весь шаблонный код и замените его приведенным ниже.

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

</Application>

    Этот код декларативно определяет класс App, который отвечает за создание экземпляра приложения.

    Сохраните изменения в файле App.xaml, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

  24. На Панели решения в проекте Notes разверните App.xaml и дважды щелкните файл App.xaml.cs, чтобы открыть его:

    Open App.xaml.cs

  25. Удалите из App.xaml.cs весь шаблонный код и замените его приведенным ниже.

    using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

    Этот код определяет код программной части для класса App, который отвечает за создание экземпляра приложения. Он инициализирует свойство MainPage для производного класса Shell.

    Сохраните изменения в файле App.xaml.cs, выбрав Файл > Сохранить (или нажав клавиши ⌘+S).

Сборка примера из краткого руководства

  1. В Visual Studio для Mac выберите элемент меню Сборка > Собрать все (или нажмите клавиши ⌘+B). Будет выполнена сборка проектов, а на панели инструментов Visual Studio для Mac отобразится сообщение об успешном выполнении:

    Build Successful

    При наличии ошибок повторите предыдущие шаги и исправьте все ошибки, пока сборка проектов не будет проходить успешно.

  2. В панели решения щелкните правой кнопкой мыши проект Notes.iOS и выберите команду Назначить запускаемым проектом:

    Set iOS as Startup Project

  3. На панели инструментов Visual Studio для Mac нажмите клавишу Запустить (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS:

    Visual Studio for Mac Toolbar

    Notes in the iOS Simulator

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

    Нажмите значок About для перехода к AboutPage:

    Notes about page in the iOS Simulator

    Нажмите кнопку Подробнее, чтобы запустить веб-страницу кратких руководств.

    Дополнительные сведения о запуске приложения на каждой платформе см. в разделе Запуск приложения на каждой платформе в статье Подробное изучение кратких руководств по Xamarin.Forms.

  4. В панели решения щелкните правой кнопкой мыши проект Notes.Droid и выберите команду Назначить запускаемым проектом:

    Set Android as Startup Project

  5. На панели инструментов Visual Studio для Mac нажмите клавишу Запустить (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном эмуляторе Android:

    Notes in the Android Emulator

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

    Нажмите значок About для перехода к AboutPage:

    Notes about page in the Android Emulator

    Нажмите кнопку Подробнее, чтобы запустить веб-страницу кратких руководств.

    Дополнительные сведения о запуске приложения на каждой платформе см. в разделе Запуск приложения на каждой платформе в статье Подробное изучение кратких руководств по Xamarin.Forms.

Следующие шаги

Из этого руководства вы узнали, как выполнить следующие действия:

  • Создание приложения Оболочки в Xamarin.Forms
  • Определение пользовательского интерфейса страницы с помощью языка XAML и взаимодействие с элементами XAML из кода.
  • Описание визуальной иерархии приложения Оболочки путем создания подкласса класса Shell.

Перейдите к следующему краткому руководству, чтобы добавить дополнительные страницы в это приложение Оболочки в Xamarin.Forms.

Далее