Xamarin.Forms Tworzenie aplikacji — szybki start

  • Artykuł

Download Sample Pobieranie przykładu

Z tego przewodnika Szybki start dowiesz się, jak wykonywać następujące zadania:

  • Utwórz aplikację powłoki Xamarin.Forms .
  • Zdefiniuj interfejs użytkownika dla strony przy użyciu języka eXtensible Application Markup Language (XAML) i korzystaj z elementów XAML z kodu.
  • Opisz hierarchię wizualizacji aplikacji powłoki, tworząc podklasę Shell klasy.

W przewodniku Szybki start opisano sposób tworzenia międzyplatformowej Xamarin.Forms aplikacji Shell, która umożliwia wprowadzanie notatki i utrwalanie jej w magazynie urządzeń. Ostateczna aplikacja jest pokazana poniżej:

Notes ApplicationNotes About Page

Wymagania wstępne

  • Program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Programowanie aplikacji mobilnych za pomocą platformy .NET .
  • Znajomość języka C#.
  • (opcjonalnie) Sparowany komputer Mac do kompilowania aplikacji w systemie iOS.

Aby uzyskać więcej informacji na temat tych wymagań wstępnych, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Wprowadzenie do programu Visual Studio 2019

  1. Uruchom program Visual Studio 2019, a w oknie uruchamiania kliknij pozycję Utwórz nowy projekt, aby utworzyć nowy projekt :

    New Solution

  2. W oknie Tworzenie nowego projektu wybierz pozycję Mobile na liście rozwijanej Typ projektu, wybierz szablon Aplikacja mobilna (Xamarin.Forms), a następnie kliknij przycisk Dalej:

    Choose a Template

  3. W oknie Konfigurowanie nowego projektu ustaw nazwę projektu na Uwagi, wybierz odpowiednią lokalizację dla projektu, a następnie kliknij przycisk Utwórz:

    Configure the Shell Application

    Ważne

    Fragmenty kodu W języku C# i XAML w tym przewodniku Szybki start wymagają, aby rozwiązanie i projekt nosiły nazwę Uwagi. Użycie innej nazwy spowoduje błędy kompilacji podczas kopiowania kodu z tego przewodnika Szybki start do projektu.

  4. W oknie dialogowym Nowa aplikacja mobilna wybierz szablon z kartami, a następnie kliknij przycisk Utwórz:

    Create the Shell Application

    Po utworzeniu projektu zamknij plik GettingStarted.txt .

    Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji powłoki w przewodnikuXamarin.FormsSzybki start Szybki start — szczegółowe omówienie.

  5. W Eksplorator rozwiązań w projekcie Notatki usuń następujące foldery (i ich zawartość):

    • Modele
    • Usługi
    • Modele widoków
    • Widoki

  6. W Eksplorator rozwiązań w projekcie Notatki usuń GettingStarted.txt.

  7. W Eksplorator rozwiązań w projekcie Notatki dodaj nowy folder o nazwie Views.

  8. W Eksplorator rozwiązań w projekcie Notatki wybierz folder Widoki, kliknij prawym przyciskiem myszy i wybierz polecenie Dodaj > nowy element.... W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Strona zawartości elementówXamarin.Forms>> języka Visual C#, nadaj nowej nazwie plik NotesPage, a następnie kliknij przycisk Dodaj:

    Add NotesPage

    Spowoduje to dodanie nowej strony o nazwie NotesPage do folderu Views . Ta strona będzie stroną główną w aplikacji.

  9. W Eksplorator rozwiązań w projekcie Notes kliknij dwukrotnie plik NotesPage.xaml, aby go otworzyć:

    Open NotesPage.xaml

  10. W pliku NotesPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, który składa się z Editor elementu dla wprowadzania tekstu, oraz dwóch Button obiektów, które kierują aplikację do zapisywania lub usuwania pliku. Dwa Button obiekty są ułożone w poziomie w Gridobiekcie z elementem Editor i Grid są ułożone w pionie w obiekcie StackLayout. Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku NotesPage.xaml , naciskając klawisze CTRL+S.

  11. W Eksplorator rozwiązań w projekcie Uwagi kliknij dwukrotnie NotesPage.xaml.cs, aby go otworzyć:

    Open NotesPage.xaml.cs

  12. W NotesPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje _fileName pole, które odwołuje się do pliku o nazwie notes.txt , który będzie przechowywać dane notatek w lokalnym folderze danych aplikacji dla aplikacji. Gdy konstruktor strony jest wykonywany, plik jest odczytywany, jeśli istnieje i wyświetlany w pliku Editor. Po naciśnięciu OnSaveButtonClicked przycisku ZapiszButton jest wykonywana procedura obsługi zdarzeń, która zapisuje zawartość Editor pliku. Po naciśnięciu OnDeleteButtonClicked przycisku UsuńButton jest wykonywana procedura obsługi zdarzeń, która usuwa plik, pod warunkiem, że istnieje, i usuwa dowolny tekst z pliku Editor. Aby uzyskać więcej informacji na temat interakcji z użytkownikiem, zobacz Reagowanie na interakcję użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w NotesPage.xaml.cs , naciskając klawisze CTRL+S.

  13. W Eksplorator rozwiązań w projekcie Notatki wybierz folder Widoki, kliknij prawym przyciskiem myszy i wybierz polecenie Dodaj > nowy element.... W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Strona zawartości elementów>Xamarin.Forms> visual C#, nadaj nowej nazwie plik AboutPage, a następnie kliknij przycisk Dodaj:

    Add AboutPage

    Spowoduje to dodanie nowej strony o nazwie AboutPage do folderu Views .

  14. W Eksplorator rozwiązań w projekcie Notes kliknij dwukrotnie plik AboutPage.xaml, aby go otworzyć:

    Open AboutPage.xaml

  15. W pliku AboutPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, który składa się z Imagedwóch Label obiektów, które wyświetlają tekst i Button. Dwa obiekty i Button są rozmieszczone w pionie w StackLayoutobiekcie z elementem Image i StackLayout są rozmieszczone w pionie w obiekcie Grid.Label Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku AboutPage.xaml , naciskając klawisze CTRL+S.

  16. W Eksplorator rozwiązań w projekcie Notes kliknij dwukrotnie AboutPage.xaml.cs, aby go otworzyć:

    Open AboutPage.xaml.cs

  17. W AboutPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje procedurę OnButtonClicked obsługi zdarzeń, która jest wykonywana po naciśnięciu przycisku Dowiedz się więcejButton . Po naciśnięciu przycisku zostanie uruchomiona przeglądarka internetowa i zostanie wyświetlona strona reprezentowana przez argument identyfikatora URI metody OpenAsync . Aby uzyskać więcej informacji na temat interakcji z użytkownikiem, zobacz Reagowanie na interakcję użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w AboutPage.xaml.cs , naciskając klawisze CTRL+S.

  18. W Eksplorator rozwiązań w projekcie Notes kliknij dwukrotnie plik AppShell.xaml, aby go otworzyć:

    Open AppShell.xaml

  19. W pliku AppShell.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje hierarchię wizualną aplikacji, która składa się z TabBar dwóch ShellContent obiektów. Te obiekty nie reprezentują żadnych elementów interfejsu użytkownika, ale raczej organizacji hierarchii wizualnej aplikacji. Powłoka przejmie te obiekty i utworzy interfejs użytkownika dla zawartości. Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku AppShell.xaml , naciskając klawisze CTRL+S.

  20. W Eksplorator rozwiązań w projekcie Notes rozwiń węzeł AppShell.xaml i kliknij dwukrotnie AppShell.xaml.cs, aby go otworzyć:

    Open AppShell.xaml.cs

  21. W AppShell.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

    using Xamarin.Forms;

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

    Zapisz zmiany w AppShell.xaml.cs , naciskając klawisze CTRL+S.

  22. W Eksplorator rozwiązań w projekcie Notes kliknij dwukrotnie plik App.xaml, aby go otworzyć:

    Open App.xaml

  23. W pliku App.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje klasę App , która jest odpowiedzialna za utworzenie wystąpienia aplikacji.

    Zapisz zmiany w pliku App.xaml , naciskając klawisze CTRL+S.

  24. W Eksplorator rozwiązań w projekcie Notes rozwiń węzeł App.xaml i kliknij dwukrotnie App.xaml.cs, aby go otworzyć:

    Open App.xaml.cs

  25. W App.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje kod za klasą App , która jest odpowiedzialna za utworzenie wystąpienia aplikacji. Inicjuje MainPage właściwość do obiektu podklasowanego Shell .

    Zapisz zmiany w App.xaml.cs , naciskając klawisze CTRL+S.

Kompilowanie przewodnika Szybki start

  1. W programie Visual Studio wybierz element menu Kompiluj > rozwiązanie kompilacji (lub naciśnij klawisz F6). Rozwiązanie zostanie skompiluje i zostanie wyświetlony komunikat o powodzeniu na pasku stanu programu Visual Studio:

    Build Successful

    Jeśli występują błędy, powtórz poprzednie kroki i popraw wszelkie błędy, dopóki projekty nie zostaną pomyślnie skompilowane.

  2. Na pasku narzędzi programu Visual Studio naciśnij przycisk Start (trójkątny przycisk przypominający przycisk Odtwarzania), aby uruchomić aplikację w wybranym emulatorze systemu Android:

    Visual Studio Android Toolbar

    Notes in the Android Emulator

    Wprowadź notatkę i naciśnij przycisk Zapisz . Następnie zamknij aplikację i uruchom ją ponownie, aby upewnić się, że wprowadzona notatka zostanie ponownie załadowana.

    Naciśnij ikonę karty Informacje , aby przejść do elementu AboutPage:

    Notes about page in the Android Emulator

    Naciśnij przycisk Dowiedz się więcej, aby uruchomić stronę internetową szybki start.

    Aby uzyskać więcej informacji na temat sposobu uruchamiania aplikacji na każdej platformie, zobacz Uruchamianie aplikacji na każdej platformie w przewodniku Xamarin.Forms Szybki start — szczegółowe omówienie.

    Uwaga

    Poniższe kroki należy wykonać tylko wtedy, gdy masz sparowany komputer Mac spełniający wymagania systemowe dotyczące Xamarin.Forms programowania.

  3. Na pasku narzędzi programu Visual Studio kliknij prawym przyciskiem myszy projekt Notes.iOS i wybierz polecenie Ustaw jako projekt startowy.

    Set Notes.iOS as Startup Project

  4. Na pasku narzędzi programu Visual Studio naciśnij przycisk Start (trójkątny przycisk przypominający przycisk Odtwarzania), aby uruchomić aplikację w wybranym symulatorze zdalnym systemu iOS:

    Visual Studio iOS Toolbar

    Notes in the iOS Simulator

    Wprowadź notatkę i naciśnij przycisk Zapisz . Następnie zamknij aplikację i uruchom ją ponownie, aby upewnić się, że wprowadzona notatka zostanie ponownie załadowana.

    Naciśnij ikonę karty Informacje , aby przejść do elementu AboutPage:

    Notes about page in the iOS Simulator

    Naciśnij przycisk Dowiedz się więcej, aby uruchomić stronę internetową szybki start.

    Aby uzyskać więcej informacji na temat sposobu uruchamiania aplikacji na każdej platformie, zobacz Uruchamianie aplikacji na każdej platformie w przewodniku Xamarin.Forms Szybki start — szczegółowe omówienie.

Wymagania wstępne

  • Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platformy iOS i Android.
  • Xcode (najnowsza wersja).
  • Znajomość języka C#.

Aby uzyskać więcej informacji na temat tych wymagań wstępnych, zobacz Instalowanie platformy Xamarin.

Wprowadzenie do programu Visual Studio dla komputerów Mac

  1. Uruchom Visual Studio dla komputerów Mac, a w oknie uruchamiania kliknij pozycję Nowy, aby utworzyć nowy projekt:

    New Solution

  2. W oknie dialogowym Wybieranie szablonu dla nowego projektu kliknij pozycję Aplikacja wieloplatformowa>, wybierz szablon Aplikacja formularzy powłoki, a następnie kliknij przycisk Dalej:

    Choose a Template

  3. W oknie dialogowym Konfigurowanie aplikacji Shell Forms nadaj nowej aplikacji nazwę Notes, a następnie kliknij przycisk Dalej:

    Configure the Shell Application

  4. W oknie dialogowym Konfigurowanie nowej aplikacji Formularze powłoki pozostaw nazwę Rozwiązania i projektu ustawioną na Uwagi, wybierz odpowiednią lokalizację dla projektu, a następnie kliknij przycisk Utwórz, aby utworzyć projekt:

    Configure the Shell Project

    Ważne

    Fragmenty kodu W języku C# i XAML w tym przewodniku Szybki start wymagają, aby rozwiązanie i projekt nosiły nazwę Uwagi. Użycie innej nazwy spowoduje błędy kompilacji podczas kopiowania kodu z tego przewodnika Szybki start do projektu.

    Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji powłoki w przewodnikuXamarin.FormsSzybki start Szybki start — szczegółowe omówienie.

  5. W okienku rozwiązania w projekcie Notatki usuń następujące foldery (i ich zawartość):

    • Modele
    • Usługi
    • Modele widoków
    • Widoki

  6. W okienku rozwiązania w projekcie Uwagi usuń GettingStarted.txt.

  7. W okienku rozwiązania w projekcie Notatki dodaj nowy folder o nazwie Views.

  8. W okienku rozwiązania w projekcie Notatki wybierz folder Widoki, kliknij prawym przyciskiem myszy i wybierz polecenie Dodaj > nowy plik.... W oknie dialogowym Nowy plik wybierz pozycję Formularze formularzy > ContentPage XAML, nazwij nowy plik NotesPage, a następnie kliknij przycisk Nowy:

    Add NotesPage

    Spowoduje to dodanie nowej strony o nazwie NotesPage do folderu Views . Ta strona będzie stroną główną w aplikacji.

  9. W okienku rozwiązania w projekcie Notatki kliknij dwukrotnie plik NotesPage.xaml, aby go otworzyć:

    Open NotesPage.xaml

  10. W pliku NotesPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, który składa się z Editor elementu dla wprowadzania tekstu, oraz dwóch Button obiektów, które kierują aplikację do zapisywania lub usuwania pliku. Dwa Button obiekty są ułożone w poziomie w Gridobiekcie z elementem Editor i Grid są ułożone w pionie w obiekcie StackLayout. Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku NotesPage.xaml, wybierając pozycję Zapisz plik > (lub naciskając klawisze × + S).

  11. W okienku rozwiązania w projekcie Uwagi kliknij dwukrotnie NotesPage.xaml.cs, aby go otworzyć:

    Open NotesPage.xaml.cs

  12. W NotesPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje _fileName pole, które odwołuje się do pliku o nazwie notes.txt , który będzie przechowywać dane notatek w lokalnym folderze danych aplikacji dla aplikacji. Gdy konstruktor strony jest wykonywany, plik jest odczytywany, jeśli istnieje i wyświetlany w pliku Editor. Po naciśnięciu OnSaveButtonClicked przycisku ZapiszButton jest wykonywana procedura obsługi zdarzeń, która zapisuje zawartość Editor pliku. Po naciśnięciu OnDeleteButtonClicked przycisku UsuńButton jest wykonywana procedura obsługi zdarzeń, która usuwa plik, pod warunkiem, że istnieje, i usuwa dowolny tekst z pliku Editor. Aby uzyskać więcej informacji na temat interakcji z użytkownikiem, zobacz Reagowanie na interakcję użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w NotesPage.xaml.cs, wybierając pozycję Zapisz plik > (lub naciskając klawisz ⌘ + S).

  13. W okienku rozwiązania w projekcie Notatki wybierz folder Widoki, kliknij prawym przyciskiem myszy i wybierz polecenie Dodaj > nowy plik.... W oknie dialogowym Nowy plik wybierz pozycję Formularze formularzy > ContentPage XAML, nazwij nowy plik AboutPage, a następnie kliknij przycisk Nowy:

    Add AboutPage

  14. W okienku rozwiązania w projekcie Notatki kliknij dwukrotnie plik AboutPage.xaml, aby go otworzyć:

    Open AboutPage.xaml

    Spowoduje to dodanie nowej strony o nazwie AboutPage do folderu Views .

  15. W pliku AboutPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, który składa się z Imagedwóch Label obiektów, które wyświetlają tekst i Button. Dwa obiekty i Button są rozmieszczone w pionie w StackLayoutobiekcie z elementem Image i StackLayout są rozmieszczone w pionie w obiekcie Grid.Label Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku AboutPage.xaml, wybierając pozycję Zapisz plik > (lub naciskając klawisze × + S).

  16. W okienku rozwiązania w projekcie Uwagi kliknij dwukrotnie AboutPage.xaml.cs, aby go otworzyć:

    Open AboutPage.xaml.cs

  17. W AboutPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje procedurę OnButtonClicked obsługi zdarzeń, która jest wykonywana po naciśnięciu przycisku Dowiedz się więcejButton . Po naciśnięciu przycisku zostanie uruchomiona przeglądarka internetowa i zostanie wyświetlona strona reprezentowana przez argument identyfikatora URI metody OpenAsync . Aby uzyskać więcej informacji na temat interakcji z użytkownikiem, zobacz Reagowanie na interakcję użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w AboutPage.xaml.cs, wybierając pozycję Zapisz plik > (lub naciskając klawisz ⌘ + S).

  18. W okienku rozwiązania w projekcie Notes kliknij dwukrotnie plik AppShell.xaml, aby go otworzyć:

    Open AppShell.xaml

  19. W pliku AppShell.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje hierarchię wizualną aplikacji, która składa się z TabBar dwóch ShellContent obiektów. Te obiekty nie reprezentują żadnych elementów interfejsu użytkownika, ale raczej organizacji hierarchii wizualnej aplikacji. Powłoka przejmie te obiekty i utworzy interfejs użytkownika dla zawartości. Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika, zobacz Interfejs użytkownika w przewodniku Szybki start powłoki Xamarin.Forms — szczegółowe omówienie.

    Zapisz zmiany w pliku AppShell.xaml, wybierając pozycję Zapisz plik > (lub naciskając klawisze × + S).

  20. W okienku rozwiązania w projekcie Notatki rozwiń węzeł AppShell.xaml i kliknij dwukrotnie AppShell.xaml.cs, aby go otworzyć:

    Open AppShell.xaml.cs

  21. W AppShell.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

    using Xamarin.Forms;

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

    Zapisz zmiany w AppShell.xaml.cs, wybierając pozycję Zapisz plik > (lub naciskając klawisz ⌘ + S).

  22. W okienku rozwiązania w projekcie Notatki kliknij dwukrotnie plik App.xaml, aby go otworzyć:

    Open App.xaml

  23. W pliku App.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod deklaratywnie definiuje klasę App , która jest odpowiedzialna za utworzenie wystąpienia aplikacji.

    Zapisz zmiany w pliku App.xaml, wybierając pozycję Zapisz plik > (lub naciskając klawisze × + S).

  24. W okienku rozwiązania w projekcie Uwagi rozwiń węzeł App.xaml i kliknij dwukrotnie App.xaml.cs, aby go otworzyć:

    Open App.xaml.cs

  25. W App.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

    Ten kod definiuje kod za klasą App , która jest odpowiedzialna za utworzenie wystąpienia aplikacji. Inicjuje MainPage właściwość do obiektu podklasowanego Shell .

    Zapisz zmiany w App.xaml.cs, wybierając pozycję Zapisz plik > (lub naciskając klawisz ⌘ + S).

Kompilowanie przewodnika Szybki start

  1. W Visual Studio dla komputerów Mac wybierz element menu Kompiluj > wszystko (lub naciśnij klawisz ⌘ + B). Projekty będą kompilować i pojawi się komunikat o powodzeniu na pasku narzędzi Visual Studio dla komputerów Mac:

    Build Successful

    Jeśli występują błędy, powtórz poprzednie kroki i popraw wszelkie błędy, dopóki projekty nie zostaną pomyślnie skompilowane.

  2. W okienku rozwiązania wybierz projekt Notes.iOS, kliknij prawym przyciskiem myszy i wybierz polecenie Ustaw jako projekt startowy:

    Set iOS as Startup Project

  3. Na pasku narzędzi Visual Studio dla komputerów Mac naciśnij przycisk Start (trójkątny przycisk przypominający przycisk Odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS:

    Visual Studio for Mac Toolbar

    Notes in the iOS Simulator

    Wprowadź notatkę i naciśnij przycisk Zapisz . Następnie zamknij aplikację i uruchom ją ponownie, aby upewnić się, że wprowadzona notatka zostanie ponownie załadowana.

    Naciśnij ikonę karty Informacje , aby przejść do elementu AboutPage:

    Notes about page in the iOS Simulator

    Naciśnij przycisk Dowiedz się więcej, aby uruchomić stronę internetową szybki start.

    Aby uzyskać więcej informacji na temat sposobu uruchamiania aplikacji na każdej platformie, zobacz Uruchamianie aplikacji na każdej platformie w przewodniku Xamarin.Forms Szybki start — szczegółowe omówienie.

  4. W okienku rozwiązania wybierz projekt Notes.Droid, kliknij prawym przyciskiem myszy i wybierz polecenie Ustaw jako projekt startowy:

    Set Android as Startup Project

  5. Na pasku narzędzi Visual Studio dla komputerów Mac naciśnij przycisk Start (trójkątny przycisk przypominający przycisk Odtwarzania), aby uruchomić aplikację wewnątrz wybranego emulatora systemu Android:

    Notes in the Android Emulator

    Wprowadź notatkę i naciśnij przycisk Zapisz . Następnie zamknij aplikację i uruchom ją ponownie, aby upewnić się, że wprowadzona notatka zostanie ponownie załadowana.

    Naciśnij ikonę karty Informacje , aby przejść do elementu AboutPage:

    Notes about page in the Android Emulator

    Naciśnij przycisk Dowiedz się więcej, aby uruchomić stronę internetową szybki start.

    Aby uzyskać więcej informacji na temat sposobu uruchamiania aplikacji na każdej platformie, zobacz Uruchamianie aplikacji na każdej platformie w przewodniku Xamarin.Forms Szybki start — szczegółowe omówienie.

Następne kroki

W tym przewodniku Szybki start zawarto informacje na temat wykonywania następujących czynności:

  • Utwórz aplikację powłoki Xamarin.Forms .
  • Zdefiniuj interfejs użytkownika dla strony przy użyciu języka eXtensible Application Markup Language (XAML) i korzystaj z elementów XAML z kodu.
  • Opisz hierarchię wizualizacji aplikacji powłoki, tworząc podklasę Shell klasy.

Przejdź do następnego przewodnika Szybki start, aby dodać dodatkowe strony do tej Xamarin.Forms aplikacji powłoki.

Dalej