Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
A NavigationView vezérlő legfelső szintű navigációt biztosít az alkalmazás számára. Számos képernyőmérethez alkalmazkodik, és támogatja a felső és a bal oldali navigációs stílusokat is.
A NavigationView támogatja a felső és a bal oldali navigációs ablakot vagy menüt is
Ez a megfelelő vezérlő?
A NavigationView egy adaptív navigációs vezérlő, amely a következőkhöz használható:
- Egységes navigációs élményt biztosít az alkalmazásban.
- A képernyő területének megőrzése kisebb ablakokon.
- Hozzáférés rendezése számos navigációs kategóriához.
További navigációs mintákért lásd: A navigáció tervezésének alapjai.
Navigációs nézet létrehozása
- Fontos API-k:NavigationView osztály
A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.
Ez a példa bemutatja, hogyan hozhat létre egyszerű navigációs nézetet XAML-ben.
<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>
Megjelenítési módok
A PaneDisplayMode tulajdonság segítségével különböző navigációs stílusokat vagy megjelenítési módokat konfigurálhat a NavigationView nézethez.
Felső
Az ablaktábla a tartalom felett helyezkedik el.PaneDisplayMode="Top"
Javasoljuk a felső navigációt, ha:
- Legalább 5 olyan felső szintű navigációs kategóriával rendelkezik, amelyek egyformán fontosak, és a legördülő túlcsordulás menüben végződő további felső szintű navigációs kategóriák kevésbé fontosak.
- Meg kell jelenítenie az összes navigációs lehetőséget a képernyőn.
- Több helyet szeretne az alkalmazás tartalmának.
- Az ikonok nem írhatják le egyértelműen az alkalmazás navigációs kategóriáit.
Balra
Az ablaktábla ki van bontva, és a tartalom bal oldalán helyezkedik el.PaneDisplayMode="Left"
Javasoljuk a bal oldali navigációt, ha:
- 5-10 egyformán fontos legfelső szintű navigációs kategória van.
- Azt szeretné, hogy a navigációs kategóriák nagyon hangsúlyosak legyenek, és kevesebb helyet biztosítsanak az egyéb alkalmazástartalmak számára.
LeftCompact
Az ablaktábla csak az ikonokat jeleníti meg a megnyitásig, és a tartalom bal oldalán helyezkedik el. Megnyitáskor az ablaktábla átfedi a tartalmat.PaneDisplayMode="LeftCompact"
LeftMinimal
Csak a menü gomb jelenik meg az ablaktábla megnyitásáig. Megnyitáskor az ablaktábla a tartalom bal oldalát fedi le.PaneDisplayMode="LeftMinimal"
Auto
Alapértelmezés szerint a PaneDisplayMode beállítása Auto.
Auto módban a NavigationView alkalmazkodik, keskeny ablak esetén LeftMinimal módba, LeftCompactállapotba, majd Left módba váltva, ahogy az ablak szélesedik. Lásd a(z) adaptív viselkedés szakasz részleteit további információkért.
NavigationView alapértelmezett adaptív viselkedés
Anatómia
Ezek a képek a vezérlő ablaktáblájának, fejlécének és tartalmi területeinek elrendezését mutatják, ha felső vagybal oldali navigációra van konfigurálva.
Felső navigációs elrendezés
Bal oldali navigációs elrendezés
Panel
A PaneDisplayMode tulajdonsággal a panelt a tartalom fölé vagy a tartalomtól balra helyezheti el.
A NavigationView ablaktábla a következőket tartalmazhatja:
- NavigationViewItem objektumokat. Navigációs elemek adott oldalakra való navigáláshoz.
- NavigationViewItemSeparator objektumokat. Elválasztók a navigációs elemek csoportosításához. Állítsa a Opacitás tulajdonságot 0 értékre, hogy az elválasztó szóközként jelenjön meg.
- NavigationViewItemHeader objektumok. Fejlécek az elemek csoportjainak címkézéséhez.
- Egy opcionális AutoSuggestBox vezérlő az alkalmazásszintű keresés engedélyezéséhez. Rendelje hozzá a vezérlőt a NavigationView.AutoSuggestBox tulajdonsághoz.
- Az alkalmazásbeállítások opcionális belépési pontja. A beállításelem elrejtéséhez állítsa az IsSettingsVisible tulajdonságot a következőre
false: .
A bal oldali ablaktábla a következőket is tartalmazza:
- Egy menügomb a megnyitott és bezárt ablaktábla váltásához. Nagyobb alkalmazásablakokban, amikor a panel meg van nyitva, elrejtheti ezt a gombot az IsPaneToggleButtonVisible tulajdonság használatával.
A Navigációs nézet egy vissza gombbal rendelkezik, amely az ablaktábla bal felső sarkában található. Azonban nem kezeli automatikusan a visszamenőleges navigációt, és nem ad hozzá tartalmat a háttérveremhez. A visszafelé navigáció engedélyezéséhez tekintse meg a visszafelé navigációs szakaszt.
Itt található a részletes panel anatómiája a felső és bal panel pozíciókhoz.
Felső navigációs ablak
- Fejlécek
- Navigációs elemek
- Elválasztók
- AutoSuggestBox (nem kötelező)
- Beállítások gomb (nem kötelező)
Bal oldali navigációs ablak
- Menü gomb
- Navigációs elemek
- Elválasztók
- Fejlécek
- AutoSuggestBox (nem kötelező)
- Beállítások gomb (nem kötelező)
Lábléc menüelemek
A FooterMenuItems segítségével a navigációs elemeket a navigációs ablak végére helyezheti, szemben a MenuItems tulajdonsággal, amely az elemeket az ablaktábla elejére helyezi.
A lábléc menüelemek alapértelmezés szerint a Settings elem előtt jelennek meg. Az Settings elem továbbra is átkapcsolható a IsSettingsVisible tulajdonság használatával.
Csak a navigációs elemeket kell elhelyezni a LáblécMenüElemekben – minden más tartalmat, amelyet az ablaktábla láblécéhez kell igazítani, a PaneFooterszakaszban kell elrendezni.
A FooterMenuItems NavigationView-hoz való hozzáadására vonatkozó példát a FooterMenuItems osztályban találja.
Az alábbi képen egy NavigationView látható, amelyen a lábléc menüben található navigációs elemek: Fiók, A te kosarad, és Súgó.
Ablaktábla lábléc
Szabad formátumú tartalmat helyezhet el az ablaktábla láblécében, ha hozzáadja azt a PaneFooter tulajdonsághoz.
felső ablaktábla lábléce
Baloldali ablaktábla lábléce
Panel címe és fejléce
A szöveges tartalmat az ablaktábla fejlécében a PaneTitle tulajdonság beállításával helyezheti el. Karakterláncot vesz igénybe, és megjeleníti a szöveget a menügomb mellett.
Nem szöveges tartalom, például kép vagy embléma hozzáadásához bármilyen elemet elhelyezhet az ablaktábla fejlécében, ha hozzáadja azt a PaneHeader tulajdonsághoz.
Ha a PaneTitle és a PaneHeader is be van állítva, a tartalom vízszintesen halmozódik a menügomb mellett, és a PaneTitle a menü gombhoz legközelebb van.
Felső panel fejlécének
Bal oldali ablaktábla fejlécének
Panel tartalma
Szabad formátumú tartalmat helyezhet el az ablaktáblában, ha hozzáadja azt a PaneCustomContent tulajdonsághoz.
Felső panel egyéni tartalma
Bal oldali panel személyre szabott tartalom
Header
Az oldal címét a Fejléc tulajdonság beállításával adhatja hozzá.
NavigationView fejléc
A fejlécterület függőlegesen van igazítva a navigációs gombbal a bal oldali ablaktábla pozíciójában, és az ablaktábla alatt helyezkedik el a felső ablaktábla pozíciójában. Fix magassága 52 px. Célja a kiválasztott navigációs kategória oldalcímének tárolása. Az élőfej a lap tetejére van rögzítve, és a tartalomterület görgetési kivágási pontjaként működik.
A fejléc minden alkalommal látható, amikor a NavigationView megjelenítési módban Minimal van. Dönthet úgy, hogy elrejti a fejlécet más módokban, amelyeket nagyobb ablakszélességeknél használnak. A fejléc elrejtéséhez állítsa az AlwaysShowHeader tulajdonságot .false
Content
NavigationView tartalom
A tartalomterületen jelenik meg a kiválasztott navigációs kategória legtöbb információja.
Amikor a NavigationView Minimal módban van, javasoljuk, hogy a tartalomterület margóinak mérete 12px legyen, egyébként pedig 24px.
Adaptív viselkedés
Alapértelmezés szerint a NavigationView automatikusan megváltoztatja a megjelenítési módot a rendelkezésére álló képernyőterület alapján. A CompactModeThresholdWidth és az ExpandedModeThresholdWidth tulajdonságok határozzák meg azokat a töréspontokat, amelyeknél a megjelenítési mód megváltozik. Ezeket az értékeket módosíthatja az adaptív megjelenítési mód viselkedésének testreszabásához.
Alapértelmezett
Ha a PaneDisplayMode alapértelmezett értéke Auto, az adaptív viselkedés a következő:
- Kibontott bal oldali ablaktábla nagy ablakszélességen (1008 képpont vagy nagyobb).
- Baloldali, csak ikonra mutató navigációs ablaktábla (
LeftCompact) közepes ablakszélességen (641–1007 képpont). - Csak egy menügomb (
LeftMinimal) kis ablakszélességen (640 képpont vagy kevesebb).
További információ az adaptív viselkedés ablakméreteiről: Képernyőméretek és töréspontok.
NavigationView alapértelmezett adaptív viselkedés
Minimális
A második gyakori adaptív minta a kibontott bal oldali ablaktábla használata nagy ablakszélességeknél, és csak egy menügomb használata mind a közepes, mind a kis ablakszélességnél.
Ezt a következő esetekben javasoljuk:
- Több helyet szeretne az alkalmazás tartalmának kisebb ablakszélességeken.
- A navigációs kategóriák nem jeleníthetők meg egyértelműen ikonokkal.
NavigationView "minimális" adaptív viselkedés
A viselkedés konfigurálásához állítsa a CompactModeThresholdWidth értéket arra a szélességre, amelynél az ablaktáblát össze szeretné csukni. Itt az alapértelmezett 640-ről 1007-re módosul. Állítsa be az ExpandedModeThresholdWidth értéket is, hogy az értékek ne ütközzenek egymásnak.
<NavigationView CompactModeThresholdWidth="1007" ExpandedModeThresholdWidth="1007"/>
Kompakt
A harmadik gyakori adaptív minta a kibontott bal oldali ablaktábla használata nagy ablakszélességeknél, és egy LeftCompact, csak ikont tartalmazó navigációs ablaktábla használata mind a közepes, mind a kis ablakszélességeknél.
Ezt a következő esetekben javasoljuk:
- Fontos, hogy az összes navigációs lehetőség mindig megjelenjen a képernyőn.
- A navigációs kategóriák egyértelműen ábrázolhatók ikonokkal.
NavigationView "kompakt" adaptív viselkedés
A viselkedés konfigurálásához állítsa a CompactModeThresholdWidth értékét 0-ra.
<NavigationView CompactModeThresholdWidth="0"/>
Nincs adaptív viselkedés
Az automatikus adaptív viselkedés letiltásához állítsa a PaneDisplayMode értékét Auto-tól eltérő értékre. Itt LeftMinimal értékre van állítva, így csak a menü gomb jelenik meg, függetlenül az ablak szélességétől.
Navigációs nézet, amelynek PaneDisplayMode beállítása LeftMinimal
<NavigationView PaneDisplayMode="LeftMinimal" />
A Megjelenítési módok szakaszban korábban leírtak szerint beállíthatja, hogy az ablaktábla mindig felül, mindig kibontva, mindig kompakt vagy mindig minimális legyen. A megjelenítési módokat saját maga is kezelheti az alkalmazás kódjában. Erre a következő szakaszban mutatunk példát.
Balra fentről navigáció
Ha felső navigációt használ az alkalmazásban, a navigációs elemek összecsukódnak egy többletmenübe az ablak szélességének csökkenésével. Ha az alkalmazásablak szűk, jobb felhasználói élményt nyújthat, ha a PaneDisplayMode-t Top-ról LeftMinimal navigációra váltja, ahelyett, hogy az összes elem a túlcsordulási menübe összeomlana.
Javasoljuk, hogy nagy ablakméreteknél használja a felső navigációt, a kis ablakméreteknél pedig a bal oldali navigációt, ha:
- Egy sor egyformán fontos felső szintű navigációs kategóriát kell megjeleníteni együtt. Ha ezek közül bármelyik nem fér el a képernyőn, a baloldali navigációs sávra váltva ugyanolyan fontosságot biztosítunk számukra.
- Kis ablakméretekben a lehető legtöbb tartalomterületet szeretné megőrizni.
Ez a példa bemutatja, hogyan lehet a VisualStateManager-t és az AdaptiveTrigger.MinWindowWidth tulajdonságot használni a Top és LeftMinimal navigáció közötti váltáshoz.
<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>
Jótanács
Az AdaptiveTrigger.MinWindowWidth használata esetén a vizualizációs állapot akkor aktiválódik, ha az ablak szélesebb a megadott minimális szélességnél. Ez azt jelenti, hogy az alapértelmezett XAML határozza meg a keskeny ablakot, a VisualState pedig az ablak szélesedésekor alkalmazott módosításokat. A NavigationView alapértelmezett PaneDisplayMode értéke az Auto, így ha az ablak szélessége kisebb vagy egyenlő, a CompactModeThresholdWidth navigációt használja a LeftMinimal rendszer. Amikor az ablak szélesebb lesz, a VisualState felülírja az alapértelmezett állapotot, és a Top navigáció kerül alkalmazásra.
Navigáció
A NavigationView nem hajt végre automatikusan navigációs feladatokat. Amikor a felhasználó egy navigációs elemre koppint, a NavigationView az elemet kijelöltként jeleníti meg, és egy ItemInvoked eseményt hoz létre. Ha a koppintás egy új elem kijelölését eredményezi, egy SelectionChanged esemény is generálódik.
Bármelyik eseményt kezelheti a kért navigációval kapcsolatos feladatok végrehajtásához. Az, hogy melyiket kell kezelnie, az alkalmazáshoz használni kívánt viselkedéstől függ. Általában a kért oldalra navigál, és ezekre az eseményekre válaszul frissíti a NavigationView fejlécet.
- Az ItemInvoked minden alkalommal megjelenik, amikor a felhasználó egy navigációs elemre koppint, még akkor is, ha az már ki van választva. (Az elem meghívható egy egyenértékű művelettel egérrel, billentyűzettel vagy más bevitellel is. További információ: Bemenet és interakciók.) Ha az ItemInvoked kezelőben navigál, alapértelmezés szerint az oldal újra betöltődik, és egy ismétlődő bejegyzés lesz hozzáadva a navigációs veremhez. Ha egy elem meghívásakor navigál, tiltsa le az oldal újratöltését, vagy győződjön meg arról, hogy az oldal újratöltésekor nem jön létre ismétlődő bejegyzés a navigációs háttérben. (Lásd a kódpéldákat.)
- SelectionChanged akkor váltható ki, amikor egy felhasználó egy jelenleg nem kijelölt elemet aktivál, vagy amikor programozottan megváltozik a kijelölt elem. Ha a kijelölés módosítása azért történik, mert egy felhasználó meghívott egy elemet, akkor először az ItemInvoked esemény következik be. Ha a kijelölés módosítása programszerű, az ItemInvoked nem lesz kiváltva.
Minden navigációs elem ugyanannak a kijelölési modellnek a része, függetlenül attól, hogy a MenuItems vagy a FooterMenuItems részei. Egyszerre csak egy navigációs elem választható ki.
Visszafelé navigálás
A NavigationView beépített vissza gombbal rendelkezik; De az előre navigációhoz hasonlóan nem hajtja végre automatikusan a visszafelé navigációt. Amikor a felhasználó a vissza gombra koppint, a BackRequested esemény megjelenik. Ezt az eseményt a visszamenőleges navigáció végrehajtásához fogja kezelni. További információkért és példakódokért lásd: Navigációs előzmények és visszamenőleges navigáció.
Minimal vagy Compact módban a NavigationView Pane lebegő ablak formájában nyílik meg. Ebben az esetben a vissza gombra kattintva bezárja a Pane, és ehelyett a PaneClosing eseményt emeli ki.
A Vissza gombot az alábbi tulajdonságok megadásával rejtheti el vagy tilthatja le:
-
IsBackButtonVisible: a vissza gomb megjelenítésére és elrejtésére szolgál. Ez a tulajdonság a NavigationViewBackButtonVisible enumerálás értékét veszi fel, és alapértelmezés szerint a következőre
Autovan állítva. Ha a gomb össze van húzva, nem foglal helyet az elrendezésben. -
IsBackEnabled: a vissza gomb engedélyezésére vagy letiltására szolgál. Ezt a tulajdonságot a navigációs keret CanGoBack tulajdonságához kötheti.
BackRequested nem jön elő, ha
IsBackEnabledfalse.
A bal oldali navigációs ablakban található Vissza gomb
A Vissza gomb a felső navigációs ablakban
Kódrészlet
Ez a példa bemutatja, hogyan használhatja a NavigationView nézetet egy felső navigációs ablakkal nagy ablakméret esetén, és egy bal oldali navigációs ablakkal kis ablakméretek esetén. A VisualStateManager felső navigációs beállításainak eltávolításával csak a bal oldali navigációhoz igazítható.
A példa a navigációs adatok beállításának gyakori módját mutatja be, amely számos forgatókönyvhöz működik. Ebben a példában először (a NavigationViewItem címkéjében) tárolja annak az oldalnak a teljes típusnevét, amelyre navigálni szeretne. Az eseménykezelőben ezt az értéket egy Type(C#) vagy Windows::UI::Xaml::Interop::TypeName(C++/WinRT) objektummá alakíthatja, és ezzel navigálhat a céloldalra. Ez lehetővé teszi, hogy egységteszteket hozzon létre annak ellenőrzésére, hogy a címkéken belüli értékek érvényes típusúak-e. (Lásd még Értékek csomagolása és kicsomagolása IInspectable-re C++/WinRT használatával). Azt is bemutatja, hogyan valósítható meg a visszafelé navigáció a NavigationView vissza gombjával.
Ez a kód feltételezi, hogy az alkalmazás a következő nevű oldalakat tartalmazza, amelyekre navigálni kell: HomePage, AppsPage, GamesPage, MusicPage, MyContentPage és SettingsPage. Ezeknek az oldalaknak a kódja nem jelenik meg.
<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=""/>
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Tag="NavigationViewDemo.GamesPage" Content="Games">
<NavigationViewItem.Icon>
<FontIcon Glyph=""/>
</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());
}
}
}
}
}
}
}
Hierarchikus navigáció
Egyes alkalmazások összetettebb hierarchikus struktúrával rendelkezhetnek, amely nem csak a navigációs elemek egyszerű listáját igényli. Lehet, hogy szeretné használni a felső szintű navigációs elemeket az oldalak kategóriáinak megjelenítésére, az alárendelt elemek pedig a konkrét oldalak megjelenítésére. Akkor is hasznos, ha olyan hub stílusú oldalai vannak, amelyek csak más oldalakra hivatkoznak. Ilyen esetekben létre kell hoznia egy hierarchikus NavigationView-t.
A beágyazott navigációs elemek hierarchikus listájának megjelenítéséhez használja a MenuItems tulajdonságot vagy a MenuItemsSource tulajdonságot NavigationViewItem. Minden NavigationViewItem tartalmazhat más NavigationViewItems elemeket és rendszerező elemeket, például elemfejléceket és elválasztókat. Amikor a MenuItemsSource használata során hierarchikus listát akar megjeleníteni, állítsa a ItemTemplate-t NavigationViewItem-re, és kösse a MenuItemsSource tulajdonságot a hierarchia következő szintjéhez.
Bár a NavigationViewItem tetszőleges számú beágyazott szintet tartalmazhat, javasoljuk, hogy az alkalmazás navigációs hierarchiáját tartsa sekélyen. Úgy gondoljuk, hogy a két szint ideális a használhatóság és a megértés szempontjából.
A NavigationView a hierarchiát a , Topés az Left ablaktábla megjelenítési módjaiban LeftCompactjeleníti meg. Így néz ki egy kibontott részfa az egyes ablaktábla megjelenítési módjaiban:
Elemek hierarchiájának hozzáadása a korrektúra elemeihez
Ez a példa megmutatja, hogyan lehet deklarálni a hierarchikus alkalmazásnavigációt XAML-jelölésben.
<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>
Elemek hierarchiájának hozzáadása adatkötéssel
Menüelemek hierarchiájának hozzáadása a NavigationView-hoz
- a MenuItemsSource tulajdonság hierarchikus adatokhoz való kötése
- az elemsablon NavigationViewMenuItem definiálása, amelynek tartalma a menüelem címkéje, a MenuItemsSource tulajdonsága pedig a hierarchia következő szintjéhez van kötve
Ez a példa a kibontási és a összecsukási eseményeket is bemutatja. Ezeket az eseményeket egy gyermekekkel rendelkező menüelemhez emeljük.
<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);
}
}
Szelekció
Alapértelmezés szerint bármely elem tartalmazhat gyermeket, meghívható vagy kijelölhető.
Ha a navigációs lehetőségek hierarchikus fáját nyújtja a felhasználóknak, dönthet úgy, hogy a szülőelemek nem legyenek választhatók, például ha az alkalmazás nem rendelkezik céllappal, amely társítható a szülőelemhez. Ha a szülőelemek kiválaszthatók, javasoljuk a "Left-Expanded" vagy a felső ablaktábla megjelenítési mód használatát. A LeftCompact mód hatására a felhasználó a szülőelemre navigál, hogy minden alkalommal, amikor ezt a módot meghívják, megnyithassa a gyermek faágat.
A kijelölt elemek bal oldali módban a bal szélük mentén, felső módban pedig az alsó szélük mentén jelennek meg a kijelölésjelzők. Az alábbiakban a bal és felső módban látható navigációs nézetek láthatók, ahol egy szülőelem van kijelölve.
Előfordulhat, hogy a kijelölt elem nem mindig marad látható. Ha egy összecsukott/nem kibontott altartományban lévő gyermek van kijelölve, az első látható őse a kijelöltként jelenik meg. A kijelölésjelző visszatér a kijelölt elemre, ha/amikor az alfa-fa ki van nyitva.
A fenti képen például a felhasználó kijelölheti a Naptár elemet, majd összecsukhatja annak alstruktúráját. Ebben az esetben a kijelölési jelző az Account elem alatt jelenik meg, mivel az Account a Naptár első látható őse. A kijelölésjelző vissza fog lépni a Naptár elemhez, amikor a felhasználó ismét kibontja az alstruktúrát.
A teljes navigációs nézet legfeljebb egy kiválasztási jelzőt jelenít meg.
A NavigationViewItems nyílra kattintva a Felső és a Bal módban is kibonthatja vagy összecsukhatja a részhalmazt. Ha a NavigationViewItem máshová kattint vagy koppint
Ha meg szeretné akadályozni, hogy egy elem meghívásakor megjelenítse a kijelölési jelzőt, állítsa a SelectsOnInvoked tulajdonságát False értékre az alábbiak szerint:
<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);
}
...
Billentyűzetkezelés a hierarchikus navigációs nézetben
A felhasználók a fókuszt a NavigationView-ban mozgathatják a billentyűzettel. A nyílbillentyűk feltárják a "belső navigációt" a panelen, és követik a fa nézetben található kölcsönhatásokat. Navigáláskor a fő műveletek megváltoznak a NavigationView-ban vagy a felbukkanó menüjében, amelyek a HierarchicalNavigationView felső és bal-kompakt módjában jelennek meg. Az alábbiakban bemutatjuk azokat a konkrét műveleteket, amelyeket az egyes billentyűk végrehajthatnak egy hierarchikus navigációs nézetben:
| Key | Bal módban | Felső módban | Kibomló elemen |
|---|---|---|---|
| Up | Áthelyezi a fókuszt a fókuszban lévő elem fölötti elemre. | Nem csinál semmit. | Áthelyezi a fókuszt a fókuszban lévő elem fölötti elemre. |
| Lefelé | A fókuszt közvetlenül a fókuszban lévő elem alá helyezi.* | Nem csinál semmit. | A fókuszt közvetlenül a fókuszban lévő elem alá helyezi.* |
| Jobbra | Nem csinál semmit. | A fókuszt az aktuálisan fókuszban lévő elemtől közvetlenül jobbra lévő elemre helyezi. | Nem csinál semmit. |
| Balra | Nem csinál semmit. | A fókuszt az éppen fókuszban lévő elemtől balra lévő elemre helyezi. | Nem csinál semmit. |
| Szóköz/Enter | Ha az elem rendelkezik gyermekekkel, kibontja és összecsukja az elemet, miközben a fókusz nem változik. | Ha az elemnek vannak alárendelt elemei, megnyitja őket egy előugró menüben, és az első elemre helyezi a fókuszt. | Meghívja/kijelöli az elemet, és bezárja a úszó panelt. |
| Esc | Nem csinál semmit. | Nem csinál semmit. | Bezárja a úszó panelt. |
A szóköz vagy az Enter billentyű mindig meghív/jelöl ki egy elemet.
*Vegye figyelembe, hogy az elemeknek nem kell vizuálisan egymás mellett lenniük, a fókusz az ablaktábla listájának utolsó eleméről a beállítások elemre kerül.
Navigációs nézet testreszabása
Panelháttér hátterei
Alapértelmezés szerint a NavigationView ablaktábla a megjelenítési módtól függően eltérő hátteret használ:
- az ablaktábla egyszínű szürke szín, ha a bal oldalon kibontva, a tartalom mellett (Bal módban) van.
- a panel alkalmazáson belüli akrilt használ, amikor a tartalom tetején átfedésként van megnyitva (Top, Minimal vagy Compact módban).
Az ablaktábla hátterének módosításához felülbírálhatja a háttér megjelenítéséhez használt XAML-téma erőforrásait az egyes módokban. (Ezt a technikát egyetlen PaneBackground tulajdonság helyett használjuk a különböző megjelenítési módok különböző háttereinek támogatásához.)
Ez a táblázat azt mutatja, hogy az egyes megjelenítési módokban melyik témaerőforrást használja.
| Megjelenítési mód | Téma forrás |
|---|---|
| Balra | NavigációKibővítettPanelHáttér |
| LeftCompact LeftMinimal |
NavigationNézetAlapértelmezettPanelHáttér |
| Felső | NavigációNézetFentiPanelHáttér |
Ez a példa bemutatja, hogyan bírálhatja felül a téma erőforrásait az App.xaml. A témaerőforrások felülbírálásakor mindig meg kell adnia legalább az 'Alapértelmezett' és a 'HighContrast' erőforrásszótárakat, valamint igény szerint a 'Világos' vagy a 'Sötét' erőforrásszótárakat. További információért lásd a(z) ResourceDictionary.ThemeDictionaries.
Felső margó
Az ablak címsorát testre szabó alkalmazások gyakran kiterjesztik a tartalmat a címsor területére. Ha a NavigationView egyéni címsorral együtt van használatban, gondoskodnia kell arról, hogy az interaktív elemek (vissza gomb, panelváltó) ne legyenek átfedésben a címsor húzási területével.
A Címsor vezérlőelem használata (ajánlott)
Az ajánlott módszer egy Címsor vezérlőelem elhelyezése a NavigationView fölé, és a címsor fogja kezelni a vissza gombot és a panel váltógombját. Ezt a mintát használja a WinUI 3 Gallery alkalmazás.
Mivel a címsor vezérlőelem birtokolja a vissza gombot és az ablaktábla kapcsológombot, el kell rejtenie a NavigationView beépített verzióit a IsBackButtonVisible="Collapsed" és IsPaneToggleButtonVisible="False" beállításával. A címsáv ezután az eseménykezelők segítségével továbbítja ezeket az interakciókat a NavigationView-nak:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TitleBar x:Name="titleBar"
Title="My App"
IsPaneToggleButtonVisible="True"
PaneToggleRequested="TitleBar_PaneToggleRequested"
IsBackButtonVisible="{x:Bind contentFrame.CanGoBack, Mode=OneWay}"
BackRequested="TitleBar_BackRequested" />
<NavigationView x:Name="NavView"
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
DisplayModeChanged="NavView_DisplayModeChanged">
<Frame x:Name="contentFrame" />
</NavigationView>
</Grid>
A kód mögötti kódban bontsa ki a tartalmat a címsorba, rendelje hozzá a Címsor vezérlőelemet, és kapcsolja össze a Címsor gombokat a NavigationView-hoz csatlakozó eseménykezelőkkel:
this.ExtendsContentIntoTitleBar = true;
this.SetTitleBar(titleBar);
// Toggle the NavigationView pane open or closed when the TitleBar button is clicked.
private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
NavView.IsPaneOpen = !NavView.IsPaneOpen;
}
// Navigate back when the TitleBar back button is clicked.
private void TitleBar_BackRequested(TitleBar sender, object args)
{
if (contentFrame.CanGoBack)
{
contentFrame.GoBack();
}
}
// Hide the pane toggle button in the TitleBar when NavigationView switches to Top mode,
// since the pane isn't applicable in that layout.
private void NavView_DisplayModeChanged(NavigationView sender,
NavigationViewDisplayModeChangedEventArgs args)
{
titleBar.IsPaneToggleButtonVisible =
sender.PaneDisplayMode != NavigationViewPaneDisplayMode.Top;
}
Ezzel a mintával a Címsor vezérlőelem kezeli a húzási régiót és az interaktív gombokat, így a NavigationView-nak nincs szüksége automatikus kitöltésre.
Egyéni címsorelem használata
Ha a Címsor vezérlőelem helyett a Windows.SetTitleBar használatával határoz meg egyéni húzási régiót, a NavigationView automatikusan hozzáadja a kitöltést, hogy az interaktív elemek ne fedik át a címsor területét.
Ha inkább a háttér- és menügombokat szeretné közelebb húzni az alkalmazásablak tetejéhez, állítsa az IsTitleBarAutoPaddingEnabled beállítást a következőre false:
<NavigationView x:Name="NavView" IsTitleBarAutoPaddingEnabled="False">
A fejléc margójának módosítása
A NavigationView fejlécterületének helyzetének további módosításához felül kell bírálnia a NavigationViewHeaderMargin XAML témaerőforrást a laperőforrásokban:
<Page.Resources>
<Thickness x:Key="NavigationViewHeaderMargin">12,0</Thickness>
</Page.Resources>
Ez a téma erőforrás módosítja a NavigationView.Header körüli margót.
Kapcsolódó témakörök
Dolgozzon együtt velünk a GitHubon
A tartalom forrása a GitHubon található, ahol létrehozhat és áttekinthet problémákat és lekéréses kérelmeket is. További információért tekintse meg a közreműködői útmutatónkat.
Windows developer