Xamarin.Forms Uygulama oluşturma hızlı başlangıcı

Örneği indirme

Bu hızlı başlangıçta şunları nasıl yapacağınızı öğreneceksiniz:

• Bir Xamarin.Forms Shell uygulaması oluşturun.
• EXtensible Application Markup Language (XAML) kullanarak bir sayfanın kullanıcı arabirimini tanımlayın ve koddan XAML öğeleriyle etkileşime geçin.
• Sınıfını alt sınıflayarak shell uygulamasının görsel hiyerarşisini Shell açıklama.

Hızlı başlangıçta, bir not girmenizi ve cihaz depolamada kalıcı hale getirmek için platformlar Xamarin.Forms arası bir Shell uygulamasının nasıl oluşturulacağı açıklanır. Son uygulama aşağıda gösterilmiştir:

Önkoşullar

• .NET iş yükü yüklü Mobil geliştirme ile Visual Studio 2019 (en son sürüm).
• C# bilgisi.
• (isteğe bağlı) Uygulamayı iOS üzerinde derlemek için eşleştirilmiş bir Mac.

Bu önkoşullar hakkında daha fazla bilgi için bkz . Xamarin'i Yükleme. Visual Studio 2019'u bir Mac derleme ana bilgisayarına bağlama hakkında bilgi için bkz. Xamarin.iOS geliştirme için Mac ile eşleştirme.

Visual Studio 2019 ile çalışmaya başlama

1. Visual Studio 2019'u başlatın ve başlangıç penceresinde Yeni proje oluştur'a tıklayarak yeni bir proje oluşturun:

   

2. Yeni proje oluştur penceresinde Proje türü açılan listesinde Mobil'i seçin, Mobil Uygulama (Xamarin.Forms) şablonunu seçin ve İleri düğmesine tıklayın:

   

3. Yeni projenizi yapılandırın penceresinde Proje adını Notlar olarak ayarlayın, proje için uygun bir konum seçin ve Oluştur düğmesine tıklayın:

   

   Önemli

   Bu hızlı başlangıçtaki C# ve XAML kod parçacıkları, çözümün ve projenin her ikisinin de Notlar olarak adlandırılmış olmasını gerektirir. Farklı bir ad kullanmak, bu hızlı başlangıçtan projeye kod kopyaladığınızda derleme hatalarına neden olur.

4. Yeni Mobil Uygulama iletişim kutusunda Sekmeli şablonu seçin ve Oluştur düğmesine tıklayın:

   

   Proje oluşturulduğunda GettingStarted.txt dosyasını kapatın.

   Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için bkz. Shell Hızlı Başlangıç Ayrıntılı İncelemesi'nde Kabuk uygulamasının Xamarin.FormsXamarin.Forms anatomisi.

5. Çözüm Gezgini, Notlar projesinde aşağıdaki klasörleri (ve bunların içeriklerini) silin:

   • Modeller
   • Hizmetler
   • Görünüm Modelleri
   • Görünümler

6. Çözüm Gezgini, Notlar projesinde GettingStarted.txt silin.

7. Çözüm Gezgini, Notlar projesinde Görünümler adlı yeni bir klasör ekleyin.

8. Çözüm Gezgini'da, Notlar projesinde Görünümler klasörünü seçin, sağ tıklayın ve Yeni Öğe Ekle>... öğesini seçin. Yeni Öğe Ekle iletişim kutusunda Visual C# Öğeleri >>Xamarin.Formsİçerik Sayfası'nı seçin, yeni dosyayı NotesPage olarak adlandırın ve Ekle düğmesine tıklayın:

   

   Bu, Görünümler klasörüne NotesPage adlı yeni bir sayfa ekler. Bu sayfa, uygulamadaki ana sayfa olacaktır.

9. Çözüm Gezgini'da, Notes projesinde NotesPage.xaml'e çift tıklayarak açın:

   

10. NotesPage.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, sayfa için bir metin girişi ve uygulamayı dosyayı kaydetmeye veya silmeye yönlendiren iki Button nesneden oluşan Editor kullanıcı arabirimini bildirimli olarak tanımlar. İki Button nesne, içinde yatay olarak yerleştirilmiş GridGridEditor ve dikey olarak bir StackLayoutiçinde yerleştirilmiştir. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    CTRL+S tuşlarına basarak NotesPage.xaml dosyasındaki değişiklikleri kaydedin.

11. Çözüm Gezgini,Notlar projesinde NotesPage.xaml.cs çift tıklayarak açın:

    

12. NotesPage.xaml.cs şablon kodunun tümünü kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, not verilerini uygulamanın yerel uygulama veri klasöründe depolayacak adlı notes.txt bir dosyaya başvuran bir _fileName alan tanımlar. Sayfa oluşturucu yürütülürken, dosya varsa okunur ve içinde Editorgörüntülenir. Kaydet'eButton basıldığında, dosyasının OnSaveButtonClicked içeriğini Editor kaydeden olay işleyicisi yürütülür. DeleteButton tuşuna basıldığında OnDeleteButtonClicked olay işleyicisi yürütülür ve bu da var olması koşuluyla dosyayı siler ve dosyasından Editorherhangi bir metni kaldırır. Kullanıcı etkileşimi hakkında daha fazla bilgi için Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı etkileşimini yanıtlama bölümüne bakın.

    CTRL+S tuşlarına basarak NotesPage.xaml.cs değişiklikleri kaydedin.

13. Çözüm Gezgini'da, Notlar projesinde Görünümler klasörünü seçin, sağ tıklayın ve Yeni Öğe Ekle>... öğesini seçin. Yeni Öğe Ekle iletişim kutusunda Visual C# Öğeleri >>Xamarin.Formsİçerik Sayfası'nı seçin, yeni dosyayı AboutPage olarak adlandırın ve Ekle düğmesine tıklayın:

    

    Bu, Görünümler klasörüne AboutPage adlı yeni bir sayfa ekler.

14. Çözüm Gezgini, Notes projesinde AboutPage.xaml öğesine çift tıklayarak açın:

    

15. AboutPage.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, sayfa için kullanıcı arabirimini bildirimli olarak tanımlar. Bu arabirim, metin Imagegörüntüleyen iki Label nesneden ve bir Buttonöğesinden oluşur. ve iki Label nesnesi Button bir içinde ImageStackLayoutdikey olarak yerleştirilmiştir ve StackLayout dikey olarak bir Gridiçinde yerleştirilmiştir. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    CTRL+S tuşlarına basarak AboutPage.xaml dosyasındaki değişiklikleri kaydedin.

16. Çözüm Gezgini,Notlar projesinde AboutPage.xaml.cs çift tıklayarak açın:

    

17. AboutPage.xaml.cs tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, Daha fazlaButton bilgi edinin tuşuna basıldığında yürütülen olay işleyicisini tanımlarOnButtonClicked. Düğmeye basıldığında bir web tarayıcısı başlatılır ve yöntemin URI bağımsız değişkeniyle OpenAsync temsil edilen sayfa görüntülenir. Kullanıcı etkileşimi hakkında daha fazla bilgi için Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı etkileşimini yanıtlama bölümüne bakın.

    CTRL+S tuşlarına basarak AboutPage.xaml.cs değişiklikleri kaydedin.

18. Çözüm Gezgini,Notlar projesinde AppShell.xaml'e çift tıklayarak açın:

    

19. AppShell.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, TabBar uygulamanın iki ShellContent nesne içeren görsel hiyerarşisini bildirimli olarak tanımlar. Bu nesneler herhangi bir kullanıcı arabirimi öğesini değil, uygulamanın görsel hiyerarşisinin düzenini temsil eder. Shell bu nesneleri alır ve içerik için kullanıcı arabirimini oluşturur. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    CTRL+S tuşlarına basarak AppShell.xaml dosyasındaki değişiklikleri kaydedin.

20. Çözüm Gezgini,Notes projesinde AppShell.xaml dosyasını genişletin ve AppShell.xaml.cs çift tıklayarak açın:

    

21. AppShell.xaml.cs şablon kodunun tümünü kaldırın ve aşağıdaki kodla değiştirin:

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

    CTRL+S tuşlarına basarak AppShell.xaml.cs değişiklikleri kaydedin.

22. Çözüm Gezgini,Notlar projesinde App.xaml'e çift tıklayarak açın:

    

23. App.xaml'de şablon kodunun tamamını kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod bildirim temelli olarak uygulamanın örneğini oluşturmadan sorumlu olan bir App sınıfı tanımlar.

    CTRL+S tuşlarına basarak App.xaml'de yapılan değişiklikleri kaydedin.

24. Çözüm Gezgini,Notlar projesinde App.xaml'i genişletin ve App.xaml.cs çift tıklayarak açın:

    

25. App.xaml.cs tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, uygulamanın örneğini oluşturmadan sorumlu olan sınıfının arka planındaki App kodu tanımlar. Alt sınıflandırılmış Shell nesneye özelliğini başlatırMainPage.

    CTRL+S tuşlarına basarak App.xaml.cs değişiklikleri kaydedin.

Hızlı başlangıcı oluşturma

1. Visual Studio'da Derleme Çözümü Oluştur > menü öğesini seçin (veya F6 tuşuna basın). Çözüm derlenir ve Visual Studio durum çubuğunda bir başarı iletisi görüntülenir:

   

   Hatalar varsa, önceki adımları yineleyin ve projeler başarıyla derleninceye kadar hataları düzeltin.

2. Visual Studio araç çubuğunda Başlangıç düğmesine (Yürüt düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz Android öykünücüsunda başlatın:

   

   

   Bir not girin ve Kaydet düğmesine basın. Ardından, girdiğiniz notunun yeniden yüklendiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

   Hakkında sekmesi simgesine basarak öğesine gidinAboutPage:

   

   Hızlı başlangıçlar web sayfasını başlatmak için Daha fazla bilgi edinin düğmesine basın.

   Uygulamanın her platformda nasıl başlatıldığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta uygulamayı her platformdaXamarin.Forms başlatma.

   Not

   Aşağıdaki adımlar yalnızca geliştirme için Xamarin.Forms sistem gereksinimlerini karşılayan eşleştirilmiş bir Mac'iniz varsa gerçekleştirilmelidir.

3. Visual Studio araç çubuğunda Notes.iOS projesine sağ tıklayın ve Başlangıç Projesi Olarak Ayarla'yı seçin.

   

4. Visual Studio araç çubuğunda Başlat düğmesine (Yürüt düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS uzak simülatöründe başlatın:

   

   

   Bir not girin ve Kaydet düğmesine basın. Ardından, girdiğiniz notunun yeniden yüklendiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

   Hakkında sekmesi simgesine basarak öğesine gidinAboutPage:

   

   Hızlı başlangıçlar web sayfasını başlatmak için Daha fazla bilgi edinin düğmesine basın.

   Uygulamanın her platformda nasıl başlatıldığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta uygulamayı her platformdaXamarin.Forms başlatma.

Önkoşullar

• iOS ve Android platform desteğinin yüklü olduğu Mac için Visual Studio (en son sürüm).
• Xcode (en son sürüm).
• C# bilgisi.

Bu önkoşullar hakkında daha fazla bilgi için bkz . Xamarin'i Yükleme.

Mac için Visual Studio kullanmaya başlayın

1. Mac için Visual Studio başlatın ve başlangıç penceresinde Yeni'ye tıklayarak yeni bir proje oluşturun:

   

2. Yeni projeniz için şablon seçin iletişim kutusunda Çok Platformlu > Uygulama'ya tıklayın, Shell Forms Uygulaması şablonunu seçin ve İleri düğmesine tıklayın:

   

3. Shell Forms uygulamanızı yapılandırın iletişim kutusunda yeni uygulamaya Notlar adını verin ve İleri düğmesine tıklayın:

   

4. Yeni Shell Forms uygulamanızı yapılandırın iletişim kutusunda Çözüm ve Proje adlarını Notlar olarak bırakın, proje için uygun bir konum seçin ve projeyi oluşturmak için Oluştur düğmesine tıklayın:

   

   Önemli

   Bu hızlı başlangıçtaki C# ve XAML kod parçacıkları, çözümün ve projenin her ikisinin de Notlar olarak adlandırılmış olmasını gerektirir. Farklı bir ad kullanmak, bu hızlı başlangıçtan projeye kod kopyaladığınızda derleme hatalarına neden olur.

   Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için bkz. Shell Hızlı Başlangıç Ayrıntılı İncelemesi'nde Kabuk uygulamasının Xamarin.FormsXamarin.Forms anatomisi.

5. Çözüm Bölmesi'ndeki Notlar projesinde aşağıdaki klasörleri (ve bunların içeriklerini) silin:

   • Modeller
   • Hizmetler
   • Görünüm Modelleri
   • Görünümler

6. Çözüm Bölmesi'ndeki Notlar projesinde GettingStarted.txt silin.

7. Çözüm Bölmesi'ndeki Notlar projesinde Görünümler adlı yeni bir klasör ekleyin.

8. Çözüm Bölmesi'ndeki Notlar projesinde Görünümler klasörünü seçin, sağ tıklayın ve Yeni Dosya Ekle>... öğesini seçin. Yeni Dosya iletişim kutusunda Forms > Forms ContentPage XAML'yi seçin, yeni dosyayı NotesPage olarak adlandırın ve Yeni düğmesine tıklayın:

   

   Bu, Görünümler klasörüne NotesPage adlı yeni bir sayfa ekler. Bu sayfa, uygulamadaki ana sayfa olacaktır.

9. Çözüm Bölmesi'ndeki Notlar projesinde NotesPage.xaml'e çift tıklayarak açın:

   

10. NotesPage.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, sayfa için bir metin girişi ve uygulamayı dosyayı kaydetmeye veya silmeye yönlendiren iki Button nesneden oluşan Editor kullanıcı arabirimini bildirimli olarak tanımlar. İki Button nesne, içinde yatay olarak yerleştirilmiş GridGridEditor ve dikey olarak bir StackLayoutiçinde yerleştirilmiştir. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) NotesPage.xaml dosyasındaki değişiklikleri kaydedin.

11. Çözüm Bölmesi'ndeki Notlar projesinde NotesPage.xaml.cs çift tıklayarak açın:

    

12. NotesPage.xaml.cs şablon kodunun tümünü kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, not verilerini uygulamanın yerel uygulama veri klasöründe depolayacak adlı notes.txt bir dosyaya başvuran bir _fileName alan tanımlar. Sayfa oluşturucu yürütülürken, dosya varsa okunur ve içinde Editorgörüntülenir. Kaydet'eButton basıldığında, dosyasının OnSaveButtonClicked içeriğini Editor kaydeden olay işleyicisi yürütülür. DeleteButton tuşuna basıldığında OnDeleteButtonClicked olay işleyicisi yürütülür ve bu da var olması koşuluyla dosyayı siler ve dosyasından Editorherhangi bir metni kaldırır. Kullanıcı etkileşimi hakkında daha fazla bilgi için Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı etkileşimini yanıtlama bölümüne bakın.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) değişiklikleri NotesPage.xaml.cs kaydedin.

13. Çözüm Bölmesi'ndeki Notlar projesinde Görünümler klasörünü seçin, sağ tıklayın ve Yeni Dosya Ekle>... öğesini seçin. Yeni Dosya iletişim kutusunda Forms > Forms ContentPage XAML'yi seçin, yeni dosyayı AboutPage olarak adlandırın ve Yeni düğmesine tıklayın:

    

14. Çözüm Bölmesi'ndeki Notlar projesinde AboutPage.xaml'e çift tıklayarak açın:

    

    Bu, Görünümler klasörüne AboutPage adlı yeni bir sayfa ekler.

15. AboutPage.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, sayfa için kullanıcı arabirimini bildirimli olarak tanımlar. Bu arabirim, metin Imagegörüntüleyen iki Label nesneden ve bir Buttonöğesinden oluşur. ve iki Label nesnesi Button bir içinde ImageStackLayoutdikey olarak yerleştirilmiştir ve StackLayout dikey olarak bir Gridiçinde yerleştirilmiştir. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) AboutPage.xaml dosyasındaki değişiklikleri kaydedin.

16. Çözüm Bölmesi'ndeki Notlar projesinde AboutPage.xaml.cs çift tıklayarak açın:

    

17. AboutPage.xaml.cs tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, Daha fazlaButton bilgi edinin tuşuna basıldığında yürütülen olay işleyicisini tanımlarOnButtonClicked. Düğmeye basıldığında bir web tarayıcısı başlatılır ve yöntemin URI bağımsız değişkeniyle OpenAsync temsil edilen sayfa görüntülenir. Kullanıcı etkileşimi hakkında daha fazla bilgi için Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı etkileşimini yanıtlama bölümüne bakın.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) değişiklikleri AboutPage.xaml.cs kaydedin.

18. Çözüm Bölmesi'ndeki Notlar projesinde AppShell.xaml'e çift tıklayarak açın:

    

19. AppShell.xaml dosyasında tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, TabBar uygulamanın iki ShellContent nesne içeren görsel hiyerarşisini bildirimli olarak tanımlar. Bu nesneler herhangi bir kullanıcı arabirimi öğesini değil, uygulamanın görsel hiyerarşisinin düzenini temsil eder. Shell bu nesneleri alır ve içerik için kullanıcı arabirimini oluşturur. Kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için Bkz. Kabuk Hızlı Başlangıcı'nda Xamarin.Forms Kullanıcı arabirimi.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) AppShell.xaml dosyasındaki değişiklikleri kaydedin.

20. Çözüm Bölmesi'ndeki Notlar projesinde AppShell.xaml'i genişletin ve AppShell.xaml.cs çift tıklayarak açın:

    

21. AppShell.xaml.cs şablon kodunun tümünü kaldırın ve aşağıdaki kodla değiştirin:

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

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) AppShell.xaml.cs değişiklikleri kaydedin.

22. Çözüm Bölmesi'ndeki Notlar projesinde App.xaml'e çift tıklayarak açın:

    

23. App.xaml'de şablon kodunun tamamını kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod bildirim temelli olarak uygulamanın örneğini oluşturmadan sorumlu olan bir App sınıfı tanımlar.

    Dosya Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) App.xaml'de yapılan değişiklikleri kaydedin.>

24. Çözüm Bölmesi'ndeki Notlar projesinde App.xaml'i genişletin ve App.xaml.cs çift tıklayarak açın:

    

25. App.xaml.cs tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Bu kod, uygulamanın örneğini oluşturmadan sorumlu olan sınıfının arka planındaki App kodu tanımlar. Alt sınıflandırılmış Shell nesneye özelliğini başlatırMainPage.

    Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) değişiklikleri App.xaml.cs kaydedin.

Hızlı başlangıcı oluşturma

1. Mac için Visual Studio'da Tümünü Derle > menü öğesini seçin (veya ⌘ + B tuşlarına basın). Projeler derlenir ve Mac için Visual Studio araç çubuğunda bir başarı iletisi görüntülenir:

   

   Hatalar varsa, önceki adımları yineleyin ve projeler başarıyla derleninceye kadar hataları düzeltin.

2. Çözüm Bölmesi'nde Notes.iOS projesini seçin, sağ tıklayın ve Başlangıç Projesi Olarak Ayarla'yı seçin:

   

3. Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS Simülatöründe başlatın:

   

   

   Bir not girin ve Kaydet düğmesine basın. Ardından, girdiğiniz notunun yeniden yüklendiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

   Hakkında sekmesi simgesine basarak öğesine gidinAboutPage:

   

   Hızlı başlangıçlar web sayfasını başlatmak için Daha fazla bilgi edinin düğmesine basın.

   Uygulamanın her platformda nasıl başlatıldığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta uygulamayı her platformdaXamarin.Forms başlatma.

4. Çözüm Bölmesi'nde Notes.Droid projesini seçin, sağ tıklayın ve Başlangıç Projesi Olarak Ayarla'yı seçin:

   

5. Mac için Visual Studio araç çubuğunda Başlangıç düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz Android öykünücüsün içinde başlatın:

   

   Bir not girin ve Kaydet düğmesine basın. Ardından, girdiğiniz notunun yeniden yüklendiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

   Hakkında sekmesi simgesine basarak öğesine gidinAboutPage:

   

   Hızlı başlangıçlar web sayfasını başlatmak için Daha fazla bilgi edinin düğmesine basın.

   Uygulamanın her platformda nasıl başlatıldığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta uygulamayı her platformdaXamarin.Forms başlatma.

Sonraki adımlar

Bu hızlı başlangıçta şunları öğrendiniz:

• Bir Xamarin.Forms Shell uygulaması oluşturun.
• EXtensible Application Markup Language (XAML) kullanarak bir sayfanın kullanıcı arabirimini tanımlayın ve koddan XAML öğeleriyle etkileşime geçin.
• Sınıfını alt sınıflayarak shell uygulamasının görsel hiyerarşisini Shell açıklama.

Bu Xamarin.Forms Shell uygulamasına ek sayfalar eklemek için sonraki hızlı başlangıca geçin.

İleri

İlgili bağlantılar

• Notlar (örnek)
• Xamarin.Forms Kabuk hızlı başlangıç ayrıntılı bakış