Vytvoření Xamarin.Forms rychlého startu aplikaceCreate a Xamarin.Forms application quickstart

Stažení ukázky stažení ukázkyDownload Sample Download the sample

V tomto rychlém startu se dozvíte, jak:In this quickstart, you will learn how to:

  • Vytvořte Xamarin.Forms aplikaci prostředí.Create a Xamarin.Forms Shell application.
  • Definujte uživatelské rozhraní pro stránku pomocí jazyka XAML (eXtensible Application Markup Language) a interakce s prvky XAML z kódu.Define the user interface for a page using eXtensible Application Markup Language (XAML), and interact with XAML elements from code.
  • Popište vizuální hierarchii aplikace prostředí podtřídou Shell třídy.Describe the visual hierarchy of a Shell application by subclassing the Shell class.

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í.The quickstart walks through how to create a cross-platform Xamarin.Forms Shell application, which enables you to enter a note and persist it to device storage. Konečná aplikace je zobrazena níže:The final application is shown below:

Poznámky k  aplikaci poznámky  týkající se stránkyNotes Application Notes About Page

PožadavkyPrerequisites

  • Visual Studio 2019 (nejnovější verze) s nainstalovaným prostředím pro vývoj mobilních aplikací s .NET .Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed.
  • Znalosti jazyka C#.Knowledge of C#.
  • volitelné Spárovaný počítač Mac, který sestaví aplikaci v iOS.(optional) A paired Mac to build the application on iOS.

Další informace o těchto požadavcích najdete v tématu instalace Xamarin.For more information about these prerequisites, see Installing 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.For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Začínáme se sadou Visual Studio 2019Get started with 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:Launch Visual Studio 2019, and in the start window click Create a new project to create a new project:

    Nové řešení

  2. V okně vytvořit nový projekt vyberte v rozevíracím seznamu typ projektu mobilní , vyberte šablonu mobilní aplikace ( Xamarin.Forms ) a klikněte na tlačítko Další :In the Create a new project window, select Mobile in the Project type drop-down, select the Mobile App (Xamarin.Forms) template, and click the Next button:

    Zvolit šablonu

  3. V okně Konfigurovat nový projekt nastavte název projektu na poznámky, vyberte vhodné umístění projektu a klikněte na tlačítko vytvořit :In the Configure your new project window, set the Project name to Notes, choose a suitable location for the project, and click the Create button:

    Konfigurace aplikace prostředí

    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.The C# and XAML snippets in this quickstart requires that the solution and project are both named Notes. Při kopírování kódu z tohoto rychlého startu do projektu dojde k chybám sestavení s jiným názvem.Using a different name will result in build errors when you copy code from this quickstart into the project.

  4. V dialogovém okně Nová mobilní aplikace vyberte šablonu s kartami a klikněte na tlačítko vytvořit :In the New Mobile App dialog, select the Tabbed template, and click the Create button:

    Vytvoření aplikace prostředí

    Po vytvoření projektu zavřete soubor GettingStarted.txt .When the project has been created, close the GettingStarted.txt file.

    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ě.For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms Shell application in the Xamarin.Forms Shell Quickstart Deep Dive.

  5. V Průzkumník řešení v projektu poznámky odstraňte následující složky (a jejich obsah):In Solution Explorer, in the Notes project, delete the following folders (and their contents):

    • ModelyModels
    • SlužbyServices
    • ViewModelsViewModels
    • ZobrazeníViews
  6. V Průzkumník řešení v projektu poznámky odstraňte GettingStarted.txt.In Solution Explorer, in the Notes project, delete GettingStarted.txt.

  7. V Průzkumník řešení do projektu poznámky přidejte novou složku s názvem zobrazení.In Solution Explorer, in the Notes project, add a new folder named Views.

  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 :In Solution Explorer, in the Notes project, select the Views folder, right-click, and select Add > New Item.... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NotesPage, and click the Add button:

    Přidat NotesPage

    Tato akce přidá novou stránku s názvem NotesPage do složky views .This will add a new page named NotesPage to the Views folder. Tato stránka bude v aplikaci hlavní stránkou aplikace.This page will be the main page in the application.

  9. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na NotesPage. XAML :In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it:

    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:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button objects that direct the application to save or delete a file. Tyto dva Button objekty jsou horizontálně rozloženy v Grid , s a jsou Editor Grid vertikálně rozloženy v StackLayout .The two Button objects are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru NotesPage. XAML stisknutím kombinace kláves CTRL + S.Save the changes to NotesPage.xaml by pressing CTRL+S.

  11. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na NotesPage.XAML.cs :In Solution Explorer, in the Notes project, double-click NotesPage.xaml.cs to open it:

    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:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    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.This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. Při spuštění konstruktoru stránky je soubor přečtený, pokud existuje a zobrazený v Editor .When the page constructor is executed the file is read, if it exists, and displayed in the Editor. Po Button stisknutí tlačítka Uložit se OnSaveButtonClicked spustí obslužná rutina události, která uloží obsah do Editor souboru.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. 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 .When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the 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ě.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do NotesPage.XAML.cs stisknutím kláves CTRL + S.Save the changes to NotesPage.xaml.cs by pressing 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 :In Solution Explorer, in the Notes project, select the Views folder, right-click, and select Add > New Item.... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file AboutPage, and click the Add button:

    Přidat AboutPage

    Tato akce přidá novou stránku s názvem AboutPage do složky views .This will add a new page named AboutPage to the Views folder.

  14. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na AboutPage. XAML :In Solution Explorer, in the Notes project, double-click AboutPage.xaml to open it:

    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:In AboutPage.xaml, remove all of the template code and replace it with the following code:

    <?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 .This code declaratively defines the user interface for the page, which consists of an Image, two Label objects that display text, and 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 .The two Label objects and Button are vertically laid out in a StackLayout, with the Image and StackLayout being vertically laid out in a 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru AboutPage. XAML stisknutím kombinace kláves CTRL + S.Save the changes to AboutPage.xaml by pressing CTRL+S.

  16. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na AboutPage.XAML.cs :In Solution Explorer, in the Notes project, double-click AboutPage.xaml.cs to open it:

    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:In AboutPage.xaml.cs, remove all of the template code and replace it with the following code:

    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 .This code defines the OnButtonClicked event handler, which is executed when the Learn more Button is pressed. Po stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem URI pro OpenAsync metodu.When the button is pressed, a web browser is launched and the page represented by the URI argument to the OpenAsync method is displayed. Další informace o interakci s uživatelem najdete v tématu reakce na interakci uživatele v Xamarin.Forms prostředí rychlý Start podrobně.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do AboutPage.XAML.cs stisknutím kláves CTRL + S.Save the changes to AboutPage.xaml.cs by pressing CTRL+S.

  18. V Průzkumník řešení otevřete v projektu poznámky dvojitým kliknutím na AppShell. XAML :In Solution Explorer, in the Notes project, double-click AppShell.xaml to open it:

    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:In AppShell.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines the visual hierarchy of the application, which consists of a TabBar containing two ShellContent objects. Tyto objekty nepředstavuje žádné prvky uživatelského rozhraní, ale spíše i organizaci vizuální hierarchie aplikace.These objects don't represent any user interface elements, but rather the organization of the application's visual hierarchy. Prostředí provede tyto objekty a vytvoří uživatelské rozhraní pro obsah.Shell will take these objects and produce the user interface for the content. 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru AppShell. XAML stisknutím kombinace kláves CTRL + S.Save the changes to AppShell.xaml by pressing CTRL+S.

  20. V Průzkumník řešení v projektu poznámky rozbalte AppShell. xaml a dvakrát klikněte na AppShell.XAML.cs a otevřete ho:In Solution Explorer, in the Notes project, expand AppShell.xaml, and double-click AppShell.xaml.cs to open it:

    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:In AppShell.xaml.cs, remove all of the template code and replace it with the following code:

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

    Uložte změny do AppShell.XAML.cs stisknutím kláves CTRL + S.Save the changes to AppShell.xaml.cs by pressing CTRL+S.

  22. V Průzkumník řešení klikněte v projektu poznámky dvakrát na App. XAML a otevřete ho:In Solution Explorer, in the Notes project, double-click App.xaml to open it:

    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:In App.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines an App class, which is responsible for instantiating the application.

    Uložte změny do souboru App. XAML stisknutím kláves CTRL + S.Save the changes to App.xaml by pressing 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:In Solution Explorer, in the Notes project, expand App.xaml, and double-click App.xaml.cs to open it:

    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:In App.xaml.cs, remove all of the template code and replace it with the following code:

    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.This code defines the code-behind for the App class, that is responsible for instantiating the application. Inicializuje MainPage vlastnost na objekt podtřídy Shell .It initializes the MainPage property to the subclassed Shell object.

    Uložte změny do App.XAML.cs stisknutím kláves CTRL + S.Save the changes to App.xaml.cs by pressing CTRL+S.

Sestavování rychlého startuBuilding the quickstart

  1. V aplikaci Visual Studio vyberte položku nabídky build > Build a řešení (nebo stiskněte klávesu F6).In Visual Studio, select the Build > Build Solution menu item (or press F6). Toto řešení se sestaví a zobrazí se zpráva o úspěchu na stavovém řádku sady Visual Studio:The solution will build and a success message will appear in the Visual Studio status bar:

    Sestavení bylo úspěšné.

    Pokud dojde k chybám, opakujte předchozí kroky a opravte všechny chyby, dokud se projekty neúspěšně sestaví.If there are errors, repeat the previous steps and correct any mistakes until the projects build successfully.

  2. Na panelu nástrojů sady Visual Studio stiskněte tlačítko Start (tlačítko trojúhelníku, které se podobá tlačítku přehrát) a spusťte aplikaci v zvoleném emulátoru Androidu:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen Android emulator:

    Panel nástrojů sady Visual Studio pro Android

    Poznámky v Android Emulator

    Zadejte poznámku a stiskněte tlačítko Uložit .Enter a note and press the Save button. Pak aplikaci zavřete a znovu spusťte, aby se zajistilo, že se Poznámka, kterou jste zadali, znovu načetla.Then, close the application and re-launch it to ensure the note you entered is reloaded.

    Kliknutím na ikonu karty o přejděte na AboutPage :Press the About tab icon to navigate to the AboutPage:

    Poznámky ke stránce v Android Emulator

    Kliknutím na tlačítko Další informace otevřete webovou stránku rychlé starty.Press the Learn more button to launch the quickstarts web page.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu spuštění aplikace na všech platformách v Xamarin.Forms rychlém startu podrobně.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

    Poznámka

    Následující kroky by se měly provádět jenom v případě, že máte spárovaný počítač Mac , který splňuje požadavky na systém pro Xamarin.Forms vývoj.The following steps should only be carried out if you have a paired Mac that meets the system requirements for Xamarin.Forms development.

  3. Na panelu nástrojů sady Visual Studio klikněte pravým tlačítkem myši na projekt poznámky. iOS a vyberte nastavit jako spouštěný projekt.In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.

    Nastavení poznámky. iOS jako spouštěného projektu

  4. Na panelu nástrojů sady Visual Studio stiskněte tlačítko Start (tlačítko trojúhelníku, které se podobá tlačítku přehrát) a spusťte aplikaci v zvoleném vzdáleném simulátoru iOS:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen iOS remote simulator:

    Panel nástrojů pro iOS v sadě Visual Studio

    Poznámky v simulátoru iOSNotes in the iOS Simulator

    Zadejte poznámku a stiskněte tlačítko Uložit .Enter a note and press the Save button. Pak aplikaci zavřete a znovu spusťte, aby se zajistilo, že se Poznámka, kterou jste zadali, znovu načetla.Then, close the application and re-launch it to ensure the note you entered is reloaded.

    Kliknutím na ikonu karty o přejděte na AboutPage :Press the About tab icon to navigate to the AboutPage:

    Poznámky ke stránce v simulátoru iOSNotes about page in the iOS Simulator

    Kliknutím na tlačítko Další informace otevřete webovou stránku rychlé starty.Press the Learn more button to launch the quickstarts web page.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu spuštění aplikace na všech platformách v Xamarin.Forms rychlém startu podrobně.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

PožadavkyPrerequisites

  • Visual Studio pro Mac (nejnovější verze) s nainstalovanou podporou platformy iOS a Android.Visual Studio for Mac (latest release), with iOS and Android platform support installed.
  • Xcode (nejnovější verze)Xcode (latest release).
  • Znalosti jazyka C#.Knowledge of C#.

Další informace o těchto požadavcích najdete v tématu instalace Xamarin.For more information about these prerequisites, see Installing Xamarin.

Začínáme se sadou Visual Studio pro MacGet started with Visual Studio for Mac

  1. Spusťte Visual Studio pro Mac a v okně Start klikněte na Nový a vytvořte nový projekt:Launch Visual Studio for Mac, and in the start window click New to create a new project:

    Nové řešení

  2. V dialogovém okně Zvolit šablonu pro nový projekt klikněte na multiplatformní > aplikaci, vyberte šablonu aplikace Forms v prostředí a klikněte na tlačítko Další :In the Choose a template for your new project dialog, click Multiplatform > App, select the Shell Forms App template, and click the Next button:

    Zvolit šablonu

  3. V dialogovém okně Konfigurovat aplikaci Forms prostředí pojmenujte nové poznámky aplikace a klikněte na tlačítko Další :In the Configure your Shell Forms app dialog, name the new app Notes, and click the Next button:

    Konfigurace aplikace prostředí

  4. V dialogovém okně Konfigurovat novou aplikaci formuláře prostředí ponechte názvy řešení a projektu nastavené na poznámky, vyberte vhodné umístění projektu a kliknutím na tlačítko vytvořit vytvořte projekt:In the Configure your new Shell Forms app dialog, leave the Solution and Project names set to Notes, choose a suitable location for the project, and click the Create button to create the project:

    Konfigurace projektu prostředí

    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.The C# and XAML snippets in this quickstart requires that the solution and project are both named Notes. Při kopírování kódu z tohoto rychlého startu do projektu dojde k chybám sestavení s jiným názvem.Using a different name will result in build errors when you copy code from this quickstart into the project.

    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ě.For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms Shell application in the Xamarin.Forms Shell Quickstart Deep Dive.

  5. V oblast řešení v projektu poznámky odstraňte následující složky (a jejich obsah):In the Solution Pad, in the Notes project, delete the following folders (and their contents):

    • ModelyModels
    • SlužbyServices
    • ViewModelsViewModels
    • ZobrazeníViews
  6. V oblast řešení v projektu poznámky odstraňte GettingStarted.txt.In the Solution Pad, in the Notes project, delete GettingStarted.txt.

  7. V oblast řešení do projektu poznámky přidejte novou složku s názvem zobrazení.In the Solution Pad, in the Notes project, add a new folder named Views.

  8. V oblast řešení v projektu poznámky vyberte složku zobrazení , klikněte pravým tlačítkem myši a vyberte Přidat > nový soubor.... V dialogovém okně nový soubor vyberte formuláře > Forms ContentPage XAML, zadejte název nového souboru NotesPage a klikněte na tlačítko Nový :In the Solution Pad, in the Notes project, select the Views folder, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NotesPage, and click the New button:

    Přidat NotesPage

    Tato akce přidá novou stránku s názvem NotesPage do složky views .This will add a new page named NotesPage to the Views folder. Tato stránka bude v aplikaci hlavní stránkou aplikace.This page will be the main page in the application.

  9. V oblast řešení otevřete v projektu poznámky dvojitým kliknutím na NotesPage. XAML :In the Solution Pad, in the Notes project, double-click NotesPage.xaml to open it:

    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:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button objects that direct the application to save or delete a file. Tyto dva Button objekty jsou horizontálně rozloženy v Grid , s a jsou Editor Grid vertikálně rozloženy v StackLayout .The two Button objects are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru NotesPage. XAML kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S).

  11. V oblast řešení otevřete v projektu poznámky dvojitým kliknutím na NotesPage.XAML.cs :In the Solution Pad, in the Notes project, double-click NotesPage.xaml.cs to open it:

    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:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    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.This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. Při spuštění konstruktoru stránky je soubor přečtený, pokud existuje a zobrazený v Editor .When the page constructor is executed the file is read, if it exists, and displayed in the Editor. Po Button stisknutí tlačítka Uložit se OnSaveButtonClicked spustí obslužná rutina události, která uloží obsah do Editor souboru.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. 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 .When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the 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ě.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Shell Quickstart Deep Dive.

    Změny NotesPage.XAML.cs uložte kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

  13. V oblast řešení v projektu poznámky vyberte složku zobrazení , klikněte pravým tlačítkem myši a vyberte Přidat > nový soubor.... V dialogovém okně nový soubor vyberte formuláře > Forms ContentPage XAML, zadejte název nového souboru AboutPage a klikněte na tlačítko Nový :In the Solution Pad, in the Notes project, select the Views folder, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file AboutPage, and click the New button:

    Přidat AboutPage

  14. V oblast řešení otevřete v projektu poznámky dvojitým kliknutím na AboutPage. XAML :In the Solution Pad, in the Notes project, double-click AboutPage.xaml to open it:

    Otevřete AboutPage. XAML

    Tato akce přidá novou stránku s názvem AboutPage do složky views .This will add a new page named AboutPage to the Views folder.

  15. V souboru AboutPage. XAML odeberte veškerý kód šablony a nahraďte ho následujícím kódem:In AboutPage.xaml, remove all of the template code and replace it with the following code:

    <?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 .This code declaratively defines the user interface for the page, which consists of an Image, two Label objects that display text, and 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 .The two Label objects and Button are vertically laid out in a StackLayout, with the Image and StackLayout being vertically laid out in a 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru AboutPage. XAML kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to AboutPage.xaml by choosing File > Save (or by pressing ⌘ + S).

  16. V oblast řešení otevřete v projektu poznámky dvojitým kliknutím na AboutPage.XAML.cs :In the Solution Pad, in the Notes project, double-click AboutPage.xaml.cs to open it:

    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:In AboutPage.xaml.cs, remove all of the template code and replace it with the following code:

    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 .This code defines the OnButtonClicked event handler, which is executed when the Learn more Button is pressed. Po stisknutí tlačítka se spustí webový prohlížeč a zobrazí se stránka reprezentovaná argumentem URI pro OpenAsync metodu.When the button is pressed, a web browser is launched and the page represented by the URI argument to the OpenAsync method is displayed. Další informace o interakci s uživatelem najdete v tématu reakce na interakci uživatele v Xamarin.Forms prostředí rychlý Start podrobně.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Shell Quickstart Deep Dive.

    Změny AboutPage.XAML.cs uložte kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to AboutPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

  18. V oblast řešení otevřete v projektu poznámky dvojitým kliknutím na AppShell. XAML :In the Solution Pad, in the Notes project, double-click AppShell.xaml to open it:

    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:In AppShell.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines the visual hierarchy of the application, which consists of a TabBar containing two ShellContent objects. Tyto objekty nepředstavuje žádné prvky uživatelského rozhraní, ale spíše i organizaci vizuální hierarchie aplikace.These objects don't represent any user interface elements, but rather the organization of the application's visual hierarchy. Prostředí provede tyto objekty a vytvoří uživatelské rozhraní pro obsah.Shell will take these objects and produce the user interface for the content. 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ě.For more information about creating the user interface, see User interface in the Xamarin.Forms Shell Quickstart Deep Dive.

    Uložte změny do souboru AppShell. XAML kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to AppShell.xaml by choosing File > Save (or by pressing ⌘ + S).

  20. V oblast řešení v projektu poznámky rozbalte AppShell. xaml a dvakrát klikněte na AppShell.XAML.cs a otevřete ho:In the Solution Pad, in the Notes project, expand AppShell.xaml, and double-click AppShell.xaml.cs to open it:

    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:In AppShell.xaml.cs, remove all of the template code and replace it with the following code:

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

    Změny AppShell.XAML.cs uložte kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to AppShell.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

  22. V oblast řešení klikněte v projektu poznámky dvakrát na App. XAML a otevřete ho:In the Solution Pad, in the Notes project, double-click App.xaml to open it:

    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:In App.xaml, remove all of the template code and replace it with the following code:

    <?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.This code declaratively defines an App class, which is responsible for instantiating the application.

    Uložte změny do souboru App. XAML kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S).

  24. V oblast řešení v projektu poznámky rozbalte App. xaml a dvakrát klikněte na App.XAML.cs a otevřete ho:In the Solution Pad, in the Notes project, expand App.xaml, and double-click App.xaml.cs to open it:

    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:In App.xaml.cs, remove all of the template code and replace it with the following code:

    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.This code defines the code-behind for the App class, that is responsible for instantiating the application. Inicializuje MainPage vlastnost na objekt podtřídy Shell .It initializes the MainPage property to the subclassed Shell object.

    Změny App.XAML.cs uložte kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S).Save the changes to App.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

Sestavování rychlého startuBuilding the quickstart

  1. V Visual Studio pro Mac vyberte položku nabídky sestavit > sestavit vše (nebo stiskněte ⌘ + B).In Visual Studio for Mac, select the Build > Build All menu item (or press ⌘ + B). Projekty se sestaví a zpráva o úspěchu se zobrazí na panelu nástrojů Visual Studio pro Mac:The projects will build and a success message will appear in the Visual Studio for Mac toolbar:

    Sestavení bylo úspěšné.

    Pokud dojde k chybám, opakujte předchozí kroky a opravte všechny chyby, dokud se projekty neúspěšně sestaví.If there are errors, repeat the previous steps and correct any mistakes until the projects build successfully.

  2. V oblast řešení vyberte projekt Notes. iOS , klikněte pravým tlačítkem myši a vyberte nastavit jako spouštěný projekt:In the Solution Pad, select the Notes.iOS project, right-click, and select Set As Startup Project:

    Nastavení iOS jako spouštěného projektu

  3. Na panelu nástrojů Visual Studio pro Mac stiskněte tlačítko Start (tlačítko trojúhelníku, které se podobá tlačítku přehrát) a spusťte aplikaci v rámci zvoleného simulátoru iOS:In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS Simulator:

    Panel nástrojů Visual Studio pro Mac

    Poznámky v simulátoru iOS

    Zadejte poznámku a stiskněte tlačítko Uložit .Enter a note and press the Save button. Pak aplikaci zavřete a znovu spusťte, aby se zajistilo, že se Poznámka, kterou jste zadali, znovu načetla.Then, close the application and re-launch it to ensure the note you entered is reloaded.

    Kliknutím na ikonu karty o přejděte na AboutPage :Press the About tab icon to navigate to the AboutPage:

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

    Kliknutím na tlačítko Další informace otevřete webovou stránku rychlé starty.Press the Learn more button to launch the quickstarts web page.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu spuštění aplikace na všech platformách v Xamarin.Forms rychlém startu podrobně.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

  4. V oblast řešení vyberte projekt Notes. Droid , klikněte pravým tlačítkem myši a vyberte nastavit jako spouštěný projekt:In the Solution Pad, select the Notes.Droid project, right-click, and select Set As Startup Project:

    Nastavení Androidu jako spouštěného projektu

  5. Na panelu nástrojů Visual Studio pro Mac stiskněte tlačítko Start (tlačítko trojúhelníku, které se podobá tlačítku přehrát) a spusťte aplikaci v rámci zvoleného emulátoru Androidu:In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen Android emulator:

    Poznámky v Android Emulator

    Zadejte poznámku a stiskněte tlačítko Uložit .Enter a note and press the Save button. Pak aplikaci zavřete a znovu spusťte, aby se zajistilo, že se Poznámka, kterou jste zadali, znovu načetla.Then, close the application and re-launch it to ensure the note you entered is reloaded.

    Kliknutím na ikonu karty o přejděte na AboutPage :Press the About tab icon to navigate to the AboutPage:

    Poznámky ke stránce v Android Emulator

    Kliknutím na tlačítko Další informace otevřete webovou stránku rychlé starty.Press the Learn more button to launch the quickstarts web page.

    Další informace o tom, jak se aplikace spouští na jednotlivých platformách, najdete v tématu spuštění aplikace na všech platformách v Xamarin.Forms rychlém startu podrobně.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

Další krokyNext steps

V tomto rychlém startu jste se naučili:In this quickstart, you learned how to:

  • Vytvořte Xamarin.Forms aplikaci prostředí.Create a Xamarin.Forms Shell application.
  • Definujte uživatelské rozhraní pro stránku pomocí jazyka XAML (eXtensible Application Markup Language) a interakce s prvky XAML z kódu.Define the user interface for a page using eXtensible Application Markup Language (XAML), and interact with XAML elements from code.
  • Popište vizuální hierarchii aplikace prostředí podtřídou Shell třídy.Describe the visual hierarchy of a Shell application by subclassing the Shell class.

Přejděte k dalšímu rychlému startu a přidejte do této Xamarin.Forms aplikace prostředí další stránky.Continue to the next quickstart to add additional pages to this Xamarin.Forms Shell application.