NavigationView
Eine Navigationsleiste mit Frame: links als stehende Leiste, schmal als Rail, als Drawer, oben oder unten; „Auto“ wählt nach der Breite. Ein Klick auf ein Ziel navigiert im Frame, der Zurück-Knopf und die Zurück-Taste gehen im Verlauf zurück, „Mail“ klappt Untereinträge auf.


KXAML
NavigationViewSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
xmlns:x="https://ui.kuonen.org/kxaml/x"
x:Class="Kuonen.UI.Galerie.Seiten.NavigationViewVorfuehrung"
Spacing="12">
<!-- Das Innere (Einträge, Kopplungen, Ereignisse) baut NavigationViewSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
<NavigationView x:Name="Ansicht" PaneDisplayMode="Left" Width="560" Height="320" />
</StackPanel>NavigationViewSeite.kxaml.cs
using Kuonen.UI;
namespace Kuonen.UI.Galerie.Seiten;
public sealed partial class NavigationViewSeite
{
protected override Func<UIElement>? KxamlFabrik => () => new NavigationViewVorfuehrung();
}
/// <summary>KXAML-Fassung der Seite NavigationView: das Gerüst steht in NavigationViewSeite.kxaml, das Innere füllt NavigationViewSeite.Fuelle.</summary>
public sealed partial class NavigationViewVorfuehrung
{
public NavigationViewVorfuehrung()
{
InitializeComponent();
NavigationViewSeite.Fuelle(Ansicht);
}
}C#
NavigationViewSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Eingabe;
using Kuonen.UI.Layout;
using Kuonen.UI.Media;
namespace Kuonen.UI.Galerie.Seiten;
/// <summary>Galerie-Seite: NavigationView (Plan 6f).</summary>
public sealed partial class NavigationViewSeite : GalerieSeite
{
public override string Titel => "NavigationView";
public override string Beschreibung =>
"Eine Navigationsleiste mit Frame: links als stehende Leiste, schmal als Rail, als Drawer, oben oder unten; „Auto“ wählt nach der Breite. Ein Klick auf ein Ziel navigiert im Frame, der Zurück-Knopf und die Zurück-Taste gehen im Verlauf zurück, „Mail“ klappt Untereinträge auf.";
public override string Stichworte => "Navigation Drawer Rail BottomNavigation Frame Page Verlauf Zurück TransitioningContentControl Übergang";
public override string Datei => nameof(NavigationViewSeite);
public override UIElement Baue()
{
var seite = new StackPanel { Spacing = 12 };
var ansicht = new NavigationView { PaneDisplayMode = NavigationViewPaneDisplayMode.Left, Width = 560, Height = 320 };
Fuelle(ansicht);
seite.Children.Add(ansicht);
return seite;
}
/// <summary>Ziele, Frame und Navigation (auch von der KXAML-Fassung benutzt).</summary>
public static void Fuelle(NavigationView ansicht)
{
var frame = new Frame();
ansicht.Content = frame;
ansicht.ZurueckFrame = frame;
var mail = new NavigationViewItem { Content = "Mail", Icon = "✉" };
mail.MenuItems.Add(new NavigationViewItem { Content = "Posteingang" });
mail.MenuItems.Add(new NavigationViewItem { Content = "Gesendet" });
ansicht.MenuItems.Add(new NavigationViewItem { Content = "Start", Icon = "⌂" });
ansicht.MenuItems.Add(mail);
ansicht.MenuItems.Add(new NavigationViewItem { Content = "Kalender", Icon = "▦", Badge = new InfoBadge { Value = 3 } });
ansicht.ItemInvoked += (_, e) =>
{
string titel = e.Item?.Content as string ?? "";
frame.Navigate(() => new Page { Title = titel, Content = new TextBlock { Text = $"Seite „{titel}“", Margin = new Thickness(16) } });
};
frame.Navigate(new Page { Title = "Start", Content = new TextBlock { Text = "Seite „Start“", Margin = new Thickness(16) } });
ansicht.SelectedItem = ansicht.MenuItems[0];
}
}