Raio de canto

A partir da versão 2.2 do WinUI, o estilo padrão para muitos controles foi atualizado para usar cantos arredondados. Esses novos estilos destinam-se a evocar calor e confiança e tornar a interface do usuário mais fácil para os usuários processarem visualmente.

Aqui estão dois controles de Botão, o primeiro sem cantos arredondados e o segundo usando um estilo de canto arredondado.

Botões

O WinUI fornece os estilos atualizados tanto para controles do WinUI quanto para controles da plataforma. Consulte opções de Personalizaçãopara obter detalhes sobre como personalizar cantos arredondados.

Importante

Alguns controles estão disponíveis tanto na plataforma (Windows.UI.Xaml.Controls) quanto no WinUI (Microsoft.UI.Xaml.Controls); por exemplo, TreeView ou ColorPicker. Ao usar o WinUI em seu aplicativo, você deve usar a versão WinUI do controle. O arredondamento de canto pode ser aplicado inconsistentemente na versão da plataforma quando usado com WinUI.

APIs importantes: propriedade Control.CornerRadius

Designs de controle padrão

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.

Cantos dos elementos retangulares da interface do usuário

• Esses elementos de interface do usuário incluem controles básicos, como botões que os usuários veem na tela o tempo todo.
• O valor de raio padrão que usamos para esses elementos de interface do usuário é 4px.

Botão

Controles

• Caixa de Sugestões Automáticas
• Botões
  • Botões do ContentDialog
• Selecionador de Data do Calendário
• Caixa de Seleção
  • Caixas de seleção de múltiplos TreeView, GridView e ListView
• Seletor de cores
• Barra de Comando
• ComboBox
• Seletor de data
• Botão suspenso
• Expansor
• FlipView
• GridView e ListView
  • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, lista TreeView
• Barra de Informações
• Controles de tinta
• Reprodução de mídia
• Barra de Menus
• Caixa de Números
• Caixa de senha
• Caixa de edição rica
• SplitButton
• Caixa de Texto
• TimePicker
• Botão de alternância
• Botão de Divisão Alternável

Cantos de elementos de interface do usuário de menus desdobráveis e de sobreposição

• Eles podem ser elementos transitórios da interface do usuário que aparecem na tela temporariamente, como MenuFlyout ou elementos que sobrepõem outra interface do usuário, como guias TabView.
• O valor de raio padrão que usamos para esses elementos de interface do usuário é 8px.

exemplo de submenu

Controles

• CommandBarFlyout
• Caixa de diálogo de conteúdo
• Menu expansível
• MenuFlyout
• Abas do TabView
• Dica de Ensino
• ToolTip (usa raio de 4px devido ao tamanho pequeno)
• Parte do menu suspenso (quando aberto)
  • Caixa de Sugestões Automáticas
  • Selecionador de Data do Calendário
  • ComboBox
  • Seletor de data
  • Botão suspenso
  • Controle de escrita à tinta
  • Barra de Menus
  • Caixa de Números
  • SplitButton
  • TimePicker
  • Botão de Divisão Alternável

Elementos de barra

• Esses elementos de interface do usuário têm a forma de barras ou linhas; por exemplo, ProgressBar.
• Os valores de raio padrão que usamos aqui são 4px.

exemplo da barra de progresso

Controles

• Indicador de seleção do NavigationView
• Barra de Progresso
• Barra de Rolagem
• Controle deslizante
  • Controle deslizante de cor do ColorPicker
  • MediaTransportControls busca controle deslizante de barra

Opções de personalização

Os valores padrão de raios de canto que fornecemos não são fixos e há algumas maneiras de ajustar facilmente a quantidade de arredondamento dos cantos. 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.

Quando não arredondar

Existem situações em que o canto de um controle não deve ser arredondado, e por padrão não os arredondamos.

• Quando vários elementos de interface do usuário que estão alojados dentro de um contêiner se tocam, como as duas partes de um SplitButton. Não deve haver espaço quando eles entrarem em contato.

• Quando um elemento de interface do usuário de submenu é conectado a uma interface do usuário que invoca o submenu de um lado.

Alterações de CornerRadius em toda a página ou em todo o aplicativo

Há dois recursos de aplicativo que controlam o raio de canto de todos os controles:

• ControlCornerRadius – o padrão é 4px.
• OverlayCornerRadius - o padrão é 8px.

Se você substituir o valor desses recursos em qualquer escopo, isso afetará todos os controles dentro desse escopo.

Isso significa que, se você quiser alterar o arredondamento de todos os controles em que o arredondamento possa ser aplicado, poderá definir os recursos no nível do aplicativo com os novos valores de CornerRadius da seguinte forma:

<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>

Como alternativa, se você quiser alterar o arredondamento de todos os controles em um determinado escopo, como no nível de uma página ou de um contêiner, poderá seguir um procedimento semelhante.

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

Observação

O recurso OverlayCornerRadius deve ser definido no nível do aplicativo para entrar em vigor.

Isso ocorre porque pop-ups e menus suspensos não estão na árvore visual da página, eles são adicionados à Popup Root. O sistema de resolução de recursos não percorre corretamente a árvore visual da Popup Root até a árvore visual da Página.

Alterações de CornerRadius por controle

Você pode modificar diretamente a propriedade CornerRadius nos controles se quiser alterar o arredondamento de apenas um número selecionado de controles.

Padrão	Propriedade modificada
<CheckBox Content="Checkbox"/>	<CheckBox Content="Checkbox" CornerRadius="5"/>

Nem todos os cantos dos controles responderão quando a propriedade CornerRadius for modificada. Para garantir que o controle cujos cantos você deseja arredondar responderá de fato à propriedade CornerRadius como você espera, primeiro verifique se os recursos globais ControlCornerRadius ou OverlayCornerRadius afetam o controle mencionado. Caso contrário, verifique se o controle que você deseja arredondar tem de fato cantos. Muitos de nossos controles não renderizam bordas reais e, portanto, não podem fazer uso adequado da propriedade CornerRadius.

Baseando estilos personalizados em WinUI

Você pode basear seus estilos personalizados nos estilos de canto arredondados do WinUI especificando o atributo BasedOn correto em seu estilo. Por exemplo, para criar um estilo de botão personalizado com base no estilo de botão WinUI, faça o seguinte:

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

Em geral, os estilos de controle WinUI seguem uma convenção de nomenclatura consistente: "DefaultXYZStyle" em que "XYZ" é o nome do controle. Para obter referência completa, você pode procurar os arquivos XAML no repositório WinUI.