Zum Inhalt
Kuonen.UI

Ribbon

Menüband wie in Office: Reiter mit Gruppen, die bei wenig Breite von rechts schrumpfen (gross, mittel, klein, zugeklappt). Schnellzugriff, Anwendungsmenü, Doppelklick oder Strg+F1 minimiert, Alt zeigt Tastenhinweise, vereinfachte Darstellung in einer Zeile, kontextabhängige Reiter.

Vorführung: RibbonVorführung: Ribbon

KXAML

RibbonSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.RibbonVorfuehrung"
            Spacing="8">
  <!-- Reiter und Gruppen füllt RibbonSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <Ribbon x:Name="Band" />
  <StackPanel x:Name="Leiste" Orientation="Horizontal" Spacing="6" />
  <TextBlock x:Name="Meldung" />
</StackPanel>
RibbonSeite.kxaml.cs
using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class RibbonSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new RibbonVorfuehrung();
}

/// <summary>KXAML-Fassung der Seite Ribbon: das Gerüst steht in RibbonSeite.kxaml, das Innere füllt RibbonSeite.Fuelle.</summary>
public sealed partial class RibbonVorfuehrung
{
    public RibbonVorfuehrung()
    {
        InitializeComponent();
        RibbonSeite.Fuelle(Band, Leiste, Meldung);
    }
}

C#

RibbonSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Ribbon mit Reitern, Gruppen, Schnellzugriff, Anwendungsmenü und Kontextreiter (Plan 6j).</summary>
public sealed partial class RibbonSeite : GalerieSeite
{
    public override string Titel => "Ribbon";

    public override string Beschreibung =>
        "Menüband wie in Office: Reiter mit Gruppen, die bei wenig Breite von rechts schrumpfen (gross, mittel, klein, zugeklappt). Schnellzugriff, " +
        "Anwendungsmenü, Doppelklick oder Strg+F1 minimiert, Alt zeigt Tastenhinweise, vereinfachte Darstellung in einer Zeile, kontextabhängige Reiter.";

    public override string Stichworte => "Ribbon RibbonTab RibbonGroup RibbonButton Menüband Office Schnellzugriff KeyTip Anwendungsmenü Kontextreiter";

    public override string Datei => nameof(RibbonSeite);

    public override UIElement Baue()
    {
        var seite = new StackPanel { Spacing = 8 };
        var ribbon = new Ribbon();
        var leiste = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 6 };
        var meldung = new TextBlock();
        Fuelle(ribbon, leiste, meldung);
        seite.Children.Add(ribbon);
        seite.Children.Add(leiste);
        seite.Children.Add(meldung);
        return seite;
    }

    /// <summary>Reiter, Gruppen und Schalter (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(Ribbon ribbon, StackPanel leiste, TextBlock meldung)
    {
        RibbonButton Befehl(string text, string symbol, string? keyTip = null)
        {
            var b = new RibbonButton { Label = text, Icon = symbol, KeyTip = keyTip };
            b.Click += (_, _) => meldung.Text = "Befehl: " + text;
            return b;
        }
        RibbonGroup Gruppe(string titel, params UIElement[] eintraege)
        {
            var g = new RibbonGroup { Header = titel };
            foreach (var e in eintraege) g.Items.Add(e);
            return g;
        }
        var start = new RibbonTab { Header = "Start" };
        start.Groups.Add(Gruppe("Zwischenablage", Befehl("Einfügen", "📋", "V"), Befehl("Ausschneiden", "✂", "X"), Befehl("Kopieren", "⎘", "C")));
        start.Groups.Add(Gruppe("Schrift", Befehl("Fett", "B", "F"), Befehl("Kursiv", "I", "K"), Befehl("Unterstrichen", "U", "U"), new RibbonToggleButton { Label = "Hochgestellt", Icon = "x²" }));
        start.Groups.Add(Gruppe("Absatz", Befehl("Links", "⇤"), Befehl("Zentriert", "↔"), Befehl("Rechts", "⇥"), Befehl("Aufzählung", "•")));
        start.Groups.Add(Gruppe("Bearbeiten", Befehl("Suchen", "🔍", "S"), Befehl("Ersetzen", "⇄", "E")));
        var einfuegen = new RibbonTab { Header = "Einfügen" };
        einfuegen.Groups.Add(Gruppe("Tabellen", Befehl("Tabelle", "▦")));
        einfuegen.Groups.Add(Gruppe("Illustrationen", Befehl("Bild", "🖼"), Befehl("Formen", "◆"), Befehl("Diagramm", "📊")));
        var bild = new RibbonTab { Header = "Bildformat", IsContextual = true, IsVisible = false };
        bild.Groups.Add(Gruppe("Anpassen", Befehl("Zuschneiden", "⌗"), Befehl("Drehen", "⟳")));
        ribbon.Tabs.Add(start);
        ribbon.Tabs.Add(einfuegen);
        ribbon.Tabs.Add(bild);

        ribbon.QuickAccessItems.Add(Befehl("Speichern", "💾"));
        ribbon.QuickAccessItems.Add(Befehl("Rückgängig", "↶"));
        var menue = new RibbonApplicationMenu { Header = "Datei" };
        foreach (var e in new[] { "Neu", "Öffnen", "Speichern unter", "Drucken" })
        {
            var eintrag = new RibbonApplicationMenuItem { Header = e };
            eintrag.Click += (_, _) => meldung.Text = "Menü: " + e;
            menue.Items.Add(eintrag);
        }
        ribbon.ApplicationMenu = menue;

        void Schalter(string text, Action tun)
        {
            var k = new Button { Content = text };
            k.Click += (_, _) => tun();
            leiste.Children.Add(k);
        }
        Schalter("Bild gewählt", () => bild.IsVisible = !bild.IsVisible);
        Schalter("Vereinfacht", () => ribbon.Darstellung = ribbon.Darstellung == RibbonDarstellung.Klassisch ? RibbonDarstellung.Vereinfacht : RibbonDarstellung.Klassisch);
        Schalter("Minimieren", () => ribbon.IsMinimized = !ribbon.IsMinimized);
        meldung.Text = "Fenster schmaler ziehen: die Gruppen schrumpfen von rechts. Alt zeigt die Tastenhinweise.";
    }
}