Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Materiais no Windows 11 são efeitos visuais aplicados a superfícies de UX que se assemelham a artefatos da vida real. Os materiais occluding são usados como camadas base embaixo de controles interativos de interface do usuário.
Mica é um material opaco que incorpora o tema do usuário e o papel de parede do desktop para criar uma aparência altamente personalizada. O Mica foi projetado levando o desempenho em consideração, pois captura apenas o papel de parede de fundo uma vez para criar a visualização dele. Portanto, nós o recomendamos para a camada de base do seu aplicativo, especialmente na área da barra de título.
Acrílico é um material semitransparente que replica o efeito do vidro gelado. É usado apenas para superfícies transitórias e de light-dismiss, como submenus e menus de contexto.
Este artigo descreve como aplicar Mica ou Acrílico como a camada base do aplicativo XAML SDK do Aplicativo Windows/WinUI 3.
Observação
- Para usar materiais de pano de fundo em um aplicativo Win32, confira Aplicar Mica em aplicativos do desktop Win32 para Windows 11.
- Para acrílico aplicado a elementos da interface do usuário (não ao plano de fundo da janela), consulte Acrílico no aplicativo.
Como usar um material de pano de fundo
![]()
O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.
Para aplicar material Mica ou Acrílico ao seu aplicativo, defina a SystemBackdrop propriedade para um XAML SystemBackdrop (normalmente, um dos planos de fundo integrados, MicaBackdrop ou DesktopAcrylicBackdrop).
Esses elementos têm uma SystemBackdrop propriedade:
- CommandBarFlyoutCommandBar.SystemBackdrop
- ContentIsland.SystemBackdrop
- DesktopWindowXamlSource.SystemBackdrop
- FlyoutBase.SystemBackdrop
- MenuFlyoutPresenter.SystemBackdrop
- Popup.SystemBackdrop
- Window.SystemBackdrop
Estes exemplos mostram como definir o cenário do sistema em XAML.
Mica
Mica é normalmente usado como pano de fundo para uma janela de aplicativo.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop/>
</Window.SystemBackdrop>
</Window>
Mica Alt
Para usar a variante Mica Alt, defina a Kind propriedade como BaseAlt.
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop Kind="BaseAlt"/>
</Window.SystemBackdrop>
</Window>
Acrylic
O Desktop Acrylic pode ser usado como pano de fundo para uma janela.
<Window
... >
<Window.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Window.SystemBackdrop>
</Window>
Acrílico em interface do usuário transitória
O acrílico também é comumente usado como pano de fundo para UI transitória, como uma janela flutuante. Você pode definir isso em XAML ou em código, já que os flyouts geralmente são criados dinamicamente.
<Flyout
... >
<Flyout.SystemBackdrop>
<DesktopAcrylicBackdrop/>
</Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
SystemBackdrop = new DesktopAcrylicBackdrop()
};
Aplicar um cenário de sistema a qualquer elemento XAML
-
APIs importantes:
SystemBackdropElement
![]()
O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.
A propriedade Window.SystemBackdrop aplica um material de plano de fundo em toda a janela. Se você precisar aplicar Mica ou Acrílico a uma região específica da sua interface do usuário — como um cartão, um painel ou qualquer área delimitada — use o controle SystemBackdropElement.
SystemBackdropElement é um controle XAML que renderiza um material de plano de fundo do sistema dentro de seus próprios limites. Você pode colocá-lo em qualquer lugar na árvore XAML, definir seu tamanho explicitamente ou deixá-lo preencher seu elemento pai e usar CornerRadius para aplicar cantos arredondados.
Usar SystemBackdropElement em XAML
Coloque SystemBackdropElement como um elemento irmão atrás de outro conteúdo ou como um elemento hospedeiro de plano de fundo dentro de um Grid. Defina a propriedade SystemBackdrop para o material desejado.
<Grid Width="300" Height="200">
<SystemBackdropElement CornerRadius="8">
<SystemBackdropElement.SystemBackdrop>
<DesktopAcrylicBackdrop />
</SystemBackdropElement.SystemBackdrop>
</SystemBackdropElement>
<!-- Content rendered on top of the backdrop -->
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Click Me" />
</Grid>
Alternar o material de fundo em tempo de execução
Você pode alterar a SystemBackdrop propriedade em runtime. Este exemplo permite que o usuário escolha entre o Acrílico e as duas variantes de Mica:
private void OnBackdropTypeChanged(string backdropType)
{
DynamicBackdropHost.SystemBackdrop = backdropType switch
{
"Mica" => new MicaBackdrop { Kind = MicaKind.Base },
"MicaAlt" => new MicaBackdrop { Kind = MicaKind.BaseAlt },
_ => new DesktopAcrylicBackdrop()
};
}
Observação
SystemBackdropElement aplica um pano de fundo do sistema a um elemento na página, não à janela. Para o plano de fundo no nível da janela, use a propriedade Window.SystemBackdrop como descrito anteriormente neste artigo. As duas abordagens são independentes e podem ser usadas juntas no mesmo aplicativo.
Avançado: como usar um controlador de cenário do sistema
Observação
A partir do SDK do Aplicativo Windows 1.3, você pode aplicar material definindo a propriedade Window.SystemBackdrop a um SystemBackdrop XAML, conforme descrito na seção anterior. Essa é a maneira recomendada de aplicar um material para a maioria dos aplicativos.
O restante deste artigo mostra como usar as APIs MicaController e DesktopAcrylicController, que oferecem mais controle sobre o comportamento do fundo.
Para usar um material de pano de fundo em seu aplicativo, você pode usar um dos controladores que implementa a interface ISystemBackdropController (MicaController ou DesktopAcrylicController). Essas classes gerenciam tanto a renderização do material de pano de fundo do sistema quanto a manipulação da política do sistema para o material.
Para usar o Mica como material de pano de fundo, crie um objeto MicaController. Para usar o Acrílico, crie um objeto DesktopAcrylicController. O código de configuração e suporte é o mesmo para cada tipo de material de pano de fundo do sistema.
Criar um MicaController
MicaController micaController;
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (MicaController.IsSupported())
{
...
micaController = new MicaController();
micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
...
}
}
Criar um DesktopAcrylicController
DesktopAcrylicController acrylicController;
bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
if (DesktopAcrylicController.IsSupported())
{
...
acrylicController = new DesktopAcrylicController();
acrylicController.Kind = useAcrylicThin
? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
...
}
}
O controlador reage aos temas Claro e Escuro do sistema por padrão. Para substituir esse comportamento, você pode definir as seguintes propriedades no controlador:
Observação
Depois de personalizar qualquer uma das quatro propriedades do controlador, ele não aplica mais valores padrão Claro ou Escuro quando o SystemBackdropConfiguration.Theme associado é alterado. Você precisa atualizar manualmente essas propriedades para corresponder ao novo tema.
Para usar o material de pano de fundo em seu aplicativo, os seguintes itens são necessários:
Suporte do sistema
O sistema em que o aplicativo é executado deve dar suporte ao material de pano de fundo. Chame o método MicaController.IsSupported ou DesktopAcrylicController.IsSupported para garantir que o material do cenário tenha suporte no runtime.
Um destino válido
Você deve fornecer um destino que implemente a interface ICompositionSupportsSystemBackdrop. Em um aplicativo XAML, a Janela XAML implementa essa interface e é usada como o destino do pano de fundo.
Um objeto SystemBackdropConfiguration
O SystemBackdropConfiguration fornece ao controlador de pano de fundo do sistema informações de política específicas do aplicativo para configurar corretamente o material de pano de fundo do sistema.
Um objeto DispatcherQueue
Você precisa de um Windows.System.DispatcherQueue disponível no thread XAML principal. Chamar
DispatcherQueue.EnsureSystemDispatcherQueue()para garantir que exista um.
Exemplo: usar o Mica com um controlador em um aplicativo WinUI
Este exemplo mostra como configurar o material do cenário Mica usando um controlador em um aplicativo XAML.
Dica
Além disso, consulte estes projetos de exemplo no GitHub:
C#: SampleSystemBackdropsWindow na Galeria WinUI.
C++/WinRT: Exemplo de Mica do SDK do Aplicativo Windows.
using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()
public sealed partial class MainWindow : Window
{
MicaController micaController;
SystemBackdropConfiguration configurationSource;
public MainWindow()
{
this.InitializeComponent();
TrySetMicaBackdrop(false);
}
bool TrySetMicaBackdrop(bool useMicaAlt)
{
if (MicaController.IsSupported())
{
DispatcherQueue.EnsureSystemDispatcherQueue();
// Hooking up the policy object.
configurationSource = new SystemBackdropConfiguration();
Activated += Window_Activated;
Closed += Window_Closed;
((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;
// Initial configuration state.
configurationSource.IsInputActive = true;
SetConfigurationSourceTheme();
micaController = new MicaController
{
Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
};
// Enable the system backdrop.
// Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
micaController.AddSystemBackdropTarget(
this.As<ICompositionSupportsSystemBackdrop>());
micaController.SetSystemBackdropConfiguration(configurationSource);
return true; // Succeeded.
}
return false; // Mica is not supported on this system.
}
private void Window_Activated(object sender, WindowActivatedEventArgs args)
{
if (configurationSource != null)
configurationSource.IsInputActive =
args.WindowActivationState != WindowActivationState.Deactivated;
}
private void Window_Closed(object sender, WindowEventArgs args)
{
// Make sure any Mica/Acrylic controller is disposed
// so it doesn't try to use this closed window.
micaController?.Dispose();
micaController = null;
Activated -= Window_Activated;
configurationSource = null;
}
private void Window_ThemeChanged(FrameworkElement sender, object args)
{
if (configurationSource != null)
SetConfigurationSourceTheme();
}
private void SetConfigurationSourceTheme()
{
if (configurationSource != null)
configurationSource.Theme =
(SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
}
}
Artigos relacionados
Windows developer