EckradiusCorner radius

Ab Version 2.2 der Windows-UI-Bibliothek (WinUI) wurde das Standardformat für viele Steuerelemente dahin gehend aktualisiert, dass abgerundete Ecken verwendet werden.Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. Mit diesen neuen Formatvorlagen sollen Wärme und Vertrauen gefördert und die visuelle Verarbeitung der Benutzeroberfläche erleichtert werden.These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

Hier sehen Sie zwei Schaltflächen-Steuerelemente abgebildet, das eine ohne abgerundete Ecken und das zweite mit der neuen Formatvorlage mit abgerundeten Ecken.Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

Schaltflächen ohne und mit abgerundeten Ecken

Wenn Sie das NuGet-Paket für WinUI 2.2 oder höher installieren, werden sowohl für WinUI-Steuerelemente als auch für Plattformsteuerelemente neue Standardformatvorlagen installiert.When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. Diese Formatvorlagen werden automatisch verwendet, wenn Sie WinUI 2.2 in Ihrer App verwenden. Sie brauchen keine weiteren Maßnahmen zu ergreifen, um die neuen Formatvorlagen zu verwenden.These styles are used automatically when you use WinUI 2.2 in your app; there is no further action you need to take to use the new styles. Weiter unten in diesem Artikel erläutern wir jedoch die Anpassung der abgerundeten Ecken, sollte dies bei Ihnen erforderlich sein.However, later in this article we show how to customize the rounded corners if you need to do so.

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.Some controls are available both in the platform (Windows.UI.Xaml.Controls) and in WinUI (Microsoft.UI.Xaml.Controls); for example, TreeView or ColorPicker. Wenn Sie WinUI in Ihrer App verwenden, sollten Sie die WinUI-Version des Steuerelements verwenden.When you use WinUI in your app, you should use the WinUI version of the control. Das Abrunden der Ecken wird bei Verwendung mit WinUI in der Plattformversion möglicherweise inkonsistent übernommen.Corner rounding might be applied inconsistently in the platform version when used with WinUI.

Wichtige APIs: Control.CornerRadius-EigenschaftImportant APIs: Control.CornerRadius property

Standarddesigns für SteuerelementeDefault control designs

Die Formatvorlagen mit abgerundeten Ecken werden in drei Bereichen der Steuerelemente verwendet: bei rechteckigen Elementen, Flyoutelementen und Balkenelementen.There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

Ecken von rechteckigen BenutzeroberflächenelementenCorners of rectangle UI elements

  • Zu diesen Benutzeroberflächenelementen gehören einfache Steuerelemente, wie Schaltflächen, die Benutzer zu jeder Zeit auf dem Bildschirm sehen.These UI elements include basic controls like buttons that users see on screen at all times.
  • Der Standardwert des Radius, den wir für diese Benutzeroberflächenelemente verwenden, ist 2 px.The default radius value we use for these UI elements is 2px.

Hervorgehobene Schaltfläche mit abgerundeten Ecken

SteuerelementeControls

  • AutoSuggestBoxAutoSuggestBox
  • SchaltflächeButton
    • ContentDialog-SchaltflächenContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • TreeView-Kontrollkästchen für MehrfachauswahlTreeView multi-select check boxes
  • ComboBoxComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

Ecken der Flyout- und Overlay-Elemente der Benutzeroberfläche Corners of flyout and overlay UI elements

  • 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.These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • Der Standardwert des Radius, den wir für diese Benutzeroberflächenelemente verwenden, ist 4 px.The default radius value we use for these UI elements is 4px.

Flyoutbeispiel

SteuerelementeControls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • FlyoutFlyout
  • MenuFlyoutMenuFlyout
  • TabView-RegisterkartenTabView tabs
  • TeachingTipTeachingTip
  • ToolTipToolTip
  • Flyoutteil (in offenem Zustand)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • ComboBoxComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

BalkenelementeBar elements

  • Diese Elemente der Benutzeroberfläche sind wie Balken oder Linien geformt. Beispiel: ProgressBar.These UI elements are shaped like bars or lines; for example, ProgressBar.
  • Der Standardwert des Radius, den wir hier verwenden, ist 2 px.The default radius values we use here are 2px.

Statusleistenbeispiel

SteuerelementeControls

  • NavigationView-AuswahlindikatorNavigationView selection indicator
  • Pivot-AuswahlindikatorPivot selection indicator
  • ProgressBarProgressBar
  • ScrollBar (wenn IndicatorMode=TouchIndicator)ScrollBar (when IndicatorMode=TouchIndicator)
  • SliderSlider
    • ColorPicker-FarbschiebereglerColorPicker color slider
    • Schieberegler der MediaTransportControls-SuchleisteMediaTransportControls seek bar slider

AnpassungsoptionenCustomization options

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.The default corner radii values that we provide are not set in stone and there are a few ways you can easily modify the amount of rounding on the corners. Dies kann mithilfe zweier globaler Ressourcen oder über die CornerRadius-Eigenschaft direkt im Steuerelement erfolgen, abhängig vom gewünschten Detailgrad der Anpassung.This can be done through two global resources, or through the CornerRadius property directly on the control, depending on the level of customization granularity you want.

Wann Rundung vermieden werden sollWhen not to round

Es gibt Fälle, in denen die Ecken eines Steuerelements nicht gerundet werden sollten, und in diesen Fällen runden wir auch nicht.There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • Wenn sich mehrere Benutzeroberflächenelemente berühren, die innerhalb eines Containers bereitgestellt werden, wie etwa die zwei Teile eines SplitButton-Elements.When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. An der Berührungsfläche darf kein Leerraum vorhanden sein.There should be no space when they contact.

SplitButton

  • Wenn sich ein Steuerelement innerhalb eines anderen Containers befindet, wie die Leiste und die Schaltflächen eines ScrollBar-Elements, die Teil des ScrollBar-Containers sind, der seinerseits Bestandteil von ScrollViewer ist.When a control is housed inside another container, like a ScrollBar's bar and buttons that are part of the ScrollBar container, which is also part of a ScrollViewer.

Screenshot einer vertikalen Scrollleiste ohne abgerundete Ecken.

  • Wenn ein Flyout-Benutzeroberflächenelement mit einer Benutzeroberfläche verbunden ist, die das Flyout auf einer Seite aufruft.When a flyout UI element is connected to a UI that invokes the flyout on one side.

Screenshot eines Flyouts „AutoSuggest“ (automatisches Vorschlagen), bei dem einige Ecken nicht abgerundet sind.

Rechteck und Schatten für den TastaturfokusKeyboard focus rectangle and shadow

In unserem Standarddesign sind keine besonderen Maßnahmen zum Abrunden der Ecken des Rechtecks für den Tastaturfokus oder seines Schattens vorgesehen.Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. Die Verwendung eines größeren Werts für den Eckradius bewirkt keine Störung ihrer Funktion; es ist jedoch sinnvoll, sich dieses Details bewusst zu sein, um visuelle Fehler zu vermeiden, die mit einem größeren Wert einhergehen könnten.Using a higher corner radius value will not break them functionally; however, it is good to be aware of this to avoid unwanted visual glitches that could be introduced with a larger value.

Hier sehen Sie ein Beispiel dafür, wie ein größerer Eckradius ein unerwünschtes Aussehen des Schattens bewirken kann:Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

Abgerundete Ecken und LeistungRounded corners and performance

Das Rendern von abgerundeten Ecken nimmt naturgemäß mehr Grafikleistung als das Rendern von rechtwinkligen Ecken in Anspruch.Rendering rounded corners naturally uses more drawing power than rendering square corners. Bei der Auswahl der Standardwerte für den Eckradius haben wir nicht nur unsere Designrichtlinien in Betracht gezogen, sondern uns auch bemüht, sicherzustellen, dass unsere Standardsteuerelemente in Ihren Apps eine gute Leistung zeigen.When selecting the default corner radius values, we not only considered the design principles but we were also careful to ensure our default controls perform well when you use them in your apps.

Wenn Sie sich in diesem Kontext mit der Leistung von Apps befassen, sollten Sie in erster Linie die Ladezeit von Seiten und die Startzeit von Apps im Blick haben.When thinking about app performance in this context, you should primarily consider page load time and app launch time. Bedenken Sie, dass abgerundete Ecken bei größerer Fläche der Benutzeroberfläche eine größere Auswirkung auf die Leistung haben.Consider that rounded corners on a larger UI surface have a greater impact on performance. Vermeiden Sie die Darstellung abgerundeter Ecken auf der Benutzeroberfläche einer Vollbild-App.Avoid drawing rounded corners on a full screen app UI. Dieses Problem ist weniger bedeutsam, wenn die Benutzeroberfläche kurz und nach dem Laden der Seite angezeigt wird, wie bei ContentDialog.This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

Änderung von CornerRadius für eine gesamte Seite oder gesamte AppPage or app-wide CornerRadius changes

Es gibt zwei Ressourcen, die die Eckradien aller Steuerelemente steuern:There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius: der Standardwert ist 2 px.ControlCornerRadius - default is 2px.
  • OverlayCornerRadius: der Standardwert ist 4 px.OverlayCornerRadius - default is 4px.

Wenn Sie den Wert dieser Ressourcen in einem beliebigen Gültigkeitsbereich überschreiben, wirkt sich dies auf alle Steuerelemente in diesem Bereich aus.If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

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:This means if you want to change the roundness of all controls where roundness could be applied, you can define both resources at the app level with the new CornerRadius values like this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary>
                <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
                <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

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:Alternatively, if you want to change all controls' roundness within a particular scope, like at a page or container level, you can follow a similar pattern:

<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.The OverlayCornerRadius resource must be defined at the app level in order to take effect.

Dies hat den Grund, dass Popups und Flyouts dynamisch sind und im Stammelement der visuellen Struktur erstellt werden, sodass alle Ressourcen, die sie verwenden, ebenfalls hier definiert sein müssen.This is because popups and flyouts are dynamic and created at the root element in the Visual Tree, so any resources that they use must also be defined there. Andernfalls liegen sie außerhalb des Bereichs.Otherwise, they're out of scope.

Änderungen von CornerRadius auf SteuerelementebenePer-control CornerRadius changes

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.You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

StandardwertDefault Geänderte EigenschaftProperty modified
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

Nicht alle Steuerelemente reagieren mit geänderter Darstellung der Ecken auf die Änderung der CornerRadius-Eigenschaft.Not all controls' corners will respond to their CornerRadius property being modified. 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.To ensure that the control whose corners you wish to round will indeed respond to their CornerRadius property the way you expect, first check that the ControlCornerRadius or OverlayCornerRadius global resources affect the control in question. Ist dies nicht der Fall, überprüfen Sie, ob das Element, das Sie runden möchten, überhaupt Ecken aufweist.If they do not, check that the control you wish to round has corners at all. Viele unserer Steuerelemente rendern tatsächlich keine Kanten und können die CornerRadius-Eigenschaften daher nicht ordnungsgemäß nutzen.Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

Benutzerdefinierte Formatvorlagen basierend auf WinUIBasing custom styles on 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.You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. Um beispielsweise eine benutzerdefinierte Formatvorlage basierend auf dem WinUI-Schaltflächenstil zu erstellen, gehst du folgendermaßen vor:For example to create a custom button style based on WinUI button style, do the following:

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

Im Allgemeinen folgen die WinUI-Steuerelementstile einer konsistenten Namenskonvention: „DefaultXYZStyle“, wobei „XYZ“ für den Namen des Steuerelements steht.In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. Für eine vollständige Referenz kannst du die XAML-Dateien im WinUI-Repository durchsuchen.For full reference, you can browse the XAML files in the WinUI repository.