Sdílet prostřednictvím


Rychlý start k vytvoření Xamarin.Forms aplikace

V tomto rychlém startu se naučíte:

  • Vytvořte Xamarin.Forms aplikaci Shell.
  • Definujte uživatelské rozhraní pro stránku pomocí jazyka XAML (Application Markup Language) eXtensible a interagujte s elementy XAML z kódu.
  • Popište vizuální hierarchii aplikace prostředí podtřídou Shell třídy.

Rychlý start vás provede vytvořením multiplatformní Xamarin.Forms aplikace Shell, která umožňuje zadat poznámku a zachovat ji v úložišti zařízení. Poslední aplikace je znázorněná níže:

Aplikace PoznámekPoznámky o stránce

Požadavky

  • Visual Studio 2019 (nejnovější verze) s nainstalovaným vývojem mobilních aplikací s nainstalovanou úlohou .NET
  • Znalost jazyka C#.
  • (volitelné) Spárovaný Mac pro sestavení aplikace v iOSu

Další informace o těchto požadavcích najdete v tématu Instalace Xamarinu. Informace o připojení sady Visual Studio 2019 k hostiteli buildu pro Mac najdete v článku Spárování s počítačem Mac pro vývoj na platformě Xamarin.iOS.

Začínáme se sadou Visual Studio 2019

  1. Spusťte Visual Studio 2019 a v úvodním okně klikněte na Vytvořit nový projekt a vytvořte nový projekt:

    Nové řešení

  2. V okně Vytvořit nový projekt vyberte v rozevíracím seznamu Typ projektu mobilní aplikaci, vyberte šablonu Mobilní aplikace (Xamarin.Forms) a klikněte na tlačítko Další:

    Volba šablony

  3. V okně Konfigurovat nový projekt nastavte název projektu na Poznámky, zvolte vhodné umístění projektu a klikněte na tlačítko Vytvořit:

    Konfigurace aplikace prostředí

    Důležité

    Fragmenty kódu C# a XAML v tomto rychlém startu vyžadují, aby řešení i projekt byly pojmenované Poznámky. Použití jiného názvu způsobí chyby sestavení při kopírování kódu z tohoto rychlého startu do projektu.

  4. V dialogovém okně Nová mobilní aplikace vyberte šablonu s kartami a klikněte na tlačítko Vytvořit :

    Vytvoření aplikace prostředí

    Po vytvoření projektu zavřete soubor GettingStarted.txt .

    Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace Shell v podrobném úvodu k shelluXamarin.Forms.

  5. V Průzkumník řešení odstraňte v projektu Poznámky následující složky (a jejich obsah):

    • Modely
    • Služby
    • Modely Zobrazení
    • Zobrazení
  6. V Průzkumník řešení odstraňte v projektu Poznámky GettingStarted.txt.

  7. V Průzkumník řešení přidejte v projektu Poznámky novou složku s názvem Zobrazení.

  8. V Průzkumník řešení vyberte v projektu Poznámky složku Zobrazení, klikněte pravým tlačítkem myši a vyberte Přidat > novou položku.... V dialogovém okně Přidat novou položku vyberte stránku obsahu položekXamarin.Forms>> v jazyce Visual C#, pojmenujte nový soubor NotesPage a klikněte na tlačítko Přidat:

    Přidání poznámkové stránky

    Tím se do složky Zobrazení přidá nová stránka s názvem NotesPage. Tato stránka bude hlavní stránkou aplikace.

  9. V Průzkumník řešení v projektu Notes poklikáním otevřete soubor NotesPage.xaml:

    Otevřít NotesPage.xaml

  10. V NotesPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z textového Editor vstupu, a dva Button objekty, které směrují aplikaci k uložení nebo odstranění souboru. Button Dva objekty jsou vodorovně rozloženy v Grid, s Editor a Grid být svisle rozloženy v StackLayout. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny souboru NotesPage.xaml stisknutím kombinace kláves CTRL+S.

  11. V Průzkumník řešení v projektu Poznámky poklikáním otevřete NotesPage.xaml.cs:

    Otevřít NotesPage.xaml.cs

  12. V NotesPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje _fileName pole, které odkazuje na soubor s názvem notes.txt , který bude ukládat data poznámky do místní složky dat aplikace pro aplikaci. Při spuštění konstruktoru stránky se soubor přečte, pokud existuje, a zobrazí se v souboru Editor. Když se Button stiskne OnSaveButtonClicked uložit obslužná rutina události, která uloží obsah Editor souboru. Když se stiskne OnDeleteButtonClicked delete Button obslužné rutiny události, která odstraní soubor, za předpokladu, že existuje, a odebere veškerý text z objektu Editor. Další informace o interakci uživatele naleznete v tématu Reagování na interakci uživatele v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny NotesPage.xaml.cs stisknutím kombinace kláves CTRL+S.

  13. V Průzkumník řešení vyberte v projektu Poznámky složku Zobrazení, klikněte pravým tlačítkem myši a vyberte Přidat > novou položku.... V dialogovém okně Přidat novou položku vyberte stránku obsahu položek >>Xamarin.FormsVisual C#, pojmenujte nový soubor AboutPage a klikněte na tlačítko Přidat:

    Přidat o aplikaci AboutPage

    Tím se do složky Zobrazení přidá nová stránka s názvem AboutPage.

  14. V Průzkumník řešení v projektu Notes poklikáním otevřete soubor AboutPage.xaml:

    Otevřít AboutPage.xaml

  15. V souboru AboutPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá ze Imagedvou Label objektů, které zobrazují text, a Button. Label Dva objekty a Button jsou svisle rozloženy v StackLayout, s Image a StackLayout být svisle rozloženy v Grid. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny souboru AboutPage.xaml stisknutím kombinace kláves CTRL+S.

  16. V Průzkumník řešení v projektu Poznámky poklikáním otevřete AboutPage.xaml.cs:

    Otevřít AboutPage.xaml.cs

  17. V AboutPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje obslužnou rutinu OnButtonClicked události, která se spustí při stisknutí dalšího Button tlačítka Learn. Po stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem identifikátoru URI metody OpenAsync . Další informace o interakci uživatele naleznete v tématu Reagování na interakci uživatele v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny do AboutPage.xaml.cs stisknutím kombinace kláves CTRL+S.

  18. V Průzkumník řešení v projektu Poznámky poklikáním otevřete soubor AppShell.xaml:

    Otevření Souboru AppShell.xaml

  19. V souboru AppShell.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje vizuální hierarchii aplikace, která se skládá ze TabBar dvou ShellContent objektů. Tyto objekty nepředstavují žádné prvky uživatelského rozhraní, ale spíše uspořádání vizuální hierarchie aplikace. Prostředí vezme tyto objekty a vytvoří uživatelské rozhraní pro obsah. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny souboru AppShell.xaml stisknutím kombinace kláves CTRL+S.

  20. V Průzkumník řešení rozbalte v projektu Poznámky soubor AppShell.xaml a poklikáním otevřete AppShell.xaml.cs:

    Otevřít AppShell.xaml.cs

  21. V AppShell.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Uložte změny do AppShell.xaml.cs stisknutím kombinace kláves CTRL+S.

  22. V Průzkumník řešení v projektu Poznámky poklikáním otevřete soubor App.xaml:

    Otevřít App.xaml

  23. V souboru App.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje App třídu, která je zodpovědná za vytvoření instance aplikace.

    Uložte změny souboru App.xaml stisknutím kombinace kláves CTRL+S.

  24. V Průzkumník řešení v projektu Poznámky rozbalte App.xaml a poklikáním otevřete App.xaml.cs:

    Otevřít App.xaml.cs

  25. V App.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje kód za App třídou, který je zodpovědný za vytvoření instance aplikace. Inicializuje MainPage vlastnost na podtříděný Shell objekt.

    Uložte změny App.xaml.cs stisknutím kombinace kláves CTRL+S.

Sestavení rychlého startu

  1. V sadě Visual Studio vyberte položku nabídky Sestavit řešení sestavení > (nebo stiskněte klávesu F6). Řešení se sestaví a na stavovém řádku sady Visual Studio se zobrazí zpráva o úspěchu:

    Úspěšné sestavení

    Pokud dojde k chybám, opakujte předchozí kroky a opravte případné chyby, dokud projekty nebudou úspěšně dokončeny.

  2. Na panelu nástrojů sady Visual Studio stiskněte tlačítko Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném emulátoru Androidu:

    Panel nástrojů Sady Visual Studio pro Android

    Poznámky v emulátoru Androidu

    Zadejte poznámku a stiskněte tlačítko Uložit . Potom aplikaci zavřete a znovu ji spusťte, abyste měli jistotu, že se zadaná poznámka znovu načte.

    Stisknutím ikony o kartě přejděte na AboutPage:

    Poznámky ke stránce v emulátoru Androidu

    Stisknutím tlačítka Další informace spusťte webovou stránku Rychlý start.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Snadné zprovoznění aplikace naXamarin.Forms jednotlivých platformách.

    Poznámka:

    Následující kroky by se měly provést pouze v případě, že máte spárovaný Mac , který splňuje požadavky na systém pro Xamarin.Forms vývoj.

  3. Na panelu nástrojů sady Visual Studio klikněte pravým tlačítkem myši na projekt Notes.iOS a vyberte Nastavit jako spouštěcí projekt.

    Nastavení aplikace Notes.iOS jako spouštěný projekt

  4. Na panelu nástrojů sady Visual Studio stiskněte tlačítko Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOS:

    Panel nástrojů sady Visual Studio pro iOS

    Poznámky v simulátoru iOS

    Zadejte poznámku a stiskněte tlačítko Uložit . Potom aplikaci zavřete a znovu ji spusťte, abyste měli jistotu, že se zadaná poznámka znovu načte.

    Stisknutím ikony o kartě přejděte na AboutPage:

    Poznámky ke stránce v simulátoru iOS

    Stisknutím tlačítka Další informace spusťte webovou stránku Rychlý start.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Snadné zprovoznění aplikace naXamarin.Forms jednotlivých platformách.

Požadavky

  • Visual Studio pro Mac (nejnovější verze) s nainstalovanou podporou platformy iOS a Android.
  • Xcode (nejnovější verze).
  • Znalost jazyka C#.

Další informace o těchto požadavcích najdete v tématu Instalace Xamarinu.

Začínáme se sadou Visual Studio pro Mac

  1. Spusťte Visual Studio pro Mac a v úvodním okně klikněte na Tlačítko Nový a vytvořte nový projekt:

    Nové řešení

  2. V dialogovém okně Zvolit šablonu pro nový projekt klikněte na multiplatformní > aplikaci, vyberte šablonu aplikace Shell Forms a klikněte na tlačítko Další :

    Volba šablony

  3. V dialogovém okně Konfigurovat aplikaci Shell Forms pojmenujte nové poznámky aplikace a klikněte na tlačítko Další:

    Konfigurace aplikace prostředí

  4. V dialogovém okně Konfigurovat novou aplikaci Shell Forms ponechte názvy řešení a projektů nastavené na Poznámky, zvolte vhodné umístění pro projekt a kliknutím na tlačítko Vytvořit vytvořte projekt:

    Konfigurace projektu prostředí

    Důležité

    Fragmenty kódu C# a XAML v tomto rychlém startu vyžadují, aby řešení i projekt byly pojmenované Poznámky. Použití jiného názvu způsobí chyby sestavení při kopírování kódu z tohoto rychlého startu do projektu.

    Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace Shell v podrobném úvodu k shelluXamarin.Forms.

  5. V oblasti řešení v projektu Poznámky odstraňte následující složky (a jejich obsah):

    • Modely
    • Služby
    • Modely Zobrazení
    • Zobrazení
  6. Na panelu řešení v projektu Poznámky odstraňte GettingStarted.txt.

  7. Na panelu řešení přidejte v projektu Poznámky novou složku s názvem Zobrazení.

  8. V oblasti řešení vyberte v projektu Poznámky složku Zobrazení, klikněte pravým tlačítkem myši a vyberte Přidat > nový soubor.... V dialogovém okně Nový soubor vyberte Forms Forms > ContentPage XAML, pojmenujte nový soubor NotesPage a klikněte na tlačítko Nový:

    Přidání poznámkové stránky

    Tím se do složky Zobrazení přidá nová stránka s názvem NotesPage. Tato stránka bude hlavní stránkou aplikace.

  9. V oblasti řešení v projektu Poznámky poklikáním otevřete soubor NotesPage.xaml:

    Otevřít NotesPage.xaml

  10. V NotesPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z textového Editor vstupu, a dva Button objekty, které směrují aplikaci k uložení nebo odstranění souboru. Button Dva objekty jsou vodorovně rozloženy v Grid, s Editor a Grid být svisle rozloženy v StackLayout. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Změny uložte do souboru NotesPage.xaml tak, že zvolíte Uložit soubor > (nebo stisknete ⌘ + S).

  11. V oblasti řešení v projektu Poznámky poklikáním otevřete NotesPage.xaml.cs:

    Otevřít NotesPage.xaml.cs

  12. V NotesPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje _fileName pole, které odkazuje na soubor s názvem notes.txt , který bude ukládat data poznámky do místní složky dat aplikace pro aplikaci. Při spuštění konstruktoru stránky se soubor přečte, pokud existuje, a zobrazí se v souboru Editor. Když se Button stiskne OnSaveButtonClicked uložit obslužná rutina události, která uloží obsah Editor souboru. Když se stiskne OnDeleteButtonClicked delete Button obslužné rutiny události, která odstraní soubor, za předpokladu, že existuje, a odebere veškerý text z objektu Editor. Další informace o interakci uživatele naleznete v tématu Reagování na interakci uživatele v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny do NotesPage.xaml.cs výběrem možnosti Uložit soubor > (nebo stisknutím ⌘ + S).

  13. V oblasti řešení vyberte v projektu Poznámky složku Zobrazení, klikněte pravým tlačítkem myši a vyberte Přidat > nový soubor.... V dialogovém okně Nový soubor vyberte Forms Forms > ContentPage XAML, pojmenujte nový soubor AboutPage a klikněte na tlačítko Nový:

    Přidat o aplikaci AboutPage

  14. V oblasti řešení v projektu Poznámky poklikáním otevřete soubor AboutPage.xaml:

    Otevřít AboutPage.xaml

    Tím se do složky Zobrazení přidá nová stránka s názvem AboutPage.

  15. V souboru AboutPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá ze Imagedvou Label objektů, které zobrazují text, a Button. Label Dva objekty a Button jsou svisle rozloženy v StackLayout, s Image a StackLayout být svisle rozloženy v Grid. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny do souboru AboutPage.xaml tak, že zvolíte Uložit soubor > (nebo stisknete ⌘ + S).

  16. V oblasti řešení v projektu Poznámky poklikáním otevřete AboutPage.xaml.cs:

    Otevřít AboutPage.xaml.cs

  17. V AboutPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje obslužnou rutinu OnButtonClicked události, která se spustí při stisknutí dalšího Button tlačítka Learn. Po stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem identifikátoru URI metody OpenAsync . Další informace o interakci uživatele naleznete v tématu Reagování na interakci uživatele v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Uložte změny do AboutPage.xaml.cs výběrem možnosti Uložit soubor > (nebo stisknutím ⌘ + S).

  18. Na panelu řešení v projektu Poznámky poklikáním otevřete soubor AppShell.xaml:

    Otevření Souboru AppShell.xaml

  19. V souboru AppShell.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje vizuální hierarchii aplikace, která se skládá ze TabBar dvou ShellContent objektů. Tyto objekty nepředstavují žádné prvky uživatelského rozhraní, ale spíše uspořádání vizuální hierarchie aplikace. Prostředí vezme tyto objekty a vytvoří uživatelské rozhraní pro obsah. Další informace o vytvoření uživatelského rozhraní naleznete v tématu Uživatelské rozhraní v rychlém startu Xamarin.Forms prostředí Podrobné informace.

    Změny uložte do souboru AppShell.xaml tak, že zvolíte Uložit soubor > (nebo stisknete ⌘ + S).

  20. Na panelu řešení v projektu Poznámky rozbalte AppShell.xaml a poklikáním otevřete AppShell.xaml.cs:

    Otevřít AppShell.xaml.cs

  21. V AppShell.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Uložte změny do AppShell.xaml.cs výběrem možnosti Uložit soubor > (nebo stisknutím ⌘ + S).

  22. Na panelu řešení v projektu Poznámky poklikáním otevřete soubor App.xaml:

    Otevřít App.xaml

  23. V souboru App.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód deklarativně definuje App třídu, která je zodpovědná za vytvoření instance aplikace.

    Uložte změny souboru App.xaml tak, že zvolíte Uložit soubor > (nebo stisknete ⌘ + S).

  24. V oblasti řešení v projektu Poznámky rozbalte App.xaml a poklikáním otevřete App.xaml.cs:

    Otevřít App.xaml.cs

  25. V App.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

    Tento kód definuje kód za App třídou, který je zodpovědný za vytvoření instance aplikace. Inicializuje MainPage vlastnost na podtříděný Shell objekt.

    Uložte změny do App.xaml.cs výběrem možnosti Uložit soubor > (nebo stisknutím ⌘ + S).

Sestavení rychlého startu

  1. V Visual Studio pro Mac vyberte položku nabídky Sestavit > vše (nebo stiskněte ⌘ + B). Projekty se sestaví a na panelu nástrojů Visual Studio pro Mac se zobrazí zpráva o úspěchu:

    Úspěšné sestavení

    Pokud dojde k chybám, opakujte předchozí kroky a opravte případné chyby, dokud projekty nebudou úspěšně dokončeny.

  2. Na panelu řešení vyberte projekt Notes.iOS, klikněte pravým tlačítkem myši a vyberte Nastavit jako spouštěný projekt:

    Nastavit iOS jako spouštěný projekt

  3. Na panelu nástrojů Visual Studio pro Mac stiskněte tlačítko Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát) a spusťte aplikaci ve zvoleném simulátoru iOS:

    panel nástrojů Visual Studio pro Mac

    Poznámky v simulátoru iOS

    Zadejte poznámku a stiskněte tlačítko Uložit . Potom aplikaci zavřete a znovu ji spusťte, abyste měli jistotu, že se zadaná poznámka znovu načte.

    Stisknutím ikony o kartě přejděte na AboutPage:

    Poznámky ke stránce v simulátoru iOS

    Stisknutím tlačítka Další informace spusťte webovou stránku Rychlý start.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Snadné zprovoznění aplikace naXamarin.Forms jednotlivých platformách.

  4. Na panelu řešení vyberte projekt Notes.Droid, klikněte pravým tlačítkem myši a vyberte Nastavit jako spouštěný projekt:

    Nastavit android jako spouštěný projekt

  5. Na panelu nástrojů Visual Studio pro Mac stiskněte tlačítko Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném emulátoru Androidu:

    Poznámky v emulátoru Androidu

    Zadejte poznámku a stiskněte tlačítko Uložit . Potom aplikaci zavřete a znovu ji spusťte, abyste měli jistotu, že se zadaná poznámka znovu načte.

    Stisknutím ikony o kartě přejděte na AboutPage:

    Poznámky ke stránce v emulátoru Androidu

    Stisknutím tlačítka Další informace spusťte webovou stránku Rychlý start.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Snadné zprovoznění aplikace naXamarin.Forms jednotlivých platformách.

Další kroky

V tomto rychlém startu jste se naučili:

  • Vytvořte Xamarin.Forms aplikaci Shell.
  • Definujte uživatelské rozhraní pro stránku pomocí jazyka XAML (Application Markup Language) eXtensible a interagujte s elementy XAML z kódu.
  • Popište vizuální hierarchii aplikace prostředí podtřídou Shell třídy.

Pokračujte k dalšímu rychlému startu a přidejte do této Xamarin.Forms aplikace Prostředí další stránky.