Menübandlayout und Größenänderungen
Das Menüband stellt mithilfe von adaptivem Layout und Größenanpassung das optimale Steuerelementlayout für unterschiedliche Fenstergrößen bereit. Das Menüband bietet Standardverhalten für die Größenanpassung, das sich in vielen häufigen Szenarien verwenden lässt. Das Microsoft-Menüband für WPF stellt außerdem einen Satz von Optionen bereit, um benutzerdefiniertes Größenanpassungsverhalten anzugeben.
Übersicht über die Größenanpassung des Menübands
Die Größe des Menüband-Steuerelements ändert sich dynamisch, wenn die Breite des Anwendungsfensters geändert wird. In den folgenden Abbildungen wird gezeigt, wie sich die Größe des Menübands ändert, wenn das Anwendungsfenster schmaler wird.
Wenn die freie Fläche im Fenster ausreicht, wird jede Gruppe auf der Registerkarte mit den größten angegebenen Abmessungen angezeigt.
.png "Menüband mit großen Steuerelementen")
Wenn das Fenster schmaler wird, werden die Gruppen Zwischenablage und Einfügen in der kleineren Größe angezeigt.
.png "Menüband mit mittleren Steuerelementen")
Wenn das Fenster noch schmaler wird, werden die Gruppen Zwischenablage, Einfügen und Absatz reduziert angezeigt. Wenn eine Gruppe auf eine Dropdownschaltfläche reduziert ist, wird nach dem Klicken auf die Dropdownschaltfläche die größte Variante angezeigt.
.png "Menüband mit reduzierten Gruppen")
Standardverhalten der Größenanpassung
In den Bereichen des Menübands wird standardmäßig Größenanpassung mit Sternvariable verwendet, um die größte Steuerelementvariante anzuzeigen, die auf der verfügbaren Fläche untergebracht werden kann. Wenn sich die Breite des Fensters ändert, wird die Größe der Steuerelementgruppen zyklisch von rechts nach links angepasst. In lokalisierten Kulturen, deren Layout von rechts nach links erfolgt, wird die Größe der Steuerelementgruppen zyklisch von links nach rechts angepasst.
Größenanpassung mit Sternvariable bezeichnet die gleichmäßige Aufteilung der verfügbaren Fläche auf die Elemente, die auf dieser Fläche untergebracht werden müssen. Der Name geht auf die XAML-Konvention zurück, diese Art der Größenanpassung mit einem Sternchen (*) anzugeben.
Wenn keine Größenbeschränkung vorhanden ist, werden alle Steuerelemente jeder Gruppe in der größten Variante angezeigt. Bei einer Verkleinerung des Fensters wird die kleinere Variante der Steuerelemente in jeder Gruppe angezeigt. Wenn der Platz nicht ausreicht, um jede Gruppe in der kleinsten Steuerelementvariante anzuzeigen, werden die Gruppen auf Dropdownschaltflächen reduziert.
Angeben von benutzerdefiniertem Größenanpassungsverhalten
Bei komplexen Menübandlayouts soll in der Regel genau angegeben werden, wie das Menüband an die Fenstergröße angepasst wird. Sie können Größenanpassungsverhalten auf Steuerelementebene, Gruppenebene oder Registerkartenebene angeben. Wenn keine Größenanpassungseinstellungen auf einer bestimmten Ebene angegeben sind, wird das Standardverhalten verwendet.
In der folgenden Tabelle wird beschrieben, wie Sie benutzerdefinierte Größenanpassungseinstellungen auf den verschiedenen Ebenen angeben.
Ebene |
Angeben von benutzerdefinierter Größenanpassung |
|---|---|
Legen Sie die ControlSizeDefinition-Eigenschaft fest, um anzugeben, in welcher Größe das Steuerelement angezeigt wird. |
|
Legen Sie die GroupSizeDefinitions-Eigenschaft fest, um verschiedene mögliche Kombinationen von Steuerelementgrößen anzugeben, die bei der Größenanpassung verwendet werden. |
|
Legen Sie die GroupSizeReductionOrder-Eigenschaft fest, um die Reihenfolge anzugeben, in der die Größenanpassung der Menübandgruppen erfolgt. |
Größenanpassung auf Steuerelementebene
In den Menübandrichtlinien sind drei Standardvarianten für die Größe von Menüband-Steuerelementen angegeben: groß, mittel und klein. Jedes Steuerelement verfügt über eine ControlSizeDefinition-Eigenschaft, die auf ein RibbonControlSizeDefinition-Objekt festgelegt ist. Das RibbonControlSizeDefinition-Objekt verfügt über eine ImageSize-Eigenschaft, die angibt, ob das große oder das kleine Bild angezeigt wird, und über eine IsLabelVisible-Eigenschaft, die angibt, ob die Bezeichnung für das Steuerelement angezeigt wird.
In der folgenden Tabelle sind die RibbonControlSizeDefinition-Eigenschafteneinstellungen für die drei Standardsteuerelementgrößen aufgeführt.
Größe |
Beschreibung |
||
|---|---|---|---|
Groß |
Enthält ein großes Bild und bis zu zwei Zeilen für eine Bezeichnung. |
true |
|
Mittel |
Enthält ein kleines Bild und eine Zeile für eine Bezeichnung. |
true |
|
Klein |
Enthält nur ein kleines Bild und keine Bezeichnung. |
false |
Im folgenden Beispiel werden drei RibbonControlSizeDefinition-Deklarationen gezeigt, die jeweils großen, mittleren und kleinen Steuerelementen entsprechen.
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
Steuerelementgruppen
Verwandte Menüband-Steuerelemente können in einer RibbonControlGroup gruppiert werden. Bei der Größenanpassung einer Steuerelementgruppe wird eine RibbonControlSizeDefinition auf alle Steuerelemente in der RibbonControlGroup angewendet. Die RibbonControlGroup wird in der RibbonGroup auf die gleiche Weise wie ein einziges Steuerelement angeordnet.
Größenanpassung auf Gruppenebene
Bei der Größenanpassung des Menübands wird die Größe der Gruppen auf einer Registerkarte mit der integrierten Logik des RibbonGroupItemsPanel, mit benutzerdefinierter Größenanpassungslogik oder einer Kombination der beiden Logiken angepasst. Standardmäßig ändert das RibbonGroupItemsPanel die Größe der Steuerelemente in der Gruppe so, dass die größte Steuerelementvariante angezeigt wird, die auf die verfügbare Fläche passt. Wenn entsprechend angegeben, erfolgt die Größenanpassung der Gruppen auf einer Registerkarte gemeinsam mit der GroupSizeReductionOrder-Eigenschaft, die die Reihenfolge für die Größenanpassung der Gruppen angibt, und der RibbonGroup.GroupSizeDefinitions-Eigenschaft, die mehrere mögliche Größenkonfigurationen für die Gruppe angibt.
Im folgenden Beispiel werden die GroupSizeDefinitions für die zuvor dargestellte Gruppe Zwischenablage gezeigt.
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>
Die GroupSizeDefinitions-Eigenschaft enthält eine Auflistung von RibbonGroupSizeDefinition-Objekten, von denen jedes eine mögliche Konfiguration für die Gruppe angibt. Bei der Größenanpassung des Menübands bestimmt das ItemsPanel, welche RibbonGroupSizeDefinition verwendet wird, um alle Steuerelemente auf der verfügbaren Fläche unterzubringen. Anschließend erfolgt die Größenanpassung der Steuerelemente, wie von den RibbonControlSizeDefinition-Objekten in der ausgewählten RibbonGroupSizeDefinition angegeben. Die Definitionen der Steuerelementgröße werden in sequenzieller Reihenfolge auf die Steuerelemente in der Gruppe angewendet.
Gemäß den Menübandrichtlinien müssen für jede Gruppe mindestens zwei vordefinierte Größenvarianten vorhanden sein: eine große Variante und eine reduzierte Variante. Wenn die Steuerelemente nicht mehr in der verfügbaren Größe in der RibbonGroup untergebracht werden können, wird die Gruppe auf eine Dropdownschaltfläche reduziert. Wenn eine Gruppe reduziert ist, wird nach dem Klicken auf die Dropdownschaltfläche die größte angegebene Variante angezeigt. In der dritten Abbildung weiter oben ist die Gruppe Zwischenablage reduziert, und im Dropdownbereich wird die größte Variante angezeigt.
Sie legen die IsCollapsed-Eigenschaft auf true fest, um anzugeben, dass eine Gruppe auf eine Dropdownschaltfläche reduziert werden soll. Da beim Öffnen einer reduzierten Gruppe immer die größte Variante angezeigt wird, geben Sie keine Auflistung von RibbonControlSizeDefinition-Objekten an, wenn Sie die IsCollapsed-Eigenschaft festlegen. Wenn eine RibbonControlSizeDefinition-Auflistung angegeben ist, wird die IsCollapsed-Eigenschaft ignoriert.
Die GroupSizeDefinitions aus dem Beispiel werden in den oben gezeigten Abbildungen veranschaulicht.
In der ersten oben gezeigten Abbildung wird die erste RibbonGroupSizeDefinition auf die Gruppe Zwischenablage angewendet. Die drei RibbonControlSizeDefinition-Objekte werden nacheinander auf die drei Schaltflächen angewendet. Sie geben als Schaltflächengröße groß, mittel und mittel an.
In der zweiten Abbildung ist im Fenster eine geringere Fläche verfügbar, daher wird auf die Gruppe Zwischenablage die zweite RibbonGroupSizeDefinition angewendet. Die RibbonControlSizeDefinition-Objekte geben als Schaltflächengröße groß, klein und klein an.
In der dritten Abbildung wird die letzte RibbonGroupSizeDefinition angewendet. Statt die Größe der Steuerelemente anzugeben, legt die Definition die Gruppe als reduziert fest.
Größenanpassung auf Gruppenebene mit benutzerdefiniertem ItemsPanel
Wenn Sie das gewünschte Layout weder mit der Standardgrößenanpassung noch mit GroupSizeDefinitions erzeugen können, können Sie das Standard-ItemsPanel durch einen benutzerdefinierten Bereich ersetzen. Beispielsweise enthält die oben dargestellte Gruppe Schriftart mehrere Gruppen von Schaltflächen, die jeweils in einer RibbonControlGroup enthalten sind. Wie bereits erwähnt, wird eine RibbonControlGroup auf die gleiche Weise wie ein einzelnes Steuerelement in einer RibbonGroup angeordnet. Daher erfolgt die Größenanpassung der Gruppe Schriftart mit dem Standardbereich nicht auf sinnvolle Weise. Um das dargestellte Layout zu erzeugen, wird das Standard-RibbonGroupItemsPanel durch ein Standard-WrapPanel ersetzt.
Im folgenden Beispiel wird gezeigt, wie Sie ein WrapPanel als ItemsPanel der RibbonGroup verwenden.
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
<ribbon:RibbonGroup.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" MaxWidth="300" />
</ItemsPanelTemplate>
</ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>
Größenanpassung auf Registerkartenebene
Für die Größenanpassung auf Registerkartenebene legen Sie die RibbonTab.GroupSizeReductionOrder fest, um die Reihenfolge anzugeben, in der die Größe von Gruppen geändert wird. Um eine GroupSizeReductionOrder anzugeben, muss für jede RibbonGroup die Name-Eigenschaft auf einen eindeutigen Wert festgelegt sein. Sie geben die Reduzierungsreihenfolge an, indem Sie der Liste der Reduzierungsreihenfolge die Gruppennamen hinzufügen.
Im folgenden Beispiel wird gezeigt, wie Sie die GroupSizeReductionOrder für die in den vorherigen Abbildungen dargestellte Registerkarte Start festlegen.
<ribbon:RibbonTab Header="Home"
GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
<ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
...
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
In der ersten Abbildung ist das Menüband groß genug, um jede Gruppe in der größten Variante anzuzeigen. In der zweiten Abbildung ist das Fenster kleiner, und die ersten beiden in der GroupSizeReductionOrder angegebenen Gruppen, Zwischenablage und Einfügen, werden in der kleineren Variante angezeigt. In der dritten Abbildung wurden die Gruppen Einfügen, Absatz und Zwischenablage reduziert.
Das Standard-ItemsPanel für einen RibbonTab ist ein RibbonGroupsPanel. Mit diesem Bereich werden anhand der Standardreduzierungsreihenfolge oder der benutzerdefinierten Reduzierungsreihenfolge die verfügbare Größe und das Layout für die Gruppen auf der Registerkarte bestimmt.
Wenn die GroupSizeReductionOrder-Auflistung einen Namen enthält, der keiner der Gruppen auf der Registerkarte entspricht, wird dieser Name ignoriert. Wenn die Anzahl der Größenvarianten in einer Gruppe geringer ist als die Vorkommen eines einzelnen Gruppennamens in der Auflistung, wird die Gruppe in der kleinsten Variante angezeigt, und ihre zusätzlichen Vorkommen in der Auflistung werden ignoriert. Wenn eine der Gruppen nicht in der GroupSizeReductionOrder-Auflistung vorhanden ist, werden die Gruppen nacheinander in zyklischer Reihenfolge von rechts nach links reduziert, nachdem alle benutzerdefinierten Reduzierungen ausgeführt wurden. Das bedeutet, dass jede der Gruppen nacheinander in zyklischer Reihenfolge von rechts nach links reduziert wird, sofern keine GroupSizeReductionOrder angegeben ist. In Kulturen mit Layout von rechts nach links erfolgt die Größenanpassung in umgekehrter Richtung.