Aracılığıyla paylaş

Navigasyon Görünümü

NavigationView denetimi, uygulamanız için üst düzey gezinti sağlar. Çeşitli ekran boyutlarına uyum sağlar ve hem üst hem de sol gezinti stillerini destekler.

üst navigasyon sol navigasyon
NavigationView hem üst hem de sol gezinti bölmesini veya menüsünü destekler

Doğru kontrol bu mu?

NavigationView, şu işler için iyi çalışan uyarlamalı bir gezinti denetimidir:

  • Uygulamanız genelinde tutarlı bir gezinti deneyimi sağlama.
  • Küçük pencerelerde ekran alanını koruma.
  • Birçok gezinti kategorisine erişimi düzenleme.

Diğer gezinti desenleri için bkz . Gezinti tasarımının temelleri.

Gezinti görünümü oluşturma

WinUI 3 Galeri uygulamasını açın ve NavigationView'un çalışır durumda olduğunu görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Bu örnekte XAML'de basit bir gezinti görünümünün nasıl oluşturulacağı gösterilmektedir.

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Nav Item A"/>
        <NavigationViewItem Content="Nav Item B"/>
        <NavigationViewItem Content="Nav Item C"/>
    </NavigationView.MenuItems>

    <Frame x:Name="ContentFrame"/>
</NavigationView>

Görüntüleme modları

NavigationView için farklı gezinti stilleri veya görüntüleme modları yapılandırmak için PaneDisplayMode özelliğini kullanabilirsiniz.

Yukarı

İçeriğin üzerine bölme yerleştirilmiştir.
PaneDisplayMode="Top"

Üst gezinti örneği

Aşağıdaki durumlarda en üst gezintiyi öneririz:

  • Eşit derecede önemli olan 5 veya daha az üst düzey gezinti kategoriniz vardır ve açılan taşma menüsündeki ek üst düzey gezinti kategorileri daha az önemli kabul edilir.
  • Tüm gezinti seçeneklerini ekranda göstermeniz gerekir.
  • Uygulama içeriğiniz için daha fazla alan istiyorsunuz.
  • Simgeler, uygulamanızın gezinti kategorilerini açıkça açıklayamaz.

Sol

Bölme genişletilir ve içeriğin soluna yerleştirilir.
PaneDisplayMode="Left"

Genişletilmiş sol gezinti bölmesi örneği

Aşağıdaki durumlarda sol gezintinizi öneririz:

  • 5-10 eşit derecede önemli üst düzey gezinti kategoriniz var.
  • Gezinti kategorilerinin diğer uygulama içeriği için daha az alanla çok belirgin olmasını istiyorsunuz.

SolKompakt

Bölme yalnızca açılana kadar simgeleri gösterir ve içeriğin soluna konumlandırılır. Açıldığında, bölme içeriğin üzerine biner.
PaneDisplayMode="LeftCompact"

Küçük sol gezinti bölmesi örneği

SolMinimal

Bölme açılana kadar yalnızca menü düğmesi gösterilir. Açıldığında, bölme içeriğin sol tarafını kaplar.
PaneDisplayMode="LeftMinimal"

Minimal sol gezinme bölmesi örneği

Auto

PaneDisplayMode varsayılan olarak Autoolarak ayarlanır. Auto modunda NavigationView, pencere dar olduğunda LeftMinimal modundan LeftCompactmoduna, ve ardından pencere genişlediğinde Left moduna geçecek şekilde uyarlanır. Daha fazla bilgi için uyarlamalı davranış bölümüne bakın.

sol gezinti varsayılan uyarlamalı davranışı
NavigationView varsayılan uyarlamalı davranışı

Anatomi

Bu görseller, üst veya sol gezinti için yapılandırıldığında, denetimin bölme, üst bilgi ve içerik alanlarının düzenini gösterir.

Üst NavigationView düzeni
Üst gezinti düzeni

Sol NavigationView düzeni
Sol gezinti düzeni

Panel

Bölmeyi içeriğin üzerine veya içeriğin soluna konumlandırmak için PaneDisplayMode özelliğini kullanabilirsiniz.

NavigationView bölmesi aşağıdakileri içerebilir:

Sol bölmede şunları da içerir:

  • Açılan ve kapatılan bölmeyi açmak için bir menü düğmesi. Bölme açıkken büyük uygulama pencerelerinde , IsPaneToggleButtonVisible özelliğini kullanarak bu düğmeyi gizlemeyi seçebilirsiniz.

NavigationView'da, bölmenin sol üst köşesine yerleştirilmiş bir geri düğmesi vardır. Ancak, geriye doğru gezinmeyi otomatik olarak işlemez ve arka yığına içerik eklemez. Geriye doğru gezintiyi etkinleştirmek için geriye doğru gezinti bölümüne bakın.

Üst ve sol bölme konumları için ayrıntılı bölme anatomisi aşağıdadır.

Üst gezinti bölmesi

NavigationView üst bölme anatomisi

  1. Headers
  2. Gezinti öğeleri
  3. Ayırıcı
  4. AutoSuggestBox (isteğe bağlı)
  5. Ayarlar düğmesi (isteğe bağlı)

Sol gezinti bölmesi

NavigationView sol bölme anatomisi

  1. Menü düğmesi
  2. Gezinti öğeleri
  3. Ayırıcı
  4. Headers
  5. AutoSuggestBox (isteğe bağlı)
  6. Ayarlar düğmesi (isteğe bağlı)

Gezinti öğelerini gezinti bölmesinin sonuna, öğeleri bölmenin başlangıcına yerleştiren MenuItems özelliğiyle karşıt olarak yerleştirmek için FooterMenuItems kullanabilirsiniz.

FooterMenuItems varsayılan olarak Settings öğesinden önce görüntülenir. Settings öğesi hala IsSettingsVisible özelliği kullanılarak değiştirilebilir.

FooterMenuItems içine yalnızca Gezinti öğeleri yerleştirilmelidir. Bölmenin alt bilgisine hizalanması gereken diğer tüm içerikler PaneFooter'a yerleştirilmelidir.

NavigationView'ınıza FooterMenuItems ekleme örneği için,FooterMenuItems sınıfına bakın.

Aşağıdaki resimde alt bilgi menüsünde Hesap, Sepetiniz ve Yardım gezinti öğeleri içeren bir NavigationView gösterilmektedir.

FooterMenuItems ile NavigationView

Bölmenin alt bilgisine, PaneFooter özelliğine ekleyerek serbest biçimli içerik yerleştirebilirsiniz.

Bölme alt bilgisi üst gezintisi
Üst panel alt bilgisi

Sol gezinti bölme alt bilgisi
Sol bölme alt bilgisi

Bölme başlığı ve üst bilgisi

PaneTitle özelliğini ayarlayarak metin içeriğini bölme üst bilgisi alanına yerleştirebilirsiniz. Bir dize alır ve menü düğmesinin yanındaki metni gösterir.

Resim veya logo gibi metin olmayan içerik eklemek için, bölmenin üst bilgisine herhangi bir öğeyi PaneHeader özelliğine ekleyerek yerleştirebilirsiniz.

Hem PaneTitle hem de PaneHeader ayarlanırsa, içerik menü düğmesinin yanında yatay olarak yığılır ve PaneTitle menü düğmesine en yakın durumda olur.

Panel başlık üst gezinti
Üst bölme üst bilgisi

Bölme başlığı sol navigasyon
Sol bölme üst bilgisi

Bölme içeriği

Bölmeye, PaneCustomContent özelliğine ekleyerek serbest biçimli içerik yerleştirebilirsiniz.

Panel özel içerik üst navigasyon
üst bölme özel içerik

Özel İçerikli Bölme Sol Navigasyonu
Sol bölme özel içeriği

Üstbilgi özelliğini ayarlayarak sayfa başlığı ekleyebilirsiniz.

NavigationView üst bilgi alanı örneği
NavigationView üst bilgisi

Üst bilgi alanı, sol bölme konumundaki gezinti düğmesiyle dikey olarak hizalanır ve üst bölme konumundaki bölmenin altında yer alır. Sabit yüksekliği 52 pikseldir. Amacı, seçili gezinti kategorisinin sayfa başlığını tutmaktır. Üst bilgi sayfanın en üstüne yerleştirilmiştir ve içerik alanı için bir kaydırma kırpma noktası işlevi görür.

NavigationView Minimal görüntüleme modunda olduğunda üst bilgi görünür. Üst bilgiyi, daha büyük pencere genişliklerinde kullanılan diğer modlarda gizlemeyi seçebilirsiniz. Üst bilgiyi gizlemek için AlwaysShowHeader özelliğini olarak ayarlayın.

Content

NavigationView içerik alanı örneği
NavigationView içeriği

İçerik alanı, seçili gezinti kategorisine ilişkin bilgilerin çoğunun görüntülendiği yerdir.

NavigationView Minimal modundayken içerik alanınız için 12 piksel kenar boşlukları ve aksi takdirde 24 piksel kenar boşlukları önerilir.

Uyarlamalı davranış

Varsayılan olarak, NavigationView ekran modunu, kullanılabilir ekran alanı miktarına göre otomatik olarak değiştirir. CompactModeThresholdWidth ve ExpandedModeThresholdWidth özellikleri, görüntüleme modunun değiştiği kesme noktalarını belirtir. Uyarlamalı görüntüleme modu davranışını özelleştirmek için bu değerleri değiştirebilirsiniz.

Varsayılan

PaneDisplayMode varsayılan Autodeğerine ayarlandığında uyarlamalı davranış şunları gösterir:

  • Büyük pencere genişliklerinde (1008 piksel veya üzeri) genişletilmiş bir sol bölme.
  • Orta pencere genişliklerinde (641 piksel - 1007 piksel) sol, yalnızca simge, gezinti bölmesi (LeftCompact).
  • Yalnızca küçük pencere genişliklerinde (640 piksel veya daha az) bir menü düğmesi (LeftMinimal).

Uyarlamalı davranış için pencere boyutları hakkında daha fazla bilgi için bkz. Ekran boyutları ve kesme noktaları.

sol gezinti varsayılan uyarlamalı davranışı
NavigationView varsayılan uyarlamalı davranışı

Minimal

İkinci yaygın uyarlamalı desen, geniş pencere genişliklerinde genişletilmiş bir sol bölme ve hem orta hem de küçük pencere genişliklerinde yalnızca bir menü düğmesi kullanmaktır.

Aşağıdaki durumlarda bunu öneririz:

  • Daha küçük pencere genişliklerinde uygulama içeriği için daha fazla alan istiyorsunuz.
  • Gezinti kategorileriniz simgelerle açıkça temsil edilemez.

sol gezinti en düşük uyarlamalı davranışı
NavigationView "en düşük" uyarlamalı davranış

Bu davranışı yapılandırmak için CompactModeThresholdWidth değerini bölmenin daraltılmasını istediğiniz genişliğe ayarlayın. Burada varsayılan değer olan 640'tan 1007'ye değiştirildi. Değerlerin çakışmadığından emin olmak için ExpandedModeThresholdWidth de ayarlamanız gerekir.

<NavigationView CompactModeThresholdWidth="1007" ExpandedModeThresholdWidth="1007"/>

Kompakt

Üçüncü yaygın uyarlamalı desen, geniş pencere genişliklerinde genişletilmiş bir sol bölme ve hem orta hem de küçük pencere genişliklerinde LeftCompact, yalnızca simge gezinti bölmesi kullanmaktır.

Aşağıdaki durumlarda bunu öneririz:

  • Tüm gezinti seçeneklerinin her zaman ekranda gösterilmesi önemlidir.
  • Gezinti kategorileriniz simgelerle açıkça gösterilebilir.

Sol gezinti kompakt uyarlamalı davranışı
NavigationView "kompakt" uyarlamalı davranışı

Bu davranışı yapılandırmak için CompactModeThresholdWidth değerini 0 olarak ayarlayın.

<NavigationView CompactModeThresholdWidth="0"/>

Uyarlamalı davranış yok

Otomatik uyarlamalı davranışı devre dışı bırakmak için PaneDisplayMode değerini Autodışında bir değere ayarlayın. Burada LeftMinimal olarak ayarlandığından, pencere genişliği ne olursa olsun yalnızca menü düğmesi gösterilir.

Sol gezinmede uyarlamalı davranış yok
PaneDisplayMode ayarı LeftMinimal olarak ayarlanmış NavigationView

<NavigationView PaneDisplayMode="LeftMinimal" />

Görüntü modları bölümünde daha önce açıklandığı gibi, bölmeyi her zaman üstte, her zaman genişletilmiş, her zaman kompakt veya her zaman en az olacak şekilde ayarlayabilirsiniz. Görüntü modlarını uygulama kodunuzda kendiniz de yönetebilirsiniz. Bunun bir örneği sonraki bölümde gösterilmiştir.

Üstten sola yönlendirme

Uygulamanızda üst gezinmeyi kullandığınızda, pencere genişliği azaldıkça gezinme öğeleri bir taşma menüsünde küçültülür. Uygulama pencereniz dar olduğunda, tüm öğelerin taşma menüsüne daraltılması yerine PaneDisplayMode'un Top'den LeftMinimal gezintiye geçmesi daha iyi bir kullanıcı deneyimi sağlayabilir.

Aşağıdaki durumlarda büyük pencere boyutlarında üst gezintiyi ve küçük pencere boyutlarında sol gezintiyi kullanmanızı öneririz:

  • Birlikte görüntülenecek eşit derecede önemli bir üst düzey gezinti kategoriniz vardır; bu kümedeki bir kategori ekrana sığmazsa, bunlara eşit önem vermek için sol gezintiye daraltabilirsiniz.
  • Küçük pencere boyutlarında mümkün olduğunca çok içerik alanı korumak istiyorsunuz.

Bu örnek, ve gezintileri arasında geçiş yapmak için Top ve LeftMinimal özelliğinin nasıl kullanılacağını göstermektedir.

Üst veya sol uyarlamalı davranış örneği 1 

<Grid>
    <NavigationView x:Name="NavigationViewControl" >
        <NavigationView.MenuItems>
            <NavigationViewItem Content="A" x:Name="A" />
            <NavigationViewItem Content="B" x:Name="B" />
            <NavigationViewItem Content="C" x:Name="C" />
        </NavigationView.MenuItems>
    </NavigationView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="{x:Bind NavigationViewControl.CompactModeThresholdWidth}" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="NavigationViewControl.PaneDisplayMode" Value="Top"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

İpucu

AdaptiveTrigger.MinWindowWidth kullandığınızda, pencere belirtilen minimum genişlikten daha geniş olduğunda görsel durum tetikleniyor. Bu, varsayılan XAML'nin dar pencereyi tanımladığı ve VisualState'in de pencere genişlediğinde uygulanan değişiklikleri tanımladığı anlamına gelir. NavigationView için varsayılan PaneDisplayMode Otomatik'tir, bu nedenle pencere genişliği CompactModeThresholdWidthküçük veya buna eşit olduğunda LeftMinimal gezinti kullanılır. Pencere genişlediğinde VisualState varsayılanı geçersiz kılar ve Top gezinti kullanılır.

NavigationView hiçbir gezinti görevini otomatik olarak gerçekleştirmez. Kullanıcı bir gezinti öğesine dokunduğunda, NavigationView bu öğeyi seçili olarak gösterir ve ItemInvoked olayı oluşturur. Dokunma sonucunda yeni bir öğe seçilirse SelectionChanged olayı da tetiklenir.

İstenen gezintiyle ilgili görevleri gerçekleştirmek için iki olayı da işleyebilirsiniz. Hangisini işlemeniz gerektiği, uygulamanız için istediğiniz davranışa bağlıdır. Genellikle, istenen sayfaya gider ve bu olaylara yanıt olarak NavigationView üst bilgisini güncelleştirirsiniz.

  • ItemInvoked , kullanıcı zaten seçili olsa bile bir gezinti öğesine dokunduğunda tetiklenir. (Öğe fare, klavye veya diğer girişler kullanılarak eşdeğer bir eylemle de çağrılabilir. Daha fazla bilgi için bkz . Giriş ve etkileşimler.) ItemInvoked işleyicisinde gezindiğinizde, varsayılan olarak sayfa yeniden yüklenir ve gezinti yığınına yinelenen bir giriş eklenir. Bir öğe çağrıldığında geziniyorsanız, sayfanın yeniden yüklenmesine izin vermemelisiniz veya sayfa yeniden yüklendiğinde gezinti arka yığınında yinelenen bir girdi oluşturulmadığından emin olmalısınız. (Bkz. kod örnekleri.)
  • SelectionChanged , şu anda seçili olmayan bir öğeyi çağıran bir kullanıcı tarafından veya seçili öğe program aracılığıyla değiştirilerek oluşturulabilir. Bir kullanıcı bir öğeyi çağırdığı için seçim değişikliği gerçekleşirse, önce ItemInvoked olayı gerçekleşir. Seçim değişikliği programlıysa ItemInvoked tetiklenmez.

İster MenuItems ister FooterMenuItems öğesinin parçası olsun, tüm gezinti öğeleri aynı seçim modelinin bir parçasıdır. Aynı anda yalnızca bir gezinti öğesi seçilebilir.

Geriye doğru gezinti

NavigationView'da yerleşik bir arka düğme vardır; ancak ileri gezintide olduğu gibi otomatik olarak geriye doğru gezinti gerçekleştirmez. Kullanıcı geri düğmesine dokunduğunda BackRequested olayı oluşturulur. Geriye doğru gezinti gerçekleştirmek için bu olayı işlersiniz. Daha fazla bilgi ve kod örneği için bkz . Gezinti geçmişi ve geriye doğru gezinti.

Minimal veya Compact modunda NavigationView Pane açılır öğe olarak açıktır. Bu durumda, geri düğmesine tıklamak Pane'ı kapatır ve PaneClosing olayını başlatır.

Şu özellikleri ayarlayarak geri düğmesini gizleyebilir veya devre dışı bırakabilirsiniz:

  • IsBackButtonVisible: geri düğmesini göstermek ve gizlemek için kullanın. Bu özellik NavigationViewBackButtonVisible sabit listesi değerini alır ve varsayılan olarak Auto ayarlanır. Düğme daraltıldığında, düzende bu düğme için hiçbir alan ayrılmaz.
  • IsBackEnabled: geri düğmesini etkinleştirmek veya devre dışı bırakmak için kullanın. Bu özelliği gezinti çerçevenizin CanGoBack özelliğine bağlayabilirsiniz. olduğunda BackRequested tetiklenmez.

Sol gezinti bölmesindeki NavigationView geri düğmesi
Sol gezinti bölmesindeki geri düğmesi

Üst gezinti bölmesindeki NavigationView geri düğmesi
Üst gezinti bölmesindeki geri düğmesi

Kod örneği

Bu örnek, hem büyük pencere boyutlarında üst gezinti bölmesi hem de küçük pencere boyutlarında sol gezinti bölmesi ile NavigationView'ı nasıl kullanabileceğinizi gösterir. VisualStateManager'daki en üst gezinti ayarları kaldırılarak yalnızca sol gezintiye uyarlanabilir.

Örnek, birçok senaryo için çalışacak gezinti verilerini ayarlamanın yaygın bir yolunu gösterir. Bu örnekte, ilk olarak gezinmek istediğiniz sayfanın tam tür adını depolarsınız ( NavigationViewItem etiketinde). Olay işleyicisinde bu değerin kutusunu kaldırıp Type(C#) veya Windows::UI::Xaml::Interop::TypeName(C++/WinRT) nesnesine dönüştürür ve hedef sayfaya gitmek için bunu kullanırsınız. Bu, etiketlerinizin içindeki değerlerin geçerli bir türde olduğunu onaylamak için birim testleri oluşturmanıza olanak tanır. (Ayrıca bkz. C++/WinRT ile IInspectable için değerleri kutulama ve kutudan çıkarma). Ayrıca, NavigationView'un geri düğmesiyle geriye doğru gezintinin nasıl uygulanacağını da göstermektedir.

Bu kod, uygulamanızın şu adlara sahip sayfalar içerdiğini varsayar: HomePage, AppsPage, GamesPage, MusicPage, MyContentPage ve SettingsPage. Bu sayfaların kodu gösterilmez.

<Page ... >
 <Grid>
     <NavigationView x:Name="NavView"
                     Loaded="NavView_Loaded"
                     ItemInvoked="NavView_ItemInvoked"
                     BackRequested="NavView_BackRequested">
         <NavigationView.MenuItems>
             <NavigationViewItem Tag="NavigationViewDemo.HomePage" Icon="Home" Content="Home"/>
             <NavigationViewItemSeparator/>
             <NavigationViewItemHeader x:Name="MainPagesHeader"
                                       Content="Main pages"/>
             <NavigationViewItem Tag="NavigationViewDemo.AppsPage" Content="Apps">
                 <NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xEB3C;"/>
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
             <NavigationViewItem Tag="NavigationViewDemo.GamesPage" Content="Games">
                 <NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xE7FC;"/>
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
             <NavigationViewItem Tag="NavigationViewDemo.MusicPage" Icon="Audio" Content="Music"/>
         </NavigationView.MenuItems>

         <NavigationView.AutoSuggestBox>
             <!-- See AutoSuggestBox documentation for
              more info about how to implement search. -->
             <AutoSuggestBox x:Name="NavViewSearchBox" QueryIcon="Find"/>
         </NavigationView.AutoSuggestBox>

         <ScrollViewer>
             <Frame x:Name="ContentFrame" IsTabStop="True"
                NavigationFailed="ContentFrame_NavigationFailed"/>
         </ScrollViewer>
     </NavigationView>

     <VisualStateManager.VisualStateGroups>
         <VisualStateGroup>
             <VisualState>
                 <VisualState.StateTriggers>
                     <AdaptiveTrigger
                     MinWindowWidth="{x:Bind NavViewCompactModeThresholdWidth}"/>
                 </VisualState.StateTriggers>
                 <VisualState.Setters>
                     <!-- Remove the next 3 lines for left-only navigation. -->
                     <Setter Target="NavView.PaneDisplayMode" Value="Top"/>
                     <Setter Target="NavViewSearchBox.Width" Value="200"/>
                     <Setter Target="MainPagesHeader.Visibility" Value="Collapsed"/>
                     <!-- Leave the next line for left-only navigation. -->
                     <Setter Target="ContentFrame.Padding" Value="24,0,24,24"/>
                 </VisualState.Setters>
             </VisualState>
         </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
 </Grid>
</Page>

private double NavViewCompactModeThresholdWidth { get { return NavView.CompactModeThresholdWidth; } }

private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

private void NavView_Loaded(object sender, RoutedEventArgs e)
{
    // You can also add items in code.
    NavView.MenuItems.Add(new NavigationViewItemSeparator());
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "My content",
        Icon = new SymbolIcon((Symbol)0xF1AD),
        Tag = "NavigationViewDemo.MyContentPage"
    });

    // Add handler for ContentFrame navigation.
    ContentFrame.Navigated += On_Navigated;

    // NavView doesn't load any page by default, so load home page.
    NavView.SelectedItem = NavView.MenuItems[0];
    // If navigation occurs on SelectionChanged, this isn't needed.
    // Because we use ItemInvoked to navigate, we need to call Navigate
    // here to load the home page.
    NavView_Navigate(typeof(HomePage), new EntranceNavigationTransitionInfo());
}

private void NavView_ItemInvoked(NavigationView sender,
                                 NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked == true)
    {
        NavView_Navigate(typeof(SettingsPage), args.RecommendedNavigationTransitionInfo);
    }
    else if (args.InvokedItemContainer != null)
    {
        Type navPageType = Type.GetType(args.InvokedItemContainer.Tag.ToString());
        NavView_Navigate(navPageType, args.RecommendedNavigationTransitionInfo);
    }
}

// NavView_SelectionChanged is not used in this example, but is shown for completeness.
// You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
// but not both.
private void NavView_SelectionChanged(NavigationView sender,
                                      NavigationViewSelectionChangedEventArgs args)
{
    if (args.IsSettingsSelected == true)
    {
        NavView_Navigate(typeof(SettingsPage), args.RecommendedNavigationTransitionInfo);
    }
    else if (args.SelectedItemContainer != null)
    {
        Type navPageType = Type.GetType(args.SelectedItemContainer.Tag.ToString());
        NavView_Navigate(navPageType, args.RecommendedNavigationTransitionInfo);
    }
}

private void NavView_Navigate(
    Type navPageType,
    NavigationTransitionInfo transitionInfo)
{
    // Get the page type before navigation so you can prevent duplicate
    // entries in the backstack.
    Type preNavPageType = ContentFrame.CurrentSourcePageType;

    // Only navigate if the selected page isn't currently loaded.
    if (navPageType is not null && !Type.Equals(preNavPageType, navPageType))
    {
        ContentFrame.Navigate(navPageType, null, transitionInfo);
    }
}

private void NavView_BackRequested(NavigationView sender,
                                   NavigationViewBackRequestedEventArgs args)
{
    TryGoBack();
}

private bool TryGoBack()
{
    if (!ContentFrame.CanGoBack)
        return false;

    // Don't go back if the nav pane is overlayed.
    if (NavView.IsPaneOpen &&
        (NavView.DisplayMode == NavigationViewDisplayMode.Compact ||
         NavView.DisplayMode == NavigationViewDisplayMode.Minimal))
        return false;

    ContentFrame.GoBack();
    return true;
}

private void On_Navigated(object sender, NavigationEventArgs e)
{
    NavView.IsBackEnabled = ContentFrame.CanGoBack;

    if (ContentFrame.SourcePageType == typeof(SettingsPage))
    {
        // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
        NavView.SelectedItem = (NavigationViewItem)NavView.SettingsItem;
        NavView.Header = "Settings";
    }
    else if (ContentFrame.SourcePageType != null)
    {
        // Select the nav view item that corresponds to the page being navigated to.
        NavView.SelectedItem = NavView.MenuItems
                    .OfType<NavigationViewItem>()
                    .First(i => i.Tag.Equals(ContentFrame.SourcePageType.FullName.ToString()));

        NavView.Header =
            ((NavigationViewItem)NavView.SelectedItem)?.Content?.ToString();

    }
}

// MainPage.idl
runtimeclass MainPage : Microsoft.UI.Xaml.Controls.Page
{
    ...
    Double NavViewCompactModeThresholdWidth{ get; };
}

// pch.h
...
#include <winrt/Windows.UI.Xaml.Interop.h>
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>


// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace winrt::NavigationViewDemo::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        double NavViewCompactModeThresholdWidth();
        void ContentFrame_NavigationFailed(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const& args);
        void NavView_Loaded(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::RoutedEventArgs const& /* args */);
        void NavView_ItemInvoked(
            Windows::Foundation::IInspectable const& /* sender */,
            muxc::NavigationViewItemInvokedEventArgs const& args);

        // NavView_SelectionChanged is not used in this example, but is shown for completeness.
        // You'll typically handle either ItemInvoked or SelectionChanged to perform navigation,
        // but not both.
        void NavView_SelectionChanged(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewSelectionChangedEventArgs const& args);
        void NavView_Navigate(
            Windows::UI::Xaml::Interop::TypeName navPageType,
            Microsoft::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo);
        void NavView_BackRequested(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewBackRequestedEventArgs const& /* args */);
        void On_Navigated(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& args);
        bool TryGoBack();

    private:

    };
}

namespace winrt::NavigationViewDemo::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.xaml.h"
#if __has_include("MainPage.g.cpp")
#include "MainPage.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

namespace winrt::NavigationViewDemo::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();
    }

    double MainPage::NavViewCompactModeThresholdWidth()
    {
        return NavView().CompactModeThresholdWidth();
    }

    void MainPage::ContentFrame_NavigationFailed(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const& args)
    {
        throw winrt::hresult_error(
            E_FAIL, winrt::hstring(L"Failed to load Page ") + args.SourcePageType().Name);
    }

    void MainPage::NavView_Loaded(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::RoutedEventArgs const& /* args */)
    {
        // You can also add items in code.
        NavView().MenuItems().Append(muxc::NavigationViewItemSeparator());
        muxc::NavigationViewItem navigationViewItem;
        navigationViewItem.Content(winrt::box_value(L"My content"));
        navigationViewItem.Icon(muxc::SymbolIcon(static_cast<muxc::Symbol>(0xF1AD)));
        navigationViewItem.Tag(winrt::box_value(L"NavigationViewDemo.MyContentPage"));
        NavView().MenuItems().Append(navigationViewItem);

        // Add handler for ContentFrame navigation.
        ContentFrame().Navigated({ this, &MainPage::On_Navigated });

        // NavView doesn't load any page by default, so load home page.
        NavView().SelectedItem(NavView().MenuItems().GetAt(0));
        // If navigation occurs on SelectionChanged, then this isn't needed.
        // Because we use ItemInvoked to navigate, we need to call Navigate
        // here to load the home page.
        NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::HomePage>(),
            Microsoft::UI::Xaml::Media::Animation::EntranceNavigationTransitionInfo());
    }

    void MainPage::NavView_ItemInvoked(
        Windows::Foundation::IInspectable const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        if (args.IsSettingsInvoked())
        {
            NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::SettingsPage>(),
                args.RecommendedNavigationTransitionInfo());
        }
        else if (args.InvokedItemContainer())
        {
            Windows::UI::Xaml::Interop::TypeName pageTypeName;
            pageTypeName.Name = unbox_value<hstring>(args.InvokedItemContainer().Tag());
            pageTypeName.Kind = Windows::UI::Xaml::Interop::TypeKind::Primitive;
            NavView_Navigate(pageTypeName, args.RecommendedNavigationTransitionInfo());
        }
    }

    // NavView_SelectionChanged is not used in this example, but is shown for completeness.
    // You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
    // but not both.
    void MainPage::NavView_SelectionChanged(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewSelectionChangedEventArgs const& args)
    {
        if (args.IsSettingsSelected())
        {
            NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::SettingsPage>(),
                args.RecommendedNavigationTransitionInfo());
        }
        else if (args.SelectedItemContainer())
        {
            Windows::UI::Xaml::Interop::TypeName pageTypeName;
            pageTypeName.Name = unbox_value<hstring>(args.SelectedItemContainer().Tag());
            pageTypeName.Kind = Windows::UI::Xaml::Interop::TypeKind::Primitive;
            NavView_Navigate(pageTypeName, args.RecommendedNavigationTransitionInfo());
        }
    }

    void MainPage::NavView_Navigate(
        Windows::UI::Xaml::Interop::TypeName navPageType,
        Microsoft::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo)
    {
        // Get the page type before navigation so you can prevent duplicate
        // entries in the backstack.
        Windows::UI::Xaml::Interop::TypeName preNavPageType =
            ContentFrame().CurrentSourcePageType();

        // Navigate only if the selected page isn't currently loaded.
        if (navPageType.Name != L"" && preNavPageType.Name != navPageType.Name)
        {
            ContentFrame().Navigate(navPageType, nullptr, transitionInfo);
        }
    }

    void MainPage::NavView_BackRequested(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewBackRequestedEventArgs const& /* args */)
    {
        TryGoBack();
    }

    bool MainPage::TryGoBack()
    {
        if (!ContentFrame().CanGoBack())
            return false;
        // Don't go back if the nav pane is overlayed.
        if (NavView().IsPaneOpen() &&
            (NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Compact ||
                NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Minimal))
            return false;
        ContentFrame().GoBack();
        return true;
    }

    void MainPage::On_Navigated(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& args)
    {
        NavView().IsBackEnabled(ContentFrame().CanGoBack());

        if (ContentFrame().SourcePageType().Name ==
            winrt::xaml_typename<NavigationViewDemo::SettingsPage>().Name)
        {
            // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
            NavView().SelectedItem(NavView().SettingsItem().as<muxc::NavigationViewItem>());
            NavView().Header(winrt::box_value(L"Settings"));
        }
        else if (ContentFrame().SourcePageType().Name != L"")
        {
            for (auto&& eachMenuItem : NavView().MenuItems())
            {
                auto navigationViewItem =
                    eachMenuItem.try_as<muxc::NavigationViewItem>();
                {
                    if (navigationViewItem)
                    {
                        winrt::hstring hstringValue =
                            winrt::unbox_value_or<winrt::hstring>(
                                navigationViewItem.Tag(), L"");
                        if (hstringValue == ContentFrame().SourcePageType().Name)
                        {
                            NavView().SelectedItem(navigationViewItem);
                            NavView().Header(navigationViewItem.Content());
                        }
                    }
                }
            }
        }
    }
}

Hiyerarşik gezinti

Bazı uygulamalar, yalnızca düz bir gezinti öğeleri listesinden daha fazlasını gerektiren daha karmaşık bir hiyerarşik yapıya sahip olabilir. Sayfa kategorilerini görüntülemek için üst düzey gezinti öğelerini, belirli sayfaları görüntülemek için ise alt öğeleri kullanmak isteyebilirsiniz. Yalnızca diğer sayfalara bağlanan hub stili sayfalarınız varsa da kullanışlıdır. Bu tür durumlar için hiyerarşik bir NavigationView oluşturmanız gerekir.

Bölmede iç içe gezinti öğelerinin hiyerarşik listesini göstermek için MenuItems özelliğini veya NavigationViewItem'inMenuItemsSource özelliğini kullanın. Her bir NavigationViewItem, diğer NavigationViewItem'leri ve öğeleri düzenlemek için, öğe başlıkları ve ayırıcılar gibi unsurları içerebilir. MenuItemsSourcekullanırken hiyerarşik bir liste göstermek için ItemTemplate NavigationViewItem olarak ayarlayın ve MenuItemsSource özelliğini hiyerarşinin bir sonraki düzeyine bağlayın.

NavigationViewItem herhangi bir sayıda iç içe düzey içerse de, uygulamanızın gezinti hiyerarşisini sığ tutmanızı öneririz. İki düzeyin kullanılabilirlik ve kavrama için ideal olduğuna inanıyoruz.

NavigationView Top, Leftve LeftCompact bölme görüntüleme modlarında hiyerarşiyi gösterir. Genişletilmiş alt ağaç, bölme görüntüleme modlarının her birinde şöyle görünür:

Hiyerarşili Gezinti Görünümü

İşaretlemeye öğe hiyerarşisi ekleme

Bu örnek, XAML işaretlemesinde hiyerarşik uygulama gezintisi bildirmeyi gösterir.

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home" ToolTipService.ToolTip="Home"/>
        <NavigationViewItem Content="Collections" Icon="Keyboard" ToolTipService.ToolTip="Collections">
            <NavigationViewItem.MenuItems>
                <NavigationViewItem Content="Notes" Icon="Page" ToolTipService.ToolTip="Notes"/>
                <NavigationViewItem Content="Mail" Icon="Mail" ToolTipService.ToolTip="Mail"/>
            </NavigationViewItem.MenuItems>
        </NavigationViewItem>
    </NavigationView.MenuItems>
</NavigationView>

Veri bağlama kullanarak öğe hiyerarşisi ekleme

NavigationView'e menü öğelerinin bir hiyerarşisini ekleyin.

  • MenuItemsSource özelliğini hiyerarşik verilere bağlama
  • öğe şablonunu NavigationViewMenuItem olarak tanımlama, İçerik öğesinin menü öğesinin etiketi olarak ayarlanması ve menuItemsSource özelliğinin hiyerarşinin bir sonraki düzeyine bağlı olması

Bu örnek ayrıca Genişletme ve Daraltma olaylarını da göstermektedir. Çocuk ögelere sahip bir menü ögesi için bu olaylar oluşturulur.

<Page ... >
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <NavigationViewItem Content="{x:Bind Name}" MenuItemsSource="{x:Bind Children}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <NavigationView x:Name="navview"
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}"
    ItemInvoked="{x:Bind OnItemInvoked}"
    Expanding="OnItemExpanding"
    Collapsed="OnItemCollapsed"
    PaneDisplayMode="Left">
            <StackPanel Margin="10,10,0,0">
                <TextBlock Margin="0,10,0,0" x:Name="ExpandingItemLabel" Text="Last Expanding: N/A"/>
                <TextBlock x:Name="CollapsedItemLabel" Text="Last Collapsed: N/A"/>
            </StackPanel>
        </NavigationView>
    </Grid>
</Page>

public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
}

public sealed partial class HierarchicalNavigationViewDataBinding : Page
{
    public HierarchicalNavigationViewDataBinding()
    {
        this.InitializeComponent();
    }

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon" },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon" }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon" },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon" }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon" }
    };

    private void OnItemInvoked(object sender, NavigationViewItemInvokedEventArgs e)
    {
        var clickedItem = e.InvokedItem;
        var clickedItemContainer = e.InvokedItemContainer;
    }
    private void OnItemExpanding(object sender, NavigationViewItemExpandingEventArgs e)
    {
        var nvib = e.ExpandingItemContainer;
        var name = "Last expanding: " + nvib.Content.ToString();
        ExpandingItemLabel.Text = name;
    }
    private void OnItemCollapsed(object sender, NavigationViewItemCollapsedEventArgs e)
    {
        var nvib = e.CollapsedItemContainer;
        var name = "Last collapsed: " + nvib.Content;
        CollapsedItemLabel.Text = name;
    }
}

// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        String Name;
        String CategoryIcon;
        Windows.Foundation.Collections.IObservableVector<Category> Children;
    }
}

// Category.h
#pragma once
#include "Category.g.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct Category : CategoryT<Category>
    {
        Category();
        Category(winrt::hstring name,
            winrt::hstring categoryIcon,
            Windows::Foundation::Collections::
                IObservableVector<HierarchicalNavigationViewDataBinding::Category> children);

        winrt::hstring Name();
        void Name(winrt::hstring const& value);
        winrt::hstring CategoryIcon();
        void CategoryIcon(winrt::hstring const& value);
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> Children();
        void Children(Windows::Foundation::Collections:
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> const& value);

    private:
        winrt::hstring m_name;
        winrt::hstring m_categoryIcon;
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_children;
    };
}

// Category.cpp
#include "pch.h"
#include "Category.h"
#include "Category.g.cpp"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    Category::Category()
    {
        m_children = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    }

    Category::Category(
        winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> children)
    {
        m_name = name;
        m_categoryIcon = categoryIcon;
        m_children = children;
    }

    hstring Category::Name()
    {
        return m_name;
    }

    void Category::Name(hstring const& value)
    {
        m_name = value;
    }

    hstring Category::CategoryIcon()
    {
        return m_categoryIcon;
    }

    void Category::CategoryIcon(hstring const& value)
    {
        m_categoryIcon = value;
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        Category::Children()
    {
        return m_children;
    }

    void Category::Children(
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            const& value)
    {
        m_children = value;
    }
}

// MainPage.idl
import "Category.idl";

namespace HierarchicalNavigationViewDataBinding
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Windows.Foundation.Collections.IObservableVector<Category> Categories{ get; };
    }
}

// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            Categories();

        void OnItemInvoked(muxc::NavigationView const& sender, muxc::NavigationViewItemInvokedEventArgs const& args);
        void OnItemExpanding(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemExpandingEventArgs const& args);
        void OnItemCollapsed(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemCollapsedEventArgs const& args);

    private:
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_categories;
    };
}

namespace winrt::HierarchicalNavigationViewDataBinding::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.h"
#include "MainPage.g.cpp"

#include "Category.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();

        m_categories =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

        auto menuItem10 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 10", L"Icon", nullptr);

        auto menuItem9 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 9", L"Icon", nullptr);
        auto menuItem8 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 8", L"Icon", nullptr);
        auto menuItem7Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem7Children.Append(*menuItem9);
        menuItem7Children.Append(*menuItem8);

        auto menuItem7 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 7", L"Icon", menuItem7Children);
        auto menuItem6Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem6Children.Append(*menuItem7);

        auto menuItem6 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 6", L"Icon", menuItem6Children);

        auto menuItem5 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 5", L"Icon", nullptr);
        auto menuItem4 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 4", L"Icon", nullptr);
        auto menuItem3Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem3Children.Append(*menuItem5);
        menuItem3Children.Append(*menuItem4);

        auto menuItem3 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 3", L"Icon", menuItem3Children);
        auto menuItem2Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem2Children.Append(*menuItem3);

        auto menuItem2 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 2", L"Icon", menuItem2Children);
        auto menuItem1Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem1Children.Append(*menuItem2);

        auto menuItem1 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 1", L"Icon", menuItem1Children);

        m_categories.Append(*menuItem1);
        m_categories.Append(*menuItem6);
        m_categories.Append(*menuItem10);
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        MainPage::Categories()
    {
        return m_categories;
    }

    void MainPage::OnItemInvoked(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        auto clickedItem = args.InvokedItem();
        auto clickedItemContainer = args.InvokedItemContainer();
    }

    void MainPage::OnItemExpanding(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemExpandingEventArgs const& args)
    {
        auto nvib = args.ExpandingItemContainer();
        auto name = L"Last expanding: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        ExpandingItemLabel().Text(name);
    }

    void MainPage::OnItemCollapsed(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemCollapsedEventArgs const& args)
    {
        auto nvib = args.CollapsedItemContainer();
        auto name = L"Last collapsed: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        CollapsedItemLabel().Text(name);
    }
}

Seleksiyon

Varsayılan olarak, herhangi bir öğe alt öğe içerebilir, çağrılabilir veya seçilebilir.

Kullanıcılara hiyerarşik gezinti seçenekleri ağacı sağlarken, örneğin uygulamanızın bu üst öğeyle ilişkilendirilmiş bir hedef sayfası olmadığında üst öğeleri seçilemez hale getirebilirsiniz. Üst öğeleriniz seçilebilirse, Left-Expanded veya Üst bölme görüntüleme modlarını kullanmanız önerilir. LeftCompact modu, her çağrıldığında kullanıcının alt dalı açabilmesi için üst öğeye gitmesini gerektirir.

Seçili öğeler, sol moddayken seçim göstergelerini sol kenarlarına veya üst moddayken alt kenarlarına çizer. Aşağıda, bir ana öğenin seçildiği sol ve üst moddaki NavigationViews gösterilmektedir.

Ana seçiliyken sol modda NavigationView

Üst gezinme modunda ebeveyn öğe seçiliyken NavigationView

Seçili öğe her zaman görünür durumda olmayabilir. Daraltılmış/genişletilmemiş alt ağaçtaki bir alt öğe seçilirse, onların ilk görünür üst öğesi seçili olarak gösterilecektir. Alt ağaç genişletildiğinde seçim göstergesi seçili öğeye geri taşınır.

Örneğin, yukarıdaki görüntüde Takvim öğesi kullanıcı tarafından seçilebilir ve ardından kullanıcı alt ağacını daraltma işlemi gerçekleştirebilir. Bu durumda, seçim göstergesi, Takvim'in ilk görünen üst öğesi olan Hesap öğesinin altında belirir. Kullanıcı alt ağacı yeniden genişletirken seçim göstergesi Takvim öğesine geri taşınır.

NavigationView'un tamamında birden fazla seçim göstergesi gösterilmez.

Hem Üst hem de Sol modlarda NavigationViewItems üzerindeki oklara tıklanması alt ağacı genişletir veya daraltacaktır. NavigationViewItem'da başka bir tıklanması veya dokunması, olayını tetikler ve ayrıca alt ağacı daraltacak veya genişletecektir.

Bir öğenin çağrıldığında seçim göstergesini göstermesini önlemek için, aşağıda gösterildiği gibi SelectsOnInvoked özelliğini False olarak ayarlayın:

<Page ...>
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <NavigationViewItem Content="{x:Bind Name}"
            MenuItemsSource="{x:Bind Children}"
            SelectsOnInvoked="{x:Bind IsLeaf}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <NavigationView x:Name="navview"
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
        </NavigationView>
    </Grid>
</Page>

public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
    public bool IsLeaf { get; set; }
}

public sealed partial class HierarchicalNavigationViewDataBinding : Page
{
    public HierarchicalNavigationViewDataBinding()
    {
        this.InitializeComponent();
    }

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon", IsLeaf = true },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon", IsLeaf = true }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon", IsLeaf = true },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon", IsLeaf = true }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon", IsLeaf = true }
    };
}

// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        ...
        Boolean IsLeaf;
    }
}

// Category.h
...
struct Category : CategoryT<Category>
{
    ...
    Category(winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
        bool isleaf = false);
    ...
    bool IsLeaf();
    void IsLeaf(bool value);

private:
    ...
    bool m_isleaf;
};

// Category.cpp
...
Category::Category(winrt::hstring name,
    winrt::hstring categoryIcon,
    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
    bool isleaf) : m_name(name), m_categoryIcon(categoryIcon), m_children(children), m_isleaf(isleaf) {}
...
bool Category::IsLeaf()
{
    return m_isleaf;
}

void Category::IsLeaf(bool value)
{
    m_isleaf = value;
}

// MainPage.h and MainPage.cpp
// Delete OnItemInvoked, OnItemExpanding, and OnItemCollapsed.

// MainPage.cpp
...
MainPage::MainPage()
{
    InitializeComponent();

    m_categories = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

    auto menuItem10 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 10", L"Icon", nullptr, true);

    auto menuItem9 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 9", L"Icon", nullptr, true);
    auto menuItem8 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 8", L"Icon", nullptr, true);
    auto menuItem7Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem7Children.Append(*menuItem9);
    menuItem7Children.Append(*menuItem8);

    auto menuItem7 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 7", L"Icon", menuItem7Children);
    auto menuItem6Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem6Children.Append(*menuItem7);

    auto menuItem6 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 6", L"Icon", menuItem6Children);

    auto menuItem5 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 5", L"Icon", nullptr, true);
    auto menuItem4 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 4", L"Icon", nullptr, true);
    auto menuItem3Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem3Children.Append(*menuItem5);
    menuItem3Children.Append(*menuItem4);

    auto menuItem3 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 3", L"Icon", menuItem3Children);
    auto menuItem2Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem2Children.Append(*menuItem3);

    auto menuItem2 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 2", L"Icon", menuItem2Children);
    auto menuItem1Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem1Children.Append(*menuItem2);

    auto menuItem1 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 1", L"Icon", menuItem1Children);

    m_categories.Append(*menuItem1);
    m_categories.Append(*menuItem6);
    m_categories.Append(*menuItem10);
}
...

Hiyerarşik NavigationView içinde klavye kullanımı

Kullanıcılar klavyelerini kullanarak odağı NavigationView çevresinde taşıyabilir. Ok tuşları bölmenin içinde "iç gezintiyi" gösterir ve ağaç görünümünde sağlanan etkileşimleri izler. NavigationView'de veya HierarchicalNavigationView'un Üst ve Sol-sıkıştırılmış modlarında görüntülenen açılır menüde gezinirken temel eylemler değişir. Her anahtarın hiyerarşik NavigationView'da gerçekleştirebileceği belirli eylemler aşağıdadır:

Key Sol Modda En Üst Modda Açılır Menüde
Up Odağı, şu anda odakta olan öğenin hemen üstündeki öğeye taşır. Hiçbir şey yapmaz. Odağı, şu anda odakta olan öğenin hemen üstündeki öğeye taşır.
Aşağıya doğru Odağı şu anda odakta olan öğenin hemen altına taşır.* Hiçbir şey yapmaz. Odağı şu anda odakta olan öğenin hemen altına taşır.*
Doğru Hiçbir şey yapmaz. Odağı, şu anda odakta olan öğenin sağındaki öğeye taşır. Hiçbir şey yapmaz.
Sol Hiçbir şey yapmaz. Odağı, o anda odakta olan öğenin doğrudan soluna taşır. Hiçbir şey yapmaz.
Boşluk/Enter Öğenin alt öğeleri varsa öğeyi genişletir/daraltır ve odağı değiştirmez. Öğenin alt öğeleri varsa, alt öğeleri açılır menüye genişletir ve açılır menüdeki ilk öğeye odaklanır. Öğeyi çağırır/seçer ve açılır menüyü kapatır.
Esc Hiçbir şey yapmaz. Hiçbir şey yapmaz. Açılır menüyü kapatır.

Boşluk veya enter tuşu her zaman bir öğeyi çağırır/seçer.

*Öğelerin görsel olarak bitişik olması gerekmediğini, odağın bölmenin listesindeki son öğeden ayarlar öğesine taşınacağını unutmayın.

Bölme Arka Planları

Varsayılan olarak, NavigationView bölmesi görüntüleme moduna bağlı olarak farklı bir arka plan kullanır:

  • bölme, solda genişletildiğinde, içerikle yan yana (Sol modda) yerleşir ve düz gri bir renk alır.
  • bölme, içeriğin üzerine katman olarak açıldığında uygulama içi akrilik kullanır (Üst, En Az veya Sıkıştırılmış modda).

Bölme arka planını değiştirmek için, arka planı her modda işlemek için kullanılan XAML tema kaynaklarını geçersiz kılabilirsiniz. (Bu teknik, farklı görüntü modlarında farklı arka planları desteklemek amacıyla tek bir PaneBackground özelliği yerine kullanılır.)

Bu tablo, her görüntüleme modunda hangi tema kaynağının kullanıldığını gösterir.

Görüntüleme modu Tema kaynağı
Sol GezinimGörünümüGenişletilmişBölmeArkaPlan
SolKompakt
SolMinimal		 GezinimGörünümüVarsayılanPanelArkaPlanı
Yukarı GezinmeGörünümüÜstPanelArkaplan

Bu örnekte, App.xaml'de tema kaynaklarının nasıl geçersiz kılınacakları gösterilmektedir. Tema kaynaklarını geçersiz kıldığınızda, her zaman en azından "Varsayılan" ve "Yüksek Kontrast" kaynak sözlüklerini sağlamalı, ayrıca gerekirse "Açık" veya "Koyu" kaynaklar için sözlükler eklemelisiniz. Daha fazla bilgi için bkz. ResourceDictionary.ThemeDictionaries.

Önemli

Bu kod, Akrilik Fırça'nın WinUI 2 sürümünün nasıl kullanılacağını gösterir. Bunun yerine Akrilik Fırça'nın platform sürümünü kullanıyorsanız, uygulama projenizin en düşük sürümü SDK 16299 veya üzeri olmalıdır. Platform sürümünü kullanmak için muxm:'e yapılan tüm referansları kaldırın.

<Application ... xmlns:muxm="using:Microsoft.UI.Xaml.Media" ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                        <ResourceDictionary x:Key="Default">
                            <!-- The "Default" theme dictionary is used unless a specific
                                 light, dark, or high contrast dictionary is provided. These
                                 resources should be tested with both the light and dark themes,
                                 and specific light or dark resources provided as needed. -->
                            <muxm:AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="LightSlateGray"
                                   TintOpacity=".6"/>
                            <muxm:AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="{ThemeResource SystemAccentColor}"
                                   TintOpacity=".6"/>
                            <LinearGradientBrush x:Key="NavigationViewExpandedPaneBackground"
                                     StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="LightSlateGray" Offset="0.0" />
                                <GradientStop Color="White" Offset="1.0" />
                            </LinearGradientBrush>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="HighContrast">
                            <!-- Always include a "HighContrast" dictionary when you override
                                 theme resources. This empty dictionary ensures that the
                                 default high contrast resources are used when the user
                                 turns on high contrast mode. -->
                        </ResourceDictionary>
                    </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Üst boşluk

özelliği IsTitleBarAutoPaddingEnabledWinUI 2.2 veya sonraki bir sürümü gerektirir.

Bazı uygulamalar, pencerelerinin başlık çubuğunuözelleştirmeyi tercih ederek uygulama içeriğini başlık çubuğu alanına genişletebilir. NavigationView, ExtendViewIntoTitleBar APIkullanarak başlık çubuğuna genişleyen uygulamalarda kök öğe olduğunda, denetim, sürüklenebilir bölgeile çakışmayı önlemek için etkileşimli öğelerinin konumunu otomatik olarak ayarlar.

Başlık çubuğuna genişleten bir uygulama

Uygulamanız Window.SetTitleBar yöntemini çağırarak sürüklenebilir bölgeyi belirtiyorsa ve geri ve menü düğmelerinin uygulama pencerenizin en üstüne daha yakın olmasını tercih ediyorsanız, IsTitleBarAutoPaddingEnabled olarak ayarlayın.

Ek doldurma olmadan başlık çubuğuna genişleten uygulama 

<muxc:NavigationView x:Name="NavView" IsTitleBarAutoPaddingEnabled="False">

Açıklamalar

NavigationView'un üst bilgi alanının konumunu daha fazla ayarlamak için, Örneğin Sayfa kaynaklarınızda NavigationViewHeaderMargin XAML tema kaynağını geçersiz kılın.

<Page.Resources>
    <Thickness x:Key="NavigationViewHeaderMargin">12,0</Thickness>
</Page.Resources>

Bu tema kaynağı NavigationView.Header'ın etrafındaki kenar boşluğunu değiştirir.

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

UWP uygulamaları için NavigationView denetimi WinUI 2'nin bir parçası olarak dahil edilir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri hem Windows.UI.Xaml.Controls hem de Microsoft.UI.Xaml.Controls ad alanlarında mevcuttur.

Tüm denetimler için en güncel stilleri, şablonları ve özellikleri almak için en son WinUI 2'yi kullanmanızı öneririz. NavigationView'un üst ve hiyerarşik gezinti gibi bazı özellikleri Windows 10, sürüm 1809 (SDK 17763) veya üzeri ya da WinUI 2 gerektirir.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:NavigationView />
  • Last updated on