Eckradius

Ab Version 2.2 von WinUI wurde das Standardformat für viele Steuerelemente dahin gehend aktualisiert, dass abgerundete Ecken verwendet werden. Mit diesen neuen Formatvorlagen sollen Wärme und Vertrauen gefördert und die visuelle Verarbeitung der Benutzeroberfläche erleichtert werden.

Hier sehen Sie zwei Schaltflächen-Steuerelemente abgebildet, das eine ohne abgerundete Ecken und das zweite mit der Formatvorlage mit abgerundeten Ecken.

WinUI bietet Ihnen die aktualisierten Formate für WinUI- und Plattformsteuerelemente. Weitere Informationen zum Anpassen abgerundeter Ecken finden Sie unter Anpassungsoptionen.

Wichtig

Einige Steuerelemente stehen sowohl für die Plattform (Windows.UI.Xaml.Controls) als auch für WinUI (Microsoft.UI.Xaml.Controls) zur Verfügung; beispielsweise TreeView oder ColorPicker. Wenn Sie WinUI in Ihrer App verwenden, sollten Sie die WinUI-Version des Steuerelements verwenden. Das Abrunden der Ecken wird bei Verwendung mit WinUI in der Plattformversion möglicherweise inkonsistent übernommen.

Wichtige APIs: Control.CornerRadius-Eigenschaft

Standarddesigns für Steuerelemente

Die Formatvorlagen mit abgerundeten Ecken werden in drei Bereichen der Steuerelemente verwendet: bei rechteckigen Elementen, Flyoutelementen und Balkenelementen.

Ecken von rechteckigen Benutzeroberflächenelementen

• Zu diesen Benutzeroberflächenelementen gehören einfache Steuerelemente, wie Schaltflächen, die Benutzer zu jeder Zeit auf dem Bildschirm sehen.
• Der Standardwert des Radius, den wir für diese Benutzeroberflächenelemente verwenden, ist 4 px.

Kontrollen

• AutoSuggestBox
• Schaltflächen
  • ContentDialog-Schaltflächen
• CalendarDatePicker
• Kontrollkästchen
  • Kontrollkästchen „TreeView“, „GridView“ und „ListView“
• Farbauswahl
• CommandBar
• ComboBox
• DatePicker
• DropDownButton
• Expander
• FlipView
• GridView und ListView
  • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView-Liste
• InfoBar
• Steuerelemente für Freihandeingaben
• Medienwiedergabe
• MenuBar
• NumberBox
• PasswordBox
• RichEditBox
• SplitButton
• TextBox
• TimePicker
• ToggleButton
• ToggleSplitButton

Ecken der Flyout- und Overlay-Elemente der Benutzeroberfläche

• Hierbei kann es sich um vorübergehende Benutzeroberflächenelemente handeln, die nur zeitweilig auf dem Bildschirm angezeigt werden, oder um Elemente, die andere UI-Elemente überlagern, wie TabView-Registerkarten.
• Der Standardwert des Radius, den wir für diese Benutzeroberflächenelemente verwenden, ist 8 px.

Kontrollen

• CommandBarFlyout
• ContentDialog
• Flyout
• MenuFlyout
• TabView-Registerkarten
• TeachingTip
• QuickInfo (verwendet 4 px-Radius aufgrund kleiner Größe)
• Flyoutteil (in offenem Zustand)
  • AutoSuggestBox
  • CalendarDatePicker
  • ComboBox
  • DatePicker
  • DropDownButton
  • Steuerelement für Freihandeingaben
  • MenuBar
  • NumberBox
  • SplitButton
  • TimePicker
  • ToggleSplitButton

Balkenelemente

• Diese Elemente der Benutzeroberfläche sind wie Balken oder Linien geformt. Beispiel: ProgressBar.
• Der Standardwert des Radius, den wir hier verwenden, ist 4 px.

Kontrollen

• NavigationView-Auswahlindikator
• ProgressBar
• ScrollBar
• Schieberegler
  • ColorPicker-Farbschieberegler
  • Schieberegler der MediaTransportControls-Suchleiste

Anpassungsoptionen

Die von uns angegebenen Standardwerte für den Eckradius sind nicht in Stein gemeißelt, und es gibt eine Reihe von Wegen, auf denen Sie den Betrag an Rundung an den Ecken komfortabel ändern können. Dies kann mithilfe zweier globaler Ressourcen oder über die CornerRadius-Eigenschaft direkt im Steuerelement erfolgen, abhängig vom gewünschten Detailgrad der Anpassung.

Wann Rundung vermieden werden soll

Es gibt Fälle, in denen die Ecken eines Steuerelements nicht gerundet werden sollten, und in diesen Fällen runden wir auch nicht.

• Wenn sich mehrere Benutzeroberflächenelemente berühren, die innerhalb eines Containers bereitgestellt werden, wie etwa die zwei Teile eines SplitButton-Elements. An der Berührungsfläche darf kein Leerraum vorhanden sein.

• Wenn ein Flyout-Benutzeroberflächenelement mit einer Benutzeroberfläche verbunden ist, die das Flyout auf einer Seite aufruft.

Änderung von CornerRadius für eine gesamte Seite oder gesamte App

Es gibt zwei Ressourcen, die die Eckradien aller Steuerelemente steuern:

• ControlCornerRadius: der Standardwert ist 4 px.
• OverlayCornerRadius – Der Standardwert ist 8 px.

Wenn Sie den Wert dieser Ressourcen in einem beliebigen Gültigkeitsbereich überschreiben, wirkt sich dies auf alle Steuerelemente in diesem Bereich aus.

Das bedeutet, wenn Sie die Rundung aller Steuerelemente ändern möchten, auf die Rundung angewendet werden kann, können Sie beide Ressourcen auf App-Ebene mit neuen Werten für CornerRadius definieren, wie hier dargestellt:

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

Wenn Sie die Rundung aller Steuerelemente in einem bestimmten Bereich ändern möchten, etwa auf Seiten- oder Containerebene, können Sie einem ähnlichen Muster folgen:

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

Hinweis

Die OverlayCornerRadius-Ressource muss auf App-Ebene definiert sein, um wirksam zu sein.

Dies liegt daran, dass Popups und Flyouts sich nicht in der visuellen Struktur der Seite befinden, sie werden dem Popupstamm hinzugefügt. Das Ressourcenauflösungssystem durchläuft die visuelle Popupstammstruktur nicht ordnungsgemäß in die visuelle Struktur der Seite.

Änderungen von CornerRadius auf Steuerelementebene

Sie können die CornerRadius-Eigenschaften von Steuerelementen direkt ändern, wenn Sie die Rundung nur für eine Anzahl ausgewählter Steuerelemente ändern möchten.

Standard	Geänderte Eigenschaft
<CheckBox Content="Checkbox"/>	<CheckBox Content="Checkbox" CornerRadius="5"/>

Nicht alle Steuerelemente reagieren mit geänderter Darstellung der Ecken auf die Änderung der CornerRadius-Eigenschaft. Um sicherzustellen, dass das Steuerelement, dessen Ecken Sie abrunden möchten, in der erwarteten Weise auf die geänderte CornerRadius-Eigenschaft reagiert, überprüfen Sie zuerst, ob sich die globalen Ressourcen ControlCornerRadius oder OverlayCornerRadius auf das fragliche Steuerelement auswirken. Ist dies nicht der Fall, überprüfen Sie, ob das Element, das Sie runden möchten, überhaupt Ecken aufweist. Viele unserer Steuerelemente rendern tatsächlich keine Kanten und können die CornerRadius-Eigenschaften daher nicht ordnungsgemäß nutzen.

Benutzerdefinierte Formatvorlagen basierend auf WinUI

Du kannst deine benutzerdefinierten Formatvorlagen basierend auf den WinUI-Formatvorlagen für abgerundete Ecken erstellen, indem du das richtige BasedOn-Attribut in deiner Formatvorlage angibst. Um beispielsweise eine benutzerdefinierte Formatvorlage basierend auf dem WinUI-Schaltflächenstil zu erstellen, gehst du folgendermaßen vor:

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

Im Allgemeinen folgen WinUI-Steuerelementformate einer konsistenten Namenskonvention: „DefaultXYZStyle“, wobei „XYZ“ der Name des Steuerelements ist. Für eine vollständige Referenz kannst du die XAML-Dateien im WinUI-Repository durchsuchen.