Sayfalar arasında gezinme

Eğitimin bu bölümü, uygulamaya son parçayı ekleyerek tüm notlar sayfası ile her bir not sayfası arasında gezinmeyi sağlar.

Uygulama içi gezintiyi işlemek için herhangi bir kod yazmadan önce beklenen gezinti davranışını açıklayalım.

içinde AllNotesPagemevcut notların koleksiyonu ve Yeni not düğmesi bulunur.

  • Mevcut bir notaya tıklamak, not sayfasına giderek tıklanan notu yüklemelidir.
  • Yeni not düğmesine tıklanması not sayfasına gitmeli ve boş, kaydedilmemiş bir not yüklemelidir.

Not sayfasında bir geri düğmesi ekleyeceksiniz ve Kaydet ve Sil düğmeleri vardır.

  • Geri düğmesine tıklamak, notta yapılan değişiklikleri yok sayarak tüm notlar sayfasına geri dönmelidir.
  • Sil düğmesine tıklanması notu silmeli ve ardından önceki sayfaya dönmelidir.

Yeni not

İlk olarak, yeni bir not için gezintiyi yöneteceksiniz.

Tavsiye

Bu öğreticinin kodunu GitHub deposundan indirebilir veya görüntüleyebilirsiniz. Kodu bu adımda olduğu gibi görmek için şu işlemeye bakın: navigation - new note.

  1. AllNotesPage.xaml dosyasında yeni bir not için AppBarButton bulun.

  2. Bir Click olay işleyicisi ekleyin ve olarak yeniden adlandırın NewNoteButton_Click. (Not sayfası adımında olay işleyicileri ekleme konusunu hatırlatmaya ihtiyacınız varsa, olay işleyicileri ekleme kısmına bakın.)

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. yöntemine NewNoteButton_Click ( AllNotesPage.xaml.cs) şu kodu ekleyin:

    private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

Her Sayfa'nın, ait olduğu Çerçeve örneğine başvuru sağlayan bir Çerçeve özelliği vardır (varsa). Burada FrameNavigate yöntemini çağırdığınız yöntem bu şekildedir. Navigate yöntemi, gitmek istediğiniz sayfanın Türünü alır. C# dilinde Type öğesini typeof işleciyle elde edersiniz.

Uygulamayı şimdi çalıştırırsanız, Not sayfasına gitmek için Yeni not düğmesine tıklayabilir ve not düzenleyicisine yazabilirsiniz. Ancak, notu kaydetmeye çalışırsanız hiçbir şey olmaz. Bunun nedeni, modelin Note bir örneğinin henüz not sayfasında oluşturulmamış olmasıdır. Bunu şimdi yapacaksın.

  1. NotePage.xaml.cs açın.

  2. Sayfanın OnNavigatedTo yöntemini geçersiz kılmak için kod ekleyin.

    public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

Artık NotePage adresine gittiğinizde, Note modelinin yeni bir örneği oluşturulur.

Mevcut notlar

Şimdi mevcut notlar için gezinti ekleyeceksiniz. Şu anda, ItemsView içinde notaya tıkladığınızda, nota seçilir ancak hiçbir şey olmaz. Çoğu koleksiyon denetiminin varsayılan davranışı tek bir seçimdir ve bu da bir kerede bir öğenin seçildiği anlamına gelir. öğesini, seçmek yerine düğme gibi bir öğeye tıklayacak şekilde güncelleştireceksiniz ItemsView .

Tavsiye

Bu öğreticinin kodunu GitHub deposundan indirebilir veya görüntüleyebilirsiniz. Kodu bu adımda olduğu gibi görmek için şu işlemeye bakın: navigation - son uygulama.

  1. AllNotesPage.xaml dosyasını açın.

  2. ItemsView SelectionMode = None ve IsItemInvokedEnabled = True ile XAML'yi güncelleştirin.

  3. ItemInvoked olayı için bir işleyici ekleyin.

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24" 
           ItemTemplate="{StaticResource NoteItemTemplate}"
           <!-- ↓ Add this. ↓ -->
           SelectionMode="None"
           IsItemInvokedEnabled="True"
           ItemInvoked="ItemsView_ItemInvoked">

  4. AllNotesPage.xaml.cs'da yöntemini bulunItemsView_ItemInvoked. (Visual Studio sizin için oluşturmadıysa, kodu kopyalayıp yapıştırırsanız bu durum oluşabilir. Sonraki adımda ekleyin.)

  5. ItemsView_ItemInvoked yöntemine NotePage için kod ekleyerek geçiş yapın. Bu kez, bir nesneyi diğer sayfaya geçirmenizi sağlayan Navigate yönteminin aşırı yüklemesini kullanacaksınız. Çağrılan Note öğesini ikinci gezinti parametresi olarak geçirin.

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. NotePage.xaml.cs açın.

  7. OnNavigatedTo yöntemi geçersiz kılmasını, Note öğesini Navigate çağrısının geçirmesi nedeniyle işlemek için güncelleştirin.

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}

    Bu kodda önce geçirilen parametrenin bir Note nesne olup olmadığını denetlersiniz. Bu durumda, sayfa için model olarak Note atarsınız. Eğer null veya Note değilse, daha önce olduğu gibi yeni bir Note oluşturun.

Arka gezinti

Son olarak, tek bir nottan tüm notlar sayfasına geri dönebilmek için uygulamayı güncelleştirmeniz gerekir.

WinUI 3 TitleBar denetimi, yerleştirme ve görünüm için tüm Fluent Design yönergelerini karşılayan bir geri düğmesi içerir. Arka gezinti için bu yerleşik düğmeyi kullanacaksınız.

  1. MainWindow.xaml dosyasını açın.

  2. XAML'yi TitleBarIsBackButtonVisible = True'nin ve IsBackButtonEnabled'nin Frame.CanGoBack özelliğine bağlı olacak şekilde güncelleyin.

  3. BackRequested olayı için bir işleyici ekleyin. XAML'niz şöyle görünmelidir:

    <TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">

    Burada IsBackButtonVisible özelliği olarak trueayarlanır. Bu, geri düğmesinin uygulama penceresinin sol üst köşesinde görünmesini sağlar.

    Ardından , IsBackButtonEnabled özelliği Frame.CanGoBack özelliğine bağlıdır, bu nedenle geri düğmesi yalnızca çerçeve geri gidebilirse etkinleştirilir.

    Son olarak BackRequested olay işleyicisi eklenir. Geri gitmek için kodu yerleştirdiğiniz yer burasıdır.

  4. MainWindow.xaml.cs'da şu kodu yöntemine AppTitleBar_BackRequested ekleyin:

    private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}

    Sınıf Frame, gezinmeyi BackStack'ini takip eder, böylece GoBack yöntemini çağırarak yalnızca önceki sayfalara geri dönebilirsiniz. çağrısından önce her zaman GoBack özelliğini denetlemek en iyi uygulamadır.

Ardından, not silindikten sonra geri gitmek için içindeki NotePage kodu güncelleştirmeniz gerekir.

  1. NotePage.xaml.cs açın.

  2. DeleteButton_Click Olay işleyicisi yöntemini, not silindikten sonra yöntemine Frame.CanGoBack yapılan bir çağrıyla güncelleştirin:

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

Tavsiye

NotePage içinde Frame.GoBack çağrısını yaparken, MainWindow içinde rootFrame.GoBack çağırdığınızı fark etmiş olabilirsiniz. Bunun nedeni, Page sınıfının, eğer varsa, öğesini barındıran Frame öğesini alan bir Page özelliğine sahip olmasıdır. Bu durumda, rootFrame öğesine bir başvuru alır.

Artık uygulamanızı çalıştırabilirsiniz. Yeni notlar eklemeyi, notlar arasında ileri geri gezinmeyi ve notları silmeyi deneyin.

Belgelerde daha fazla bilgi edinin:

Sonraki Adımlar

Tebrikler! WinUI uygulaması oluşturma öğreticisini tamamladınız!

Bu eğitim, işleri basit tutmak ve bazı temel kavramları tanıtmak amacıyla verimlilikten ziyade sadeliğe odaklandı ve özellikleri en temel düzeyde ele aldı. Bu nedenle uygulama çalışırken, geliştirilebilen bazı şeyler vardır.

Daha fazla bilgi edinmek için bu devam eğitimlerinden biriyle devam etmenizi öneririz:

  • WinUI Notları bölüm 2 – Gezinti ve veri bağlama ile ilgili diğer özellikleri açıklar. Aynı temel mimariyi koruyarak uygulamayı daha verimli çalışacak şekilde güncelleştireceksiniz.

    OR

  • WinUI'de veri bağlama, bağımlılık ekleme ve birim testi – Model-View-ViewModel (MVVM) tasarım deseni ile veri bağlama, bağımlılık ekleme ve birim testi uygulama adımlarını gösterir. MVVM Araç Seti'ni kullanmak için uygulamayı değiştirecek ve modelleri görüntüleyebilirsiniz.

  • Last updated on