Vytvoření první Xamarin.Forms aplikace

  • Článek

Podrobné pokyny pro Windows

Download Sample Stažení ukázky

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nový > projekt soubor>... nebo stiskněte tlačítko Vytvořit nový projekt...

  2. Vyhledejte "Xamarin" nebo zvolte Mobilní z nabídky Typ projektu. Vyberte typ projektu Mobilní aplikace (Xamarin.Forms).

  3. Zvolte název projektu – v příkladu se používá "AwesomeApp".

  4. Klikněte na typ prázdného projektu a ujistěte se, že jsou vybrané Android a iOS:

    Android and iOS Blank App

  5. Počkejte, až se balíčky NuGet obnoví (na stavovém řádku se zobrazí zpráva o dokončení obnovení).

  6. Nové instalace sady Visual Studio 2022 nebudou mít nainstalované sady Android SDK. Může se zobrazit výzva k instalaci nejnovější sady Android SDK:

    Install Android SDK

  7. Nové instalace sady Visual Studio 2022 nebudou mít nakonfigurovaný emulátor Androidu. Klikněte na šipku rozevíracího seznamu na tlačítku Ladit a zvolte Vytvořit Android Emulator a spusťte obrazovku pro vytvoření emulátoru:

    Create Android Emulator dropdown

  8. Na obrazovce pro vytvoření emulátoru použijte výchozí nastavení a klikněte na tlačítko Vytvořit :

    Android emulator creation screen

  9. Vytvoření emulátoru se vrátí do okna Správce zařízení. Kliknutím na tlačítko Start spusťte nový emulátor:

    Android emulator in the Device Manager

  10. Visual Studio 2022 by teď mělo zobrazovat název nového emulátoru na tlačítku Ladění :

    Android emulator name on the Debug button

  11. Kliknutím na tlačítko Ladit sestavte a nasaďte aplikaci do emulátoru Androidu:

    Android emulator displaying the application

Přizpůsobení aplikace

Aplikaci je možné přizpůsobit a přidat tak interaktivní funkce. Pokud chcete do aplikace přidat interakci uživatele, proveďte následující kroky:

  1. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Ladění aplikace v Androidu:

    Android app with Button

Vytvoření aplikace pro iOS v sadě Visual Studio 2022

Aplikaci pro iOS je možné sestavit a ladit ze sady Visual Studio se síťovým počítačem Mac. Další informace najdete v pokynech k nastavení.

Podrobné pokyny pro Windows

Download Sample Stažení ukázky

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nový > projekt soubor>... nebo stiskněte tlačítko Vytvořit nový projekt...

    Create a new project

  2. Vyhledejte "Xamarin" nebo zvolte Mobilní z nabídky Typ projektu. Vyberte typ projektu Mobilní aplikace :Xamarin.Forms

    Filter for Xamarin projects

  3. Zvolte název projektu – v příkladu se používá "AwesomeApp":

    Choose a project name

  4. Klikněte na typ prázdného projektu a ujistěte se, že jsou vybrané Android a iOS:

    Android and iOS, with .NET Standard

  5. Počkejte, až se balíčky NuGet obnoví (na stavovém řádku se zobrazí zpráva o dokončení obnovení).

  6. Nové instalace sady Visual Studio 2019 nebudou mít nakonfigurovaný emulátor Androidu. Klikněte na šipku rozevíracího seznamu na tlačítku Ladit a zvolte Vytvořit Android Emulator a spusťte obrazovku pro vytvoření emulátoru:

    Create Android Emulator dropdown

  7. Na obrazovce pro vytvoření emulátoru použijte výchozí nastavení a klikněte na tlačítko Vytvořit :

    Android emulator creation screen

  8. Vytvoření emulátoru se vrátí do okna Správce zařízení. Kliknutím na tlačítko Start spusťte nový emulátor:

    Android emulator in the Device Manager

  9. Visual Studio 2019 by teď mělo zobrazovat název nového emulátoru na tlačítku Ladění :

    Android emulator name on the Debug button

  10. Kliknutím na tlačítko Ladit sestavte a nasaďte aplikaci do emulátoru Androidu:

    Android emulator displaying the application

Přizpůsobení aplikace

Aplikaci je možné přizpůsobit a přidat tak interaktivní funkce. Pokud chcete do aplikace přidat interakci uživatele, proveďte následující kroky:

  1. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Ladění aplikace v Androidu:

    Android app

Poznámka:

Ukázková aplikace obsahuje další interaktivní funkce, které nejsou popsané ve videu.

Vytvoření aplikace pro iOS v sadě Visual Studio 2019

Aplikaci pro iOS je možné sestavit a ladit ze sady Visual Studio se síťovým počítačem Mac. Další informace najdete v pokynech k nastavení.

Toto video popisuje proces sestavování a testování aplikace pro iOS pomocí sady Visual Studio 2019 ve Windows:

Podrobné pokyny pro Mac

Download Sample Stažení ukázky

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nové řešení souboru > ... nebo stiskněte tlačítko Nový projekt... a pak vyberte Víceplatformní > aplikace > Prázdné formuláře aplikace:

    Blank Forms App

  2. Ujistěte se, že jsou vybrané Android a iOS :

    Android and iOS, with .NET Standard

Poznámka:

Pro název aplikace a identifikátor organizace jsou podporované jenom znaky A-Z, a-z, _, .a čísla.

  1. Obnovte balíčky NuGet kliknutím pravým tlačítkem na řešení:

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. Spusťte emulátor Androidu stisknutím tlačítka ladění (nebo spusťte spuštění > ladění).

  3. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Ladění aplikace v Androidu:

    Screenshot shows the Android Emulator.

  6. Po kliknutí pravým tlačítkem myši nastavíte iOS na spouštěný projekt:

    Set the startup project to iOS

  7. Aplikaci v iOSu můžete ladit výběrem simulátoru iOSu z rozevíracího seznamu.

Podrobné pokyny pro Mac

Download Sample Stažení ukázky

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nové řešení souboru > ... nebo stiskněte tlačítko Nový projekt... a pak vyberte Víceplatformní > aplikace > Prázdné formuláře aplikace:

    Blank Forms App

  2. Ujistěte se, že jsou vybrané Android a iOS, a to se sdílením kódu .NET Standard:

    Android and iOS, with .NET Standard

Poznámka:

Pro název aplikace a identifikátor organizace jsou podporované jenom znaky A-Z, a-z, _, .a čísla.

  1. Obnovte balíčky NuGet kliknutím pravým tlačítkem na řešení:

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. Spusťte emulátor Androidu stisknutím tlačítka ladění (nebo spusťte spuštění > ladění).

  3. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Ladění aplikace v Androidu:

    Screenshot shows the Android Emulator.

  6. Po kliknutí pravým tlačítkem myši nastavíte iOS na spouštěný projekt:

    Set the startup project to iOS

  7. Ladění aplikace v iOSu:

    iOS app

Dokončený kód si můžete stáhnout z galerie ukázek nebo si ho můžete prohlédnout na GitHubu.

Další kroky

  • Rychlý start s jednou stránkou – Vytvoření více funkční aplikace
  • Xamarin.Forms Ukázky – Stažení a spuštění příkladů kódu a ukázkových aplikací
  • Vytváření ebooků Mobile Apps – podrobné kapitoly, které učí Xamarin.Forms vývoj, jsou k dispozici ve formátu PDF a zahrnují stovky dalších ukázek.