Zum Inhalt
Kuonen.UI

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.

Vorführung: NavigationViewVorführung: NavigationView

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];
    }
}