Raio de cantoCorner radius

Da versão 2.2 em diante da WinUI (Biblioteca de Interface do Usuário do Windows), o estilo padrão para muitos controles foi atualizado para usar cantos arredondados.Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. Esses novos estilos destinam-se a evocar familiaridade e confiança e tornam a interface do usuário mais fácil para os usuários processarem visualmente.These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

Aqui estão dois controles de botão, os primeiros sem cantos arredondados e o segundo usando o novo estilo de canto arredondado.Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

Botões com e sem cantos arredondados

Quando você instala o pacote NuGet para o WinUI 2.2 ou posterior, os novos estilos padrão são instalados para a plataforma e os controles da WinUI.When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. Esses estilos são usados automaticamente quando você usa o WinUI 2.2 em seu aplicativo. Você não precisa executar nenhuma ação adicional para usar os novos estilos.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. No entanto, posteriormente neste artigo, mostraremos como personalizar os cantos arredondados se você precisar fazer isso.However, later in this article we show how to customize the rounded corners if you need to do so.

Importante

Alguns controles estão disponíveis na plataforma (Windows.UI.XAML.Controls) e em WinUI (Microsoft.UI.XAML.Controls); por exemplo, TreeView ou 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. Ao usar o WinUI em seu aplicativo, você deve usar a versão WinUI do controle.When you use WinUI in your app, you should use the WinUI version of the control. O arredondamento de canto pode ser aplicado de forma inconsistente na versão da plataforma quando usado com WinUI.Corner rounding might be applied inconsistently in the platform version when used with WinUI.

APIs importantes: Propriedade Control.CornerRadiusImportant APIs: Control.CornerRadius property

Designs de controle padrãoDefault control designs

Há três áreas dos controles em que os estilos de canto arredondados são usados: elementos retangulares, elementos de submenu e elementos de barra.There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

Cantos dos elementos de interface do usuário do retânguloCorners of rectangle UI elements

  • Esses elementos de interface do usuário incluem controles básicos como botões que os usuários veem na tela sempre.These UI elements include basic controls like buttons that users see on screen at all times.
  • O valor do raio padrão que usamos para esses elementos de interface do usuário é 2px.The default radius value we use for these UI elements is 2px.

Botão com cantos arredondados realçados

ControlesControls

  • AutoSuggestBoxAutoSuggestBox
  • BotãoButton
    • Botões de ContentDialogContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • Caixas de seleção múltipla TreeViewTreeView multi-select check boxes
  • ComboBoxComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

Cantos dos elementos de interface do usuário de submenu e sobreposiçãoCorners of flyout and overlay UI elements

  • Eles podem ser elementos de interface do usuário transitórios que aparecem na tela temporariamente, como MenuFlyout, ou elementos que se sobrepõem a outra interface do usuário, como guias TabView.These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • O valor do raio padrão que usamos para esses elementos de interface do usuário é 4px.The default radius value we use for these UI elements is 4px.

Exemplo de submenu

ControlesControls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • SubmenuFlyout
  • MenuFlyoutMenuFlyout
  • Guias TabViewTabView tabs
  • TeachingTipTeachingTip
  • ToolTipToolTip
  • Parte do submenu (quando aberto)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • ComboBoxComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

Elementos da barraBar elements

  • Esses elementos da interface do usuário são formatados como barras ou linhas; por exemplo, ProgressBar.These UI elements are shaped like bars or lines; for example, ProgressBar.
  • Os valores de raio padrão que usamos aqui são 2px.The default radius values we use here are 2px.

Exemplo de barra de progresso

ControlesControls

  • Indicador de seleção de NavigationViewNavigationView selection indicator
  • Indicador de seleção dinâmicaPivot selection indicator
  • ProgressBarProgressBar
  • ScrollBar (quando IndicatorMode=TouchIndicator)ScrollBar (when IndicatorMode=TouchIndicator)
  • Controle deslizanteSlider
    • Controle deslizante de cor ColorPickerColorPicker color slider
    • Controle deslizante da barra de busca MediaTransportControlsMediaTransportControls seek bar slider

Opções de personalizaçãoCustomization options

Os valores de raios de canto padrão que fornecemos não são imutáveis e há algumas maneiras de modificar facilmente a quantidade de arredondamento nos cantos.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. Isso pode ser feito por meio de dois recursos globais ou por meio da propriedade CornerRadius diretamente no controle, dependendo do nível de granularidade de personalização desejado.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.

Quando não arredondarWhen not to round

Há casos em que o canto de um controle não deve ser arredondado, e não os arredondamos por padrão.There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • Quando vários elementos da interface do usuário alojados dentro de um contêiner tocam uns nos outros, como as duas partes de um SplitButton.When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. Não deve haver espaço quando eles entram em contato.There should be no space when they contact.

SplitButton

  • Quando um controle é armazenado dentro de outro contêiner, como a barra de um ScrollBar e botões que fazem parte do contêiner ScrollBar, que também faz parte de um ScrollViewer.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.

Captura de tela de uma barra de rolagem vertical sem cantos arredondados.

  • Quando um elemento de interface do usuário do submenu é conectado a uma interface do usuário que invoca o submenu de um lado.When a flyout UI element is connected to a UI that invokes the flyout on one side.

Captura de tela de um submenu Sugestão Automática em que alguns cantos não são arredondados.

Retângulo de foco de teclado e sombraKeyboard focus rectangle and shadow

Nosso design padrão não faz nenhum trabalho especial para arredondar os cantos do retângulo de foco do teclado ou da sombra de controle.Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. Usar um valor de raio de canto superior não os quebrará de forma funcional; no entanto, é bom estar ciente disso para evitar falhas visuais indesejadas que poderiam ser introduzidas com um valor maior.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.

Aqui está um exemplo de como um raio de canto maior pode fazer com que a sombra pareça indesejável:Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

Cantos arredondados e desempenhoRounded corners and performance

A renderização de cantos arredondados naturalmente usa mais potência de desenho do que renderizar cantos quadrados.Rendering rounded corners naturally uses more drawing power than rendering square corners. Ao selecionar os valores de raio de canto padrão, nós não apenas consideramos os princípios de design, mas também temos cuidado para garantir que nossos controles padrão tenham um bom desempenho ao usá-los em seus aplicativos.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.

Ao pensar sobre o desempenho do aplicativo neste contexto, você deve considerar principalmente o tempo de carregamento da página e o tempo de inicialização do aplicativo.When thinking about app performance in this context, you should primarily consider page load time and app launch time. Considere que os cantos arredondados em uma superfície de interface do usuário maior têm um impacto maior no desempenho.Consider that rounded corners on a larger UI surface have a greater impact on performance. Evite desenhar cantos arredondados em uma interface do usuário de aplicativo de tela inteira.Avoid drawing rounded corners on a full screen app UI. Isso será um problema menor se a interface do usuário for exibida brevemente e depois que a página for carregada, como um ContentDialog.This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

Alterações de CornerRadius em todo o aplicativo ou páginaPage or app-wide CornerRadius changes

Há dois recursos de aplicativo que controlam o raios de canto de todos os controles:There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius – o padrão é 2px.ControlCornerRadius - default is 2px.
  • OverlayCornerRadius – o padrão é 4px.OverlayCornerRadius - default is 4px.

Se você substituir o valor desses recursos em qualquer escopo, isso afetará todos os controles dentro desse escopo de forma adequada.If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

Isso significa que, se você quiser alterar o arredondamento de todos os controles em que o arredondamento pode ser aplicado, poderá definir os dois recursos no nível do aplicativo com os novos valores de CornerRadius como este: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>

Como alternativa, se você quiser alterar o arredondamento de todos os controles dentro de um escopo específico, como em um nível de página ou contêiner, poderá seguir um padrão semelhante: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>

Observação

O recurso de OverlayCornerRadius deve ser definido no nível do aplicativo para entrar em vigor.The OverlayCornerRadius resource must be defined at the app level in order to take effect.

Isso ocorre porque pop-ups e submenus são dinâmicos e criados no elemento raiz na árvore visual, assim, todos os recursos que eles usam também devem ser definidos lá.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. Caso contrário, eles estão fora do escopo.Otherwise, they're out of scope.

Alterações de CornerRadius por controlePer-control CornerRadius changes

Você pode modificar a propriedade CornerRadius nos controles diretamente se quiser alterar o arredondamento de apenas um número selecionado de controles.You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

PadrãoDefault Propriedade modificadaProperty modified
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

Nem todos os cantos dos controles responderão à sua propriedade CornerRadius que está sendo modificada.Not all controls' corners will respond to their CornerRadius property being modified. Para garantir que o controle cujos cantos você deseja arredondar realmente responda à sua propriedade de CornerRadius da maneira esperada, primeiro verifique se os recursos ControlCornerRadius ou OverlayCornerRadius globais afetam o controle em questão.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. Se não afetarem, verifique se o controle que você deseja arredondar tem cantos.If they do not, check that the control you wish to round has corners at all. Muitos de nossos controles não renderizam bordas reais e, portanto, não podem usar adequadamente a propriedade CornerRadius.Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

Basear estilos personalizados na WinUIBasing custom styles on WinUI

Você pode basear seus estilos personalizados nos estilos de cantos arredondados da WinUI ao especificar o atributo BasedOn correto neles.You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. Por exemplo, para criar um estilo de botão personalizado baseado no estilo de botão da WinUI, faça o seguinte:For example to create a custom button style based on WinUI button style, do the following:

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

Em geral, os estilos de controle da WinUI seguem uma convenção de nomenclatura consistente: "DefaultXYZStyle", em que "XYZ" é o nome do controle.In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. Para obter a referência completa, você pode procurar os arquivos XAML no repositório da WinUI.For full reference, you can browse the XAML files in the WinUI repository.