Vytvoření Xamarin.Forms rychlého startu aplikace

Stáhněte si ukázku. Stažení ukázky

V tomto rychlém startu se dozvíte, jak:

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

V tomto rychlém startu se dozvíte, jak vytvořit Xamarin.Forms aplikaci prostředí pro různé platformy, která umožňuje zadat poznámku a zachovat ji do úložiště zařízení. Konečná aplikace je zobrazena níže:

 Aplikace Notes.  Poznámky o stránce

Požadavky

  • Visual Studio 2019 (nejnovější verze) s nainstalovaným prostředím pro vývoj mobilních aplikací s .net .
  • Znalosti jazyka C#.
  • volitelné Spárovaný počítač Mac, který sestaví aplikaci v iOS.

Další informace o těchto požadavcích najdete v tématu instalace Xamarin. 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 s Visual Studio 2019

  1. spusťte Visual Studio 2019 a v okně start klikněte na vytvořit nový projekt pro vytvoření nového projektu:

    Nové řešení.

  2. v okně vytvořit nový projekt vyberte v rozevíracím seznamu Project typ možnost mobilní , vyberte šablonu mobilní aplikace ( Xamarin.Forms ) a klikněte na tlačítko další :

    Vyberte šablonu.

  3. v okně konfigurovat nový projekt nastavte Project název na poznámky, vyberte vhodné umístění projektu a klikněte na tlačítko vytvořit :

    Nakonfigurujte aplikaci Shell.

    Důležité

    Fragmenty kódu C# a XAML v tomto rychlém startu vyžadují, aby řešení a projekt byly pojmenované poznámky. Při kopírování kódu z tohoto rychlého startu do projektu dojde k chybám sestavení s jiným názvem.

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

    Vytvořte aplikaci prostředí.

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

    Další informace o vytvořené knihovně .NET Standard najdete v tématu anatomie Xamarin.Forms aplikace Shell v Xamarin.Forms rychlém startu prostředí pro rychlý Start podrobně.

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

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

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

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

    Přidat NotesPage.

    Tato akce přidá novou stránku s názvem NotesPage do složky views . Tato stránka bude v aplikaci hlavní stránkou aplikace.

  9. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na NotesPage. XAML :

    Otevřete NotesPage. XAML.

  10. V souboru 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í stránky, které se skládá z Editor pro zadání textu, a dva Button objekty, které nasměrují aplikaci k uložení nebo odstranění souboru. Tyto dva Button objekty jsou horizontálně rozloženy v Grid , s a jsou Editor Grid vertikálně rozloženy v StackLayout . Další informace o vytváření uživatelského rozhraní najdete v tématu uživatelské rozhraní v Xamarin.Forms rychlém startu prostředí pro podrobně.

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

  11. V Průzkumník řešení v projektu poznámky dvakrát klikněte na NotesPage. XAML. cs a otevřete ho:

    Otevřete NotesPage. XAML. cs.

  12. V souboru NotesPage. XAML. cs odeberte celý 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ámek do složky místní data aplikace pro danou aplikaci. Při spuštění konstruktoru stránky je soubor přečtený, pokud existuje a zobrazený v Editor . Po Button stisknutí tlačítka Uložit se OnSaveButtonClicked spustí obslužná rutina události, která uloží obsah do Editor souboru. Po Button stisknutí tlačítka odstranit se OnDeleteButtonClicked spustí obslužná rutina události, která soubor odstraní, za předpokladu, že existuje, a odstraní libovolný text z Editor . Další informace o interakci s uživatelem najdete v tématu reakce na interakci uživatele v Xamarin.Forms prostředí rychlý Start podrobně.

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

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

    Přidat AboutPage.

    Tato akce přidá novou stránku s názvem AboutPage do složky views .

  14. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na AboutPage. XAML :

    Otevřete 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í stránky, které se skládá z Image , dvou Label objektů, které zobrazují text a Button . Dva Label objekty a Button jsou vertikálně rozloženy v StackLayout , s a jsou Image StackLayout vertikálně rozloženy v Grid . Další informace o vytváření uživatelského rozhraní najdete v tématu uživatelské rozhraní v Xamarin.Forms rychlém startu prostředí pro podrobně.

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

  16. V Průzkumník řešení v projektu poznámky dvakrát klikněte na AboutPage. XAML. cs a otevřete ho:

    Otevřete AboutPage. XAML. cs.

  17. V souboru AboutPage. XAML. cs odeberte celý 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 OnButtonClicked obslužnou rutinu události, která je spuštěna při stisknutí více informací Button . Po stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem URI pro OpenAsync metodu. Další informace o interakci s uživatelem najdete v tématu reakce na interakci uživatele v Xamarin.Forms prostředí rychlý Start podrobně.

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

  18. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na AppShell. XAML :

    Otevřete 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á z objektu TabBar obsahujícího dva ShellContent objekty. Tyto objekty nepředstavuje žádné prvky uživatelského rozhraní, ale spíše i organizaci vizuální hierarchie aplikace. Prostředí provede tyto objekty a vytvoří uživatelské rozhraní pro obsah. Další informace o vytváření uživatelského rozhraní najdete v tématu uživatelské rozhraní v Xamarin.Forms rychlém startu prostředí pro podrobně.

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

  20. V Průzkumník řešení v projektu poznámky rozbalte AppShell. XAML a dvojím kliknutím na AppShell. XAML. cs ho otevřete:

    Otevřete AppShell. XAML. cs.

  21. V souboru AppShell. XAML. cs odeberte celý 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 souboru AppShell. XAML. cs stisknutím kombinace kláves CTRL + S.

  22. V Průzkumník řešení klikněte v projektu poznámky dvakrát na App. XAML a otevřete ho:

    Otevřete 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 do souboru App. XAML stisknutím kláves CTRL + S.

  24. V Průzkumník řešení v projektu poznámky rozbalte App. XAML a dvakrát klikněte na App. XAML. cs a otevřete ho:

    Otevřete App. XAML. cs.

  25. V souboru App. XAML. cs odeberte celý 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 na pozadí pro App třídu, která je zodpovědná za vytvoření instance aplikace. Inicializuje MainPage vlastnost na objekt podtřídy Shell .

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

Sestavování rychlého startu

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

    Sestavení bylo úspěšné.

    Pokud dojde k chybám, opakujte předchozí kroky a opravte všechny chyby, dokud se projekty úspěšně nevytvářely.

  2. Na Visual Studio panelu nástrojů spusťte aplikaci ve zvoleném emulátoru Androidu stisknutím tlačítka Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát):

    Visual Studio Panel nástrojů Androidu.

    Poznámky v části Android Emulator.

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

    Stisknutím ikony karty About (O nás) přejděte na AboutPage :

    Poznámky ke stránce v android Emulator.

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

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Spuštění aplikace na jednotlivých platformách v tématu Podrobné informace Xamarin.Forms o rychlém startu.

    Poznámka

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

  3. Na panelu Visual Studio klikněte pravým tlačítkem na projekt Notes.iOS a vyberte Nastavit jako po spuštění Project.

    Nastavte Notes.iOS jako spouštěcí Project.

  4. Na Visual Studio panelu nástrojů spusťte aplikaci ve zvoleném vzdáleném simulátoru iOSu stisknutím tlačítka Start (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát):

    Visual Studio panelu nástrojů pro iOS.

    Poznámky v simulátoru iOSu

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

    Stisknutím ikony karty About (O nás) přejděte na AboutPage :

    Poznámky k stránce v simulátoru iOSu

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

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Spuštění aplikace na jednotlivých platformách v tématu Podrobné informace Xamarin.Forms o rychlém startu.

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 Nový a vytvořte nový projekt:

    Nové řešení.

  2. V dialogovém okně Zvolit šablonu pro nový projekt klikněte na Multiplatformní > App, vyberte šablonu Formulářová aplikace Shell a klikněte na tlačítko Další:

    Zvolte šablonu.

  3. V dialogovém okně Configure your Shell Forms app (Konfigurace formulářových formulářů prostředí) pojmnujte novou aplikaci Notes(Poznámky) a klikněte na tlačítko Next (Další):

    Nakonfigurujte aplikaci Shell.

  4. V dialogovém okně Configure your new Shell Forms app (Konfigurovat nové formuláře prostředí) ponechte názvy Solution (Řešení) a Project (Poznámky), zvolte vhodné umístění projektu a kliknutím na tlačítko Create (Vytvořit) vytvořte projekt:

    Nakonfigurujte nastavení Project.

    Důležité

    Fragmenty kódu C# a XAML v tomto rychlém startu vyžadují, aby řešení i projekt měli název Notes. Pokud použijete jiný název, dojde při kopírování kódu z tohoto rychlého startu do projektu k chybám sestavení.

    Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie aplikace Xamarin.Forms Shell v tématu Shell Xamarin.Forms Quickstart Deep Dive.

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

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

  7. V Oblast řešení v projektu Poznámky přidejte novou složku s názvem Views.

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

    Přidejte NotesPage.

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

  9. V Oblast řešení v projektu Poznámky poklikejte na soubor NotesPage.xaml a otevřete ho:

    Otevřete soubor NotesPage.xaml.

  10. V souboru 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 objektu pro zadání textu, a dvou objektů, které aplikaci nasměrují k uložení Editor Button nebo odstranění souboru. Oba Button objekty jsou vodorovně rozloženy v objektu , kde objekt a Grid Editor je Grid svisle rozložen v StackLayout objektu . Další informace o vytváření uživatelského rozhraní najdete v tématu Uživatelské rozhraní v rychlém startu prostředí – Xamarin.Forms podrobné informace.

    Uložte změny souboru NotesPage.xaml tak, že zvolíte Soubor > Uložit (nebo stisknutím⌘ + S).

  11. V Oblast řešení v projektu Notes poklikejte na soubor NotesPage.xaml.cs a otevřete ho:

    Otevřete soubor NotesPage.xaml.cs.

  12. V souboru 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 pole, které odkazuje na soubor s názvem , který bude ukládat data poznámek do místní složky _fileName notes.txt dat aplikace pro aplikaci. Při spuštění konstruktoru stránky se soubor přečte, pokud existuje, a zobrazí se v Editor objektu . Při stisknutí save Button se spustí OnSaveButtonClicked obslužná rutina události, která uloží obsah do Editor souboru . Při stisknutí delete se spustí obslužná rutina události, která odstraní soubor za předpokladu, že existuje, a odebere Button OnDeleteButtonClicked z Editor . Další informace o interakci s uživatelem najdete v tématu Reakce na interakci uživatele v tématu Shell Xamarin.Forms Quickstart Deep Dive.

    Uložte změny souboru NotesPage.xaml.cs tak, že zvolíte Soubor > Uložit (nebo stisknutím⌘ + S).

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

    Přidejte AboutPage.

  14. V Oblast řešení v projektu Poznámky poklikejte na AboutPage.xaml a otevřete ho:

    Otevřete soubor AboutPage.xaml.

    Tím se do složky Views 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 dvou objektů, které zobrazují Image Label text, a Button . Dva objekty a jsou svisle rozloženy v objektu , kde objekt a je Label Button StackLayout Image StackLayout svisle rozložen v Grid objektu . Další informace o vytváření uživatelského rozhraní najdete v tématu Uživatelské rozhraní v rychlém startu prostředí – Xamarin.Forms podrobné informace.

    Uložte změny souboru AboutPage.xaml tak, že zvolíte Soubor > Uložit (nebo stisknutím⌘ + S).

  16. V Oblast řešení v projektu Notes poklikejte na AboutPage.xaml.cs a otevřete ho:

    Otevřete soubor AboutPage.xaml.cs.

  17. V souboru 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 OnButtonClicked rutinu události, která se spustí při stisknutí tlačítka Další Button informace. Při stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem URI OpenAsync metody . Další informace o interakci s uživatelem najdete v tématu Reakce na interakci uživatele v tématu Shell Xamarin.Forms Quickstart Deep Dive.

    Uložte změny souboru AboutPage.xaml.cs tak, že zvolíte Soubor > Uložit (nebo stisknutím⌘ + S).

  18. V Oblast řešení v projektu Poznámky poklikejte na soubor AppShell.xaml a otevřete ho:

    Otevřete soubor 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 vytváření uživatelského rozhraní najdete v tématu Uživatelské rozhraní v rychlém startu prostředí – Xamarin.Forms podrobné informace.

    Uložte změny souboru AppShell.xaml tak, že zvolíte Soubor > Uložit (nebo stisknutím kláves⌘ + S).

  20. V části Oblast řešení v projektu Poznámky rozbalte uzel AppShell.xaml a poklikejte na soubor AppShell.xaml.cs a otevřete ho:

    Otevřete soubor AppShell.xaml.cs.

  21. V souboru 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 souboru AppShell.xaml.cs tak, že zvolíte Soubor > Uložit (nebo stisknutím ⌘ + S).

  22. V Oblast řešení v projektu Poznámky poklikejte na soubor App.xaml a otevřete ho:

    Otevřete Soubor 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 Soubor > Uložit (nebo stisknutím ⌘ + S).

  24. V Oblast řešení rozbalte v projektu Poznámky uzel App.xaml a poklikejte na soubor App.xaml.cs a otevřete ho:

    Otevřete soubor App.xaml.cs.

  25. V souboru 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 na pozadí pro třídu , která je zodpovědná za App vytvoření instance aplikace. Inicializuje vlastnost MainPage objektu podtřídy. Shell

    Uložte změny souboru App.xaml.cs tak, že zvolíte Soubor > Uložit (nebo stisknutím ⌘ + S).

Vytvoření rychlého startu

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

    Sestavení bylo úspěšné.

    Pokud dojde k chybám, opakujte předchozí kroky a opravte všechny chyby, dokud se projekty úspěšně nevytvářely.

  2. V Oblast řešení vyberte projekt Notes.iOS, klikněte pravým tlačítkem a vyberte Nastavit jako spouštěcí Project:

    Nastavte iOS jako spouštěcí Project.

  3. Na panelu Visual Studio pro Mac panelu nástrojů stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spouštěla ve zvoleném simulátoru iOSu:

    Visual Studio pro Mac Panelu nástrojů.

    Poznámky v simulátoru iOSu

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

    Stisknutím ikony karty About (O nás) přejděte na AboutPage :

    Poznámky k stránce v simulátoru iOSu

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

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Spuštění aplikace na jednotlivých platformách v tématu Podrobné informace Xamarin.Forms o rychlém startu.

  4. V Oblast řešení vyberte projekt Notes.Droid, klikněte pravým tlačítkem a vyberte Nastavit jako spouštěcí Project:

    Nastavte Android jako Spouštěcí Project.

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

    Poznámky v části Android Emulator.

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

    Stisknutím ikony karty About (O nás) přejděte na AboutPage :

    Poznámky ke stránce v android Emulator.

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

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu Spuštění aplikace na jednotlivých platformách v tématu Podrobné informace Xamarin.Forms o rychlém startu.

Další kroky

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

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

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