Aracılığıyla paylaş

Sayfalar arasında gezinme

Öğreticinin bu bölümü uygulamaya son parçayı ekler, tüm notlar sayfası ile tek tek not sayfası arasında gezinme.

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 nota tıklanması, not sayfasına gitmeli ve 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ıklanması, notta yapılan değişiklikleri atarak tüm notlar sayfasına geri dönmelidir.
  • Sil düğmesine tıklanması notu silip geri dönmelidir.

Yeni not

İlk olarak, yeni bir not için gezintiyi işleyeceksiniz.

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: gezinti - yeni not.

  1. AllNotesPage.xaml dosyasında yeni not için öğesini AppBarButton bulun.

  2. Bir Click olay işleyicisi ekleyin ve olarak yeniden adlandırın NewNoteButton_Click. (Bunun nasıl yapılacağını anımsatıcıya ihtiyacınız varsa not sayfası adımında olay işleyicileri ekleme bölümüne 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 Sayfanın ait olduğu Frame örneğine (varsa) başvuru sağlayan bir Page özelliği vardır. 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. Bunu C# dilinde işlecini Type kullanarak alırsınıztypeof.

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

Şimdi adresine gittiğinizde NotePagemodelin Note yeni bir örneği oluşturulur.

Mevcut notlar

Şimdi mevcut notlar için gezinti ekleyeceksiniz. Şu anda içinde nota tıkladığınızda, not ItemsViewseçilidir, 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: gezinti - son uygulama.

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

  2. için XAML'yi ItemsViewSelectionMode = None ve IsItemInvokedEnabled ile güncelleştirin = True.

  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. yönteminde ItemsView_ItemInvoked adresine gitmek NotePageiçin kod ekleyin. 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 çağrısı tarafından geçirilen öğesini işlemek Note için yöntemi geçersiz kılmayı Navigategü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. null Bu bir Noteise veya değilse, daha önce olduğu gibi yeni Note bir 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 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. için XAML'yi TitleBarFrame.CanGoBack özelliğine bağlı = True ve IsBackButtonEnabled ile güncelleştirin.

  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, gezintiyi BackStack'inde izler, böylece yalnızca GoBack yöntemini çağırarak önceki sayfalara geri dönebilirsiniz. çağrısından önce GoBack özelliğini her zaman denetlemek en iyi yöntemdir.

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

içinde çağrısı yaparken öğesini NotePage çağırdığını Frame.GoBackfark MainWindowetmiş rootFrame.GoBackolabilirsiniz. Bunun nedeni, Page sınıfının varsa öğesini barındıran öğesini alan bir Frame özelliğine Pagesahip olmasıdır. Bu durumda, öğesine bir başvuru rootFramealı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!

Aşağıdaki bağlantılar WinUI ve Windows Uygulama SDK'sı ile uygulama oluşturma hakkında daha fazla bilgi sağlar:

  • Last updated on