Uygulamada gezinti Xamarin.Forms gerçekleştirme

Download Sample Örneği indirme

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

  • Shell uygulamasına Xamarin.Forms ek sayfalar ekleyin.
  • Sayfalar arasında gezinti gerçekleştirin.
  • Kullanıcı arabirimi öğeleriyle veri kaynakları arasındaki verileri eşitlemek için veri bağlamayı kullanın.

Hızlı başlangıçta, tek bir notu depolayabilen bir platformlar Xamarin.Forms arası Shell uygulamasının birden çok not depolayabilen bir uygulamaya nasıl dönüştürülmesi adımları açık şekilde anlatılır. Son uygulama aşağıda gösterilmiştir:

Notes PageNote Entry Page

Önkoşullar

Bu hızlı başlangıcı denemeden önce önceki hızlı başlangıcı başarıyla tamamlamanız gerekir. Alternatif olarak, önceki hızlı başlangıç örneğini indirin ve bu hızlı başlangıcın başlangıç noktası olarak kullanın.

Visual Studio ile uygulamayı güncelleştirme

  1. Visual Studio’yu başlatın. Başlangıç penceresinde, son projeler/çözümler listesinde Notlar çözümüne tıklayın veya Proje veya çözüm aç'a tıklayın ve Projeyi/Çözümü Aç iletişim kutusunda Notes projesi için çözüm dosyasını seçin:

    Open Solution

  2. Çözüm Gezgini'da Notlar projesine sağ tıklayın ve Yeni Klasör Ekle'yi > seçin:

    Add New Folder

  3. Çözüm Gezgini yeni klasöre Models adını verin:

    Models Folder

  4. Çözüm Gezgini Modeller klasörünü seçin, sağ tıklayın ve Sınıf Ekle...'yi > seçin:

    Add New File

  5. Yeni Öğe Ekle iletişim kutusunda Visual C# Öğeleri > Sınıfı'nı seçin, yeni dosyayı Not olarak adlandırın ve Ekle düğmesine tıklayın:

    Add Note Class

    Bu, Notes projesinin Models klasörüne Not adlı bir sınıf ekler.

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

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Bu sınıf, uygulamadaki her notla ilgili verileri depolayacak bir Note model tanımlar.

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

  7. Çö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ı NoteEntryPage olarak adlandırın ve Ekle düğmesine tıklayın:

    Add Xamarin.Forms ContentPage

    Bu işlem, projenin Views klasörüne NoteEntryPage adlı yeni bir sayfa ekler. Bu sayfa not girişi için kullanılacaktır.

  8. NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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 örnek yatay olarak bir GridEditor içinde düzenlenir ve Grid dikey olarak bir StackLayoutiçinde düzenlenir. Buna ek olarak, modelin Editor özelliğine bağlanmak için Text veri bağlamayı Note kullanır. Veri bağlama hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms Veri bağlama.

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

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

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Bu kod, sayfanın içinde BindingContext tek bir Note notu temsil eden bir örneği depolar. sınıfı, verilerin gezinti sırasında sorgu parametreleri aracılığıyla sayfaya geçirilmesini sağlayan bir QueryPropertyAttribute ile dekore edilmiştir. için QueryPropertyAttribute ilk bağımsız değişken, verileri alacak özelliğin adını belirtir ve ikinci bağımsız değişken sorgu parametresi kimliğini belirtir. Bu nedenle, QueryParameterAttribute yukarıdaki kodda özelliğin ItemId bir GoToAsync yöntem çağrısında belirtilen URI'den sorgu parametresinde ItemId geçirilen verileri alacağını belirtir. ItemId Özelliği daha sonra cihazdaki LoadNote dosyadan bir Note nesne oluşturmak için yöntemini çağırır ve sayfanın Note nesnesini ayarlarBindingContext.

    Kaydet'e Button basıldığında OnSaveButtonClicked olay işleyicisi yürütülür ve bu, öğesinin Editor içeriğini rastgele oluşturulan bir dosya adıyla yeni bir dosyaya veya bir not güncelleştiriliyorsa mevcut bir dosyaya kaydeder. Her iki durumda da dosya, uygulamanın yerel uygulama veri klasöründe depolanır. Ardından yöntemi önceki sayfaya geri döner. 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 önceki sayfaya geri döner. Gezinti hakkında daha fazla bilgi için bkz. Kabuk Hızlı Başlangıç Ayrıntılı İncelemesi'nde Xamarin.FormsGezinti.

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

    Uyarı

    Uygulama, sonraki adımlarda düzeltilecek hatalar nedeniyle şu anda derlenmeyecektir.

  10. Çözüm Gezgini,Notes projesinde Views klasöründe NotesPage.xaml dosyasını açın.

  11. 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">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Bu kod, sayfa için kullanıcı arabirimini bildirimli olarak tanımlar. Bu arabirim bir CollectionView ve ToolbarItemöğesinden oluşur. , CollectionView uygulama tarafından alınan notları görüntülemek için veri bağlamayı kullanır. Not seçildiğinde, not değiştirilebileceği NoteEntryPage yere gider. Alternatif olarak, tuşuna basılarak ToolbarItemyeni bir not oluşturulabilir. Veri bağlama hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms Veri bağlama.

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

  12. Çözüm Gezgini,Notes projesinde Views klasöründe NotesPage.xamldosyasını genişletin ve NotesPage.xaml.cs açın.

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Bu kod, işlevini NotesPagetanımlar. Sayfa göründüğünde OnAppearing yöntemi yürütülür ve bu yöntem yerel uygulama veri klasöründen alınan notlarla doldurulur CollectionView . tuşuna ToolbarItemOnAddClicked basıldığında olay işleyicisi yürütülür. Bu yöntem adresine NoteEntryPagegider. içindeki CollectionView bir öğe seçildiğinde OnSelectionChanged olay işleyicisi yürütülür. Bu yöntem içindeki bir öğenin CollectionView seçilmesi koşuluyla öğesine gider NoteEntryPageve seçilen Note öğesinin Filename özelliğini sorgu parametresi olarak sayfaya geçirir. Gezinti hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta Xamarin.FormsGezinti.

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

    Uyarı

    Uygulama, sonraki adımlarda düzeltilecek hatalar nedeniyle şu anda derlenmeyecektir.

  14. Çözüm Gezgini,Notlar projesinde AppShell.xaml'i genişletin ve AppShell.xaml.cs açın. Ardından mevcut kodu aşağıdaki kodla değiştirin:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Bu kod, NoteEntryPageShell görsel hiyerarşisinde (AppShell.xaml) temsil edilen için bir yol kaydeder. Bu sayfa daha sonra yöntemiyle GoToAsync URI tabanlı gezinti kullanılarak sayfasına gidilebilir.

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

  15. Çözüm Gezgini,Notlar projesinde App.xaml'i genişletin ve App.xaml.cs açın. Ardından mevcut kodu aşağıdaki kodla değiştirin:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Bu kod, ad alanı için bir ad alanı bildirimi ekler ve türündeki System.IOstringstatik FolderPath bir özellik için bir bildirim ekler. FolderPath özelliği, yolu not verilerinin depolanacağı cihazda depolamak için kullanılır. Buna ek olarak, kod oluşturucuda özelliğini başlatır FolderPath ve alt sınıflandırılmış Shell nesneye özelliğini başlatırMainPage.App

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

  16. Projeyi her platformda derleyin ve çalıştırın. Daha fazla bilgi için bkz . Hızlı başlangıç oluşturma.

    NotLarSayfasında Ekle düğmesine basarak NoteEntryPage'egidin ve bir not girin. Not kaydedildikten sonra uygulama NotesPage'e geri döner.

    Uygulama davranışını gözlemlemek için farklı uzunlukta birkaç not girin. Girdiğiniz notların cihaza kaydedildiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

Uygulamayı Mac için Visual Studio ile güncelleştirme

  1. Mac için Visual Studio başlatın. Başlangıç penceresinde Aç'a tıklayın ve iletişim kutusunda Notlar projesi için çözüm dosyasını seçin:

    Open Solution

  2. Çözüm Bölmesi'nde Notlar projesine sağ tıklayın ve Yeni Klasör Ekle'yi > seçin:

    Add New Folder

  3. Yeni Klasör iletişim kutusunda yeni klasöre Modeller adını verin:

    Models Folder

  4. Çözüm Bölmesi'nde Modeller klasörünü seçin, sağ tıklayın ve Yeni Sınıf Ekle...'yi > seçin:

    Add New File

  5. Yeni Dosya iletişim kutusunda Genel > Boş Sınıf'ı seçin, yeni dosyayı Not olarak adlandırın ve Yeni düğmesine tıklayın:

    Add Note Class

    Bu, Notes projesinin Models klasörüne Not adlı bir sınıf ekler.

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

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Bu sınıf, uygulamadaki her notla ilgili verileri depolayacak bir Note model tanımlar.

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

  7. Çözüm Bölmesi'nde Notlar projesini seçin, sağ tıklayın ve Yeni Dosya Ekle...'yi > seçin. Yeni Dosya iletişim kutusunda Forms > Forms ContentPage XAML'yi seçin, yeni dosyayı NoteEntryPage olarak adlandırın ve Yeni düğmesine tıklayın:

    Add Xamarin.Forms ContentPage

    Bu işlem, projenin Views klasörüne NoteEntryPage adlı yeni bir sayfa ekler. Bu sayfa not girişi için kullanılacaktır.

  8. NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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 örnek yatay olarak bir GridEditor içinde düzenlenir ve Grid dikey olarak bir StackLayoutiçinde düzenlenir. Buna ek olarak, modelin Editor özelliğine bağlanmak için Text veri bağlamayı Note kullanır. Veri bağlama hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms Veri bağlama.

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

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

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Bu kod, sayfanın içinde BindingContext tek bir Note notu temsil eden bir örneği depolar. sınıfı, verilerin gezinti sırasında sorgu parametreleri aracılığıyla sayfaya geçirilmesini sağlayan bir QueryPropertyAttribute ile dekore edilmiştir. için QueryPropertyAttribute ilk bağımsız değişken, verileri alacak özelliğin adını belirtir ve ikinci bağımsız değişken sorgu parametresi kimliğini belirtir. Bu nedenle, QueryParameterAttribute yukarıdaki kodda özelliğin ItemId bir GoToAsync yöntem çağrısında belirtilen URI'den sorgu parametresinde ItemId geçirilen verileri alacağını belirtir. ItemId Özelliği daha sonra cihazdaki LoadNote dosyadan bir Note nesne oluşturmak için yöntemini çağırır ve sayfanın Note nesnesini ayarlarBindingContext.

    Kaydet'e Button basıldığında OnSaveButtonClicked olay işleyicisi yürütülür ve bu, öğesinin Editor içeriğini rastgele oluşturulan bir dosya adıyla yeni bir dosyaya veya bir not güncelleştiriliyorsa mevcut bir dosyaya kaydeder. Her iki durumda da dosya, uygulamanın yerel uygulama veri klasöründe depolanır. Ardından yöntemi önceki sayfaya geri döner. 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 önceki sayfaya geri döner. Gezinti hakkında daha fazla bilgi için bkz. Kabuk Hızlı Başlangıç Ayrıntılı İncelemesi'nde Xamarin.FormsGezinti.

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

    Uyarı

    Uygulama, sonraki adımlarda düzeltilecek hatalar nedeniyle şu anda derlenmeyecektir.

  10. Çözüm Bölmesi'ndeki Notes projesinde Views klasöründe NotesPage.xaml dosyasını açın.

  11. 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">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Bu kod, sayfa için kullanıcı arabirimini bildirimli olarak tanımlar. Bu arabirim bir CollectionView ve ToolbarItemöğesinden oluşur. , CollectionView uygulama tarafından alınan notları görüntülemek için veri bağlamayı kullanır. Not seçildiğinde, not değiştirilebileceği NoteEntryPage yere gider. Alternatif olarak, tuşuna basılarak ToolbarItemyeni bir not oluşturulabilir. Veri bağlama hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms Veri bağlama.

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

  12. Çözüm Bölmesi'ndeki Notlar projesinde, Görünümler klasöründeki NotesPage.xaml dosyasını genişletin ve NotesPage.xaml.cs açın.

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Bu kod, işlevini NotesPagetanımlar. Sayfa göründüğünde OnAppearing yöntemi yürütülür ve bu yöntem yerel uygulama veri klasöründen alınan notlarla doldurulur CollectionView . tuşuna ToolbarItemOnAddClicked basıldığında olay işleyicisi yürütülür. Bu yöntem adresine NoteEntryPagegider. içindeki CollectionView bir öğe seçildiğinde OnSelectionChanged olay işleyicisi yürütülür. Bu yöntem içindeki bir öğenin CollectionView seçilmesi koşuluyla öğesine gider NoteEntryPageve seçilen Note öğesinin Filename özelliğini sorgu parametresi olarak sayfaya geçirir. Gezinti hakkında daha fazla bilgi için bkz. Hızlı Başlangıç Ayrıntılı Bakış'ta Xamarin.FormsGezinti.

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

    Uyarı

    Uygulama, sonraki adımlarda düzeltilecek hatalar nedeniyle şu anda derlenmeyecektir.

  14. Çözüm Bölmesi'ndeki Notlar projesinde AppShell.xaml'i genişletin ve AppShell.xaml.cs açın. Ardından mevcut kodu aşağıdaki kodla değiştirin:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Bu kod, NoteEntryPageShell görsel hiyerarşisinde temsil edilen için bir yol kaydeder. Bu sayfa daha sonra yöntemiyle GoToAsync URI tabanlı gezinti kullanılarak sayfasına gidilebilir.

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

  15. Çözüm Bölmesi'ndeki Notlar projesinde App.xaml'i genişletin ve App.xaml.cs açın. Ardından mevcut kodu aşağıdaki kodla değiştirin:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Bu kod, ad alanı için bir ad alanı bildirimi ekler ve türündeki System.IOstringstatik FolderPath bir özellik için bir bildirim ekler. FolderPath özelliği, yolu not verilerinin depolanacağı cihazda depolamak için kullanılır. Buna ek olarak, kod oluşturucuda özelliğini başlatır FolderPath ve alt sınıflandırılmış Shell nesneye özelliğini başlatırMainPage.App

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

  16. Projeyi her platformda derleyin ve çalıştırın. Daha fazla bilgi için bkz . Hızlı başlangıç oluşturma.

    NotLarSayfasında Ekle düğmesine basarak NoteEntryPage'egidin ve bir not girin. Not kaydedildikten sonra uygulama NotesPage'e geri döner.

    Uygulama davranışını gözlemlemek için farklı uzunlukta birkaç not girin. Girdiğiniz notların cihaza kaydedildiğinden emin olmak için uygulamayı kapatın ve yeniden başlatın.

Sonraki adımlar

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

  • Shell uygulamasına Xamarin.Forms ek sayfalar ekleyin.
  • Sayfalar arasında gezinti gerçekleştirin.
  • Kullanıcı arabirimi öğeleriyle veri kaynakları arasındaki verileri eşitlemek için veri bağlamayı kullanın.

Yerel SQLite.NET veritabanında verilerini depolaması için uygulamayı değiştirmek için sonraki hızlı başlangıca geçin.