Início rápido para criar um Xamarin.Forms aplicativo

Baixar exemplo Baixar o exemplo

Neste guia de início rápido, você aprenderá a:

  • Crie um Xamarin.Forms aplicativo Shell.
  • Defina a interface do usuário para uma página usando XAML (Linguagem de Marcação de Aplicativo) e interaja com elementos XAML do código.
  • Descreva a hierarquia visual de um aplicativo Shell subclasse da Shell classe .

O início rápido explica como criar um aplicativo Shell multiplataforma Xamarin.Forms , que permite inserir uma anotação e mantê-la no armazenamento do dispositivo. O aplicativo final é mostrado abaixo:

Anotaçõessobre a Página de Anotações do Aplicativo

Pré-requisitos

  • Visual Studio 2019 (versão mais recente), com a carga de trabalho de Desenvolvimento móvel com .NET instalada.
  • Conhecimento de C#.
  • (opcional) Um Mac emparelhado para compilar o aplicativo no iOS.

Para obter mais informações sobre esses pré-requisitos, confira Como instalar o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Introdução ao Visual Studio 2019

  1. Inicie o Visual Studio 2019 e, na janela inicial, clique em Criar um projeto para criar um projeto:

    Nova solução

  2. Na janela Criar um novo projeto , selecione Móvel na lista suspensa Tipo de projeto , selecione o modelo Aplicativo Móvel (Xamarin.Forms) e clique no botão Avançar :

    Escolher um modelo

  3. Na janela Configurar seu novo projeto, defina o Nome do projeto como Notes, escolha uma localização adequada para o projeto e clique no botão Criar:

    Configurar o aplicativo Shell

    Importante

    Os snippets C# e XAML neste início rápido requerem que a solução e o projeto sejam nomeados como Notas. O uso de um nome diferente resultará em erros de build ao copiar o código deste início rápido para o projeto.

  4. Na caixa de diálogo Novo Aplicativo Móvel , selecione o modelo com guias e clique no botão Criar :

    Criar o aplicativo Shell

    Quando o projeto tiver sido criado, feche o arquivo GettingStarted.txt .

    Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo Shell no Xamarin.Forms Início Rápido do Shell Aprofundamento.

  5. No Gerenciador de Soluções, no projeto Anotações, exclua as seguintes pastas (e seu conteúdo):

    • Modelos
    • Serviços
    • ViewModels
    • Exibições
  6. No Gerenciador de Soluções, no projeto Anotações, exclua GettingStarted.txt.

  7. No Gerenciador de Soluções, no projeto Anotações, adicione uma nova pasta chamada Exibições.

  8. Em Gerenciador de Soluções, no projeto Anotações, selecione a pasta Exibições, clique com o botão direito do mouse e selecione Adicionar > Novo Item.... Na caixa de diálogo Adicionar Novo Item, selecione Página de Conteúdo de Itens >Xamarin.Forms> do Visual C#, nomeie o novo arquivo NotesPage e clique no botão Adicionar:

    Adicionar NotesPage

    Isso adicionará uma nova página chamada NotesPage à pasta Views . Esta página será a página main no aplicativo.

  9. No Gerenciador de Soluções, no projeto Notes, clique duas vezes em NotesPage.xaml para abri-lo:

    Abrir NotesPage.xaml

  10. Em NotesPage.xaml, remova todo o código de modelo e substitua-o pelo código a seguir:

    <?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>
    

    Esse código define declarativamente a interface do usuário para a página, que consiste em uma Editor entrada de texto e dois Button objetos que direcionam o aplicativo para salvar ou excluir um arquivo. Os dois Button objetos são dispostos horizontalmente em um Grid, com o Editor e Grid sendo dispostos verticalmente em um StackLayout. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em NotesPage.xaml pressionando CTRL+S.

  11. No Gerenciador de Soluções, no projeto Notes, clique duas vezes em NotesPage.xaml.cs para abri-lo:

    Abrir NotesPage.xaml.cs

  12. Em NotesPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:

    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;
            }
        }
    }
    

    Esse código define um campo _fileName, que referencia um arquivo chamado notes.txt que armazenará os dados de notas na pasta de dados local do aplicativo. Quando o construtor de página for executado o arquivo será lido, caso exista, e exibido no Editor. Quando o botão SalvarButton é pressionado, o OnSaveButtonClicked manipulador de eventos é executado, o que salva o conteúdo do Editor no arquivo. Quando DeleteButton é pressionado, o OnDeleteButtonClicked manipulador de eventos é executado, o que exclui o arquivo, desde que ele exista e remove qualquer texto do Editor. Para obter mais informações sobre a interação do usuário, consulte Respondendo à interação do usuário no Início Rápido do Xamarin.Forms Shell Aprofundamento.

    Salve as alterações em NotesPage.xaml.cs pressionando CTRL+S.

  13. Em Gerenciador de Soluções, no projeto Anotações, selecione a pasta Exibições, clique com o botão direito do mouse e selecione Adicionar > Novo Item.... Na caixa de diálogo Adicionar Novo Item, selecione Página de Conteúdo de Itens >Xamarin.Forms> do Visual C#, nomeie o novo arquivo AboutPage e clique no botão Adicionar:

    Adicionar AboutPage

    Isso adicionará uma nova página chamada AboutPage à pasta Views .

  14. No Gerenciador de Soluções, no projeto Anotações, clique duas vezes em AboutPage.xaml para abri-lo:

    Abrir AboutPage.xaml

  15. Em AboutPage.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente a interface do usuário para a página, que consiste em um Image, dois Label objetos que exibem texto e um Button. Os dois Label objetos e Button são dispostos verticalmente em um StackLayout, com o Image e StackLayout sendo dispostos verticalmente em um Grid. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em AboutPage.xaml pressionando CTRL+S.

  16. No Gerenciador de Soluções, no projeto Notes, clique duas vezes em AboutPage.xaml.cs para abri-lo:

    Abrir AboutPage.xaml.cs

  17. Em AboutPage.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    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");
            }
        }
    }
    

    Esse código define o OnButtonClicked manipulador de eventos, que é executado quando o Saiba maisButton é pressionado. Quando o botão é pressionado, um navegador da Web é iniciado e a página representada pelo argumento URI para o OpenAsync método é exibida. Para obter mais informações sobre a interação do usuário, consulte Respondendo à interação do usuário no Início Rápido do Xamarin.Forms Shell Aprofundamento.

    Salve as alterações em AboutPage.xaml.cs pressionando CTRL+S.

  18. No Gerenciador de Soluções, no projeto Notes, clique duas vezes em AppShell.xaml para abri-lo:

    Abrir AppShell.xaml

  19. Em AppShell.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente a hierarquia visual do aplicativo, que consiste em um TabBar que contém dois ShellContent objetos. Esses objetos não representam nenhum elemento de interface do usuário, mas sim a organização da hierarquia visual do aplicativo. O Shell pegará esses objetos e produzirá a interface do usuário para o conteúdo. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em AppShell.xaml pressionando CTRL+S.

  20. No Gerenciador de Soluções, no projeto Notes, expanda AppShell.xaml e clique duas vezes em AppShell.xaml.cs para abri-lo:

    Abra AppShell.xaml.cs

  21. Em AppShell.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
            }
        }
    }
    

    Salve as alterações em AppShell.xaml.cs pressionando CTRL+S.

  22. No Gerenciador de Soluções, no projeto Anotações, clique duas vezes em App.xaml para abri-lo:

    Abrir App.xaml

  23. Em App.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente uma App classe , que é responsável por instanciar o aplicativo.

    Salve as alterações em App.xaml pressionando CTRL+S.

  24. No Gerenciador de Soluções, no projeto Anotações, expanda App.xaml e clique duas vezes em App.xaml.cs para abri-lo:

    Abrir App.xaml.cs

  25. Em App.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    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()
            {
            }
        }
    }
    

    Esse código define o code-behind para a App classe , que é responsável por instanciar o aplicativo. Ele inicializa a MainPage propriedade para o objeto subclasse Shell .

    Salve as alterações em App.xaml.cs pressionando CTRL+S.

Criando o Início Rápido

  1. No Visual Studio, selecione o item de menu Compilar > Solução de Build (ou pressione F6). A solução será criada e uma mensagem de êxito será exibida na barra de status do Visual Studio:

    Build bem-sucedido

    Se houver erros, repita as etapas anteriores e corrija-os até que os projetos sejam compilados com êxito.

  2. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo em seu emulador Android escolhido:

    Barra de ferramentas do Visual Studio para Android

    Observações no Android Emulator

    Insira uma nota e pressione o botão Salvar. Em seguida, feche o aplicativo e inicie-o novamente para garantir que a anotação inserida seja recarregada.

    Pressione o ícone de guia Sobre para navegar até :AboutPage

    Anotações sobre a página no Android Emulator

    Pressione o botão Saiba mais para iniciar a página da Web de inícios rápidos.

    Para obter mais informações sobre como o aplicativo é iniciado em cada plataforma, consulte Iniciando o aplicativo em cada plataforma no Xamarin.Forms Início Rápido Aprofundamento.

    Observação

    As etapas a seguir só devem ser executadas se você tiver um Mac emparelhado que atenda aos requisitos do sistema para Xamarin.Forms desenvolvimento.

  3. Na barra de ferramentas do Visual Studio, clique com o botão direito do mouse no projeto Notes.iOS e selecione Definir como projeto de inicialização.

    Definir Notes.iOS como Projeto de Inicialização

  4. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo em seu Simulador remoto do iOS escolhido:

    Barra de ferramentas do Visual Studio para iOS

    Observações no Simulador do iOS

    Insira uma nota e pressione o botão Salvar. Em seguida, feche o aplicativo e inicie-o novamente para garantir que a anotação inserida seja recarregada.

    Pressione o ícone de guia Sobre para navegar até :AboutPage

    Anotações sobre a página no Simulador do iOS

    Pressione o botão Saiba mais para iniciar a página da Web de inícios rápidos.

    Para obter mais informações sobre como o aplicativo é iniciado em cada plataforma, consulte Iniciando o aplicativo em cada plataforma no Xamarin.Forms Início Rápido Aprofundamento.

Pré-requisitos

  • Visual Studio para Mac (versão mais recente), compatível com a plataforma iOS e Android instalada.
  • Xcode (versão mais recente).
  • Conhecimento de C#.

Para obter mais informações sobre esses pré-requisitos, confira Como instalar o Xamarin.

Introdução ao Visual Studio para Mac

  1. Inicialize o Visual Studio para Mac e, na janela inicial, clique em Novo para criar um novo projeto:

    Nova solução

  2. Na caixa de diálogo Escolher um modelo para o novo projeto, clique em Aplicativo Multiplataforma>, selecione o modelo aplicativo Shell Forms e clique no botão Avançar:

    Escolher um modelo

  3. Na caixa de diálogo Configurar seu aplicativo Shell Forms , nomeie as anotações do novo aplicativo e clique no botão Avançar :

    Configurar o aplicativo Shell

  4. Na caixa de diálogo Configurar seu novo aplicativo Shell Forms , deixe os nomes de Solução e Projeto definidos como Anotações, escolha um local adequado para o projeto e clique no botão Criar para criar o projeto:

    Configurar o projeto do Shell

    Importante

    Os snippets C# e XAML neste início rápido requerem que a solução e o projeto sejam nomeados como Notas. O uso de um nome diferente resultará em erros de build ao copiar o código deste início rápido para o projeto.

    Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo Shell no Xamarin.Forms Início Rápido do Shell Aprofundamento.

  5. No Painel de Soluções, no projeto Anotações , exclua as seguintes pastas (e seu conteúdo):

    • Modelos
    • Serviços
    • ViewModels
    • Exibições
  6. No Painel de Soluções, no projeto Anotações , exclua GettingStarted.txt.

  7. No Painel de Soluções, no projeto Anotações , adicione uma nova pasta chamada Exibições.

  8. No Painel de Soluções, no projeto Anotações , selecione a pasta Exibições , clique com o botão direito do mouse e selecione Adicionar > Novo Arquivo.... Na caixa de diálogo Novo Arquivo , selecione Formulários Formulários > ContentPage XAML, nomeie o novo arquivo NotesPage e clique no botão Novo :

    Adicionar NotesPage

    Isso adicionará uma nova página chamada NotesPage à pasta Views . Esta página será a página main no aplicativo.

  9. No Painel de Soluções, no projeto Anotações , clique duas vezes em NotesPage.xaml para abri-lo:

    Abrir NotesPage.xaml

  10. Em NotesPage.xaml, remova todo o código de modelo e substitua-o pelo código a seguir:

    <?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>
    

    Esse código define declarativamente a interface do usuário para a página, que consiste em uma Editor entrada de texto e dois Button objetos que direcionam o aplicativo para salvar ou excluir um arquivo. Os dois Button objetos são dispostos horizontalmente em um Grid, com o Editor e Grid sendo dispostos verticalmente em um StackLayout. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em NotesPage.xaml escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  11. No Painel de Soluções, no projeto Anotações , clique duas vezes em NotesPage.xaml.cs para abri-lo:

    Abrir NotesPage.xaml.cs

  12. Em NotesPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:

    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;
            }
        }
    }
    

    Esse código define um campo _fileName, que referencia um arquivo chamado notes.txt que armazenará os dados de notas na pasta de dados local do aplicativo. Quando o construtor de página for executado o arquivo será lido, caso exista, e exibido no Editor. Quando o botão SalvarButton é pressionado, o OnSaveButtonClicked manipulador de eventos é executado, o que salva o conteúdo do Editor no arquivo. Quando DeleteButton é pressionado, o OnDeleteButtonClicked manipulador de eventos é executado, o que exclui o arquivo, desde que ele exista e remove qualquer texto do Editor. Para obter mais informações sobre a interação do usuário, consulte Respondendo à interação do usuário no Início Rápido do Xamarin.Forms Shell Aprofundamento.

    Salve as alterações em NotesPage.xaml.cs escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  13. No Painel de Soluções, no projeto Anotações , selecione a pasta Exibições , clique com o botão direito do mouse e selecione Adicionar > Novo Arquivo.... Na caixa de diálogo Novo Arquivo , selecione Formulários Formulários > ContentPage XAML, nomeie o novo arquivo AboutPage e clique no botão Novo :

    Adicionar AboutPage

  14. No Painel de Soluções, no projeto Anotações , clique duas vezes em AboutPage.xaml para abri-lo:

    Abrir AboutPage.xaml

    Isso adicionará uma nova página chamada AboutPage à pasta Views .

  15. Em AboutPage.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente a interface do usuário para a página, que consiste em um Image, dois Label objetos que exibem texto e um Button. Os dois Label objetos e Button são dispostos verticalmente em um StackLayout, com o Image e StackLayout sendo dispostos verticalmente em um Grid. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em AboutPage.xaml escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  16. No Painel de Soluções, no projeto Anotações , clique duas vezes em AboutPage.xaml.cs para abri-lo:

    Abrir AboutPage.xaml.cs

  17. Em AboutPage.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    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");
            }
        }
    }
    

    Esse código define o OnButtonClicked manipulador de eventos, que é executado quando o Saiba maisButton é pressionado. Quando o botão é pressionado, um navegador da Web é iniciado e a página representada pelo argumento URI para o OpenAsync método é exibida. Para obter mais informações sobre a interação do usuário, consulte Respondendo à interação do usuário no Início Rápido do Xamarin.Forms Shell Aprofundamento.

    Salve as alterações em AboutPage.xaml.cs escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  18. No Painel de Soluções, no projeto Anotações , clique duas vezes em AppShell.xaml para abri-lo:

    Abrir AppShell.xaml

  19. Em AppShell.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente a hierarquia visual do aplicativo, que consiste em um TabBar que contém dois ShellContent objetos. Esses objetos não representam nenhum elemento de interface do usuário, mas sim a organização da hierarquia visual do aplicativo. O Shell pegará esses objetos e produzirá a interface do usuário para o conteúdo. Para obter mais informações sobre como criar a interface do usuário, consulte Interface do usuário no Início Rápido aprofundado doXamarin.Forms Shell.

    Salve as alterações em AppShell.xaml escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  20. No Painel de Soluções, no projeto Anotações , expanda AppShell.xaml e clique duas vezes em AppShell.xaml.cs para abri-lo:

    Abra AppShell.xaml.cs

  21. Em AppShell.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
            }
        }
    }
    

    Salve as alterações em AppShell.xaml.cs escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  22. No Painel de Soluções, no projeto Anotações , clique duas vezes em App.xaml para abri-lo:

    Abrir App.xaml

  23. Em App.xaml, remova todo o código do modelo e substitua-o pelo seguinte código:

    <?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>
    

    Esse código define declarativamente uma App classe , que é responsável por instanciar o aplicativo.

    Salve as alterações em App.xaml escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

  24. No Painel de Soluções, no projeto Anotações , expanda App.xaml e clique duas vezes em App.xaml.cs para abri-lo:

    Abrir App.xaml.cs

  25. Em App.xaml.cs, remova todo o código do modelo e substitua-o pelo seguinte código:

    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()
            {
            }
        }
    }
    

    Esse código define o code-behind para a App classe , que é responsável por instanciar o aplicativo. Ele inicializa a MainPage propriedade para o objeto subclasse Shell .

    Salve as alterações em App.xaml.cs escolhendo Salvar Arquivo > (ou pressionando ⌘ + S).

Criando o Início Rápido

  1. Em Visual Studio para Mac, selecione o item de menu Compilar > Tudo (ou pressione ⌘ + B). Os projetos serão compilados e uma mensagem de êxito aparecerá na barra de ferramentas Visual Studio para Mac:

    Build bem-sucedido

    Se houver erros, repita as etapas anteriores e corrija-os até que os projetos sejam compilados com êxito.

  2. No Painel de Soluções, selecione o projeto Notes.iOS, clique com o botão direito do mouse e selecione Definir como projeto de inicialização:

    Definir o iOS como Projeto Inicial

  3. Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo no Simulador do iOS escolhido:

    Barra de ferramentas do Visual Studio para Mac

    Observações no Simulador do iOS

    Insira uma nota e pressione o botão Salvar. Em seguida, feche o aplicativo e inicie-o novamente para garantir que a nota inserida seja recarregada.

    Pressione o ícone Sobre guia para navegar até o AboutPage:

    Anotações sobre a página no Simulador do iOS

    Pressione o botão Saiba mais para iniciar a página da Web de início rápido.

    Para obter mais informações sobre como o aplicativo é iniciado em cada plataforma, consulte Iniciando o aplicativo em cada plataforma no Xamarin.Forms Início Rápido Aprofundado.

  4. No Painel de Soluções, selecione o projeto Notes.Droid, clique com o botão direito do mouse e selecione Definir como projeto de inicialização:

    Definir Android como projeto de inicialização

  5. Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo em seu emulador Android escolhido:

    Observações no Android Emulator

    Insira uma nota e pressione o botão Salvar. Em seguida, feche o aplicativo e inicie-o novamente para garantir que a nota inserida seja recarregada.

    Pressione o ícone Sobre guia para navegar até o AboutPage:

    Anotações sobre a página no Android Emulator

    Pressione o botão Saiba mais para iniciar a página da Web de início rápido.

    Para obter mais informações sobre como o aplicativo é iniciado em cada plataforma, consulte Iniciando o aplicativo em cada plataforma no Xamarin.Forms Início Rápido Aprofundado.

Próximas etapas

Neste guia de início rápido, você aprendeu a:

  • Crie um Xamarin.Forms aplicativo Shell.
  • Defina a interface do usuário para uma página usando XAML (Linguagem de Marcação de Aplicativo) e interaja com elementos XAML do código.
  • Descreva a hierarquia visual de um aplicativo Shell subclasse a Shell classe .

Prossiga para o próximo início rápido para adicionar páginas adicionais a este Xamarin.Forms aplicativo Shell.