Material de Mica
O Mica é um material que incorpora o tema e o papel de parede do desktop para pintar a tela de fundo de janelas de longa duração, como aplicativos e configurações. Você pode aplicar o Mica ao seu pano de fundo do aplicativo para encantar os usuários e criar hierarquia visual, auxiliando na produtividade ao aumentar a clareza de qual janela está em foco. O Mica foi projetado especificamente para o desempenho do aplicativo, pois só faz a amostra do papel de parede da área de trabalho uma vez para criar sua visualização. O Mica está disponível para aplicativos UWP que usam WinUI 2 e aplicativos que usam SDK do Aplicativo Windows 1.1 ou posterior, enquanto são executados no Windows 11 versão 22000 ou posterior.
Mica em tema claro
Mica em tema escuro
Mica Alt é uma variante do Mica, com uma matiz mais forte da cor da tela de fundo do desktop do usuário. Você pode aplicar o Mica Alt ao pano de fundo do aplicativo para fornecer uma hierarquia visual mais profunda do que a Mica, especialmente ao criar um aplicativo com uma barra de título com guias. O Mica Alt está disponível para aplicativos que usam o Windows App SDK 1.1 ou posterior, durante a execução no Windows 11 versão 22000 ou posterior.
Essas imagens mostram a diferença entre Mica e Mica Alt em uma barra de título com guias. A primeira imagem usa o Mica e a segunda imagem usa o Mica Alt.
Quando usar o Mica ou o Mica Alt
O Mica e o Mica Alt são materiais que aparecem no pano de fundo do aplicativo, por trás de todos os outros conteúdo. Cada material é opaco e incorpora o tema do usuário e o papel de parede do desktop para criar sua aparência altamente personalizada. À medida que o usuário move a janela pela tela, o material de Mica se adapta dinamicamente para criar uma visualização avançada usando o papel de parede sob o aplicativo. Além disso, o material ajuda os usuários a se concentrarem na tarefa atual, recuando para uma cor neutra quando o aplicativo está inativo.
Recomendamos que você aplique o Mica ou o Mica Alt como a camada base do seu aplicativo e priorize a visibilidade na área da barra de título. Para obter diretrizes de camadas mais específicas, confira Camadas e elevação e Camadas de aplicativo com o Mica.
Usabilidade e adaptabilidade
Os materiais Mica adaptam automaticamente sua aparência para uma ampla variedade de dispositivos e contextos. Eles são projetados para desempenho, pois capturam o papel de parede da tela de fundo apenas uma vez para criar suas visualizações.
No modo alto contraste, os usuários continuam vendo a cor familiar da tela de fundo de sua escolha no lugar do Mica ou Mica Alt. Além disso, os materiais Mica aparecerão como uma cor de fallback sólida (SolidBackgroundFillColorBase para Mica, SolidBackgroundFillColorBaseAlt para Mica Alt) quando:
- O usuário desativa a transparência em Configurações > Personalização > Cor.
- O modo Economia de Bateria está ativado.
- O aplicativo é executado em hardware de baixa gama.
- Uma janela do aplicativo é desativada no desktop.
- O aplicativo do Windows está em execução no Xbox ou HoloLens.
- A versão do Windows está abaixo de 22000.
Camadas de aplicativo com o Mica
Camada de conteúdo padrão
Camada de conteúdo padrão
O Mica é ideal como uma camada de base na hierarquia do aplicativo devido a seus estados inativo e ativo e personalização sutil. Para seguir o sistema de camadas e elevação de duas camadas, recomendamos que você aplique o Mica como a camada base do aplicativo e adicione uma camada de conteúdo adicional que fica sobre a camada base. A camada de conteúdo deve pegar o material por trás dele, Mica, usando LayerFillColorDefaultBrush, uma cor sólida de baixa opacidade, como sua tela de fundo. Nossos padrões de camada de conteúdo recomendados são:
- Padrão: uma tela de fundo contígua para áreas grandes que precisam de uma diferenciação hierárquica distinta da camada base. O LayerFillColorDefaultBrush deve ser aplicado às telas de fundo do contêiner das superfícies do aplicativo WinUI (por exemplo, Grades, StackPanels, Quadros etc.).
- Padrão de cartão: cartões segmentados para aplicativos projetados com vários componentes de interface do usuário seccionados e descontinuados. Para obter a definição da interface do usuário do cartão usando LayerFillColorDefaultBrush, confira Diretrizes sobre camadas e elevação.
Para dar uma aparência perfeita à janela do aplicativo, o Mica deverá estar visível na barra de título se você optar por aplicar o material ao seu aplicativo. Você pode mostrar o Mica na barra de título estendendo seu aplicativo para a área não cliente e criando uma barra de título personalizada transparente. Para saber mais, confira a Barra de título.
Os exemplos a seguir mostram implementações comuns da estratégia de camadas com NavigationView, em que o Mica está visível na área da barra de título.
- Padrão no NavigationView esquerdo.
- Padrão no NavigationView na parte superior.
- Padrão de cartão no NavigationView esquerdo.
Padrão no NavigationView esquerdo
Por padrão, NavigationView no modo esquerdo inclui a camada de conteúdo em sua área de conteúdo. Este exemplo estende o Mica para a área da barra de título e cria uma barra de título personalizada.
Padrão no NavigationView na parte superior
Por padrão, NavigationView no modo parte superior inclui a camada de conteúdo em sua área de conteúdo. Este exemplo estende o Mica para a área da barra de título e cria uma barra de título personalizada.
Padrão de cartão no NavigationView esquerdo
Para seguir o padrão cartão usando um NavigationView, você precisará remover a camada de conteúdo padrão substituindo os recursos de tema de tela de fundo e borda. Em seguida, você pode criar os cartões na área de conteúdo do controle. Este exemplo cria vários cartões, estende o Mica para a área da barra de título e cria uma barra de título personalizada. Para obter mais informações sobre a interface do usuário do cartão, confira diretrizes sobre Camadas e elevação.
Camadas de aplicativo com o Mica Alt
O Mica Alt é uma alternativa ao Mica como uma camada de base na hierarquia do aplicativo com os mesmos recursos, como estados inativos e ativos e personalização sutil. Incentivamos você a aplicar o Mica Alt como a camada base do seu aplicativo ao exigir contraste entre os elementos da barra de título e as áreas de comando do seu aplicativo (por exemplo, navegação, menus).
Um cenário comum para usar o Mica Alt é quando você está criando um aplicativo com uma barra de título com guias. Para seguir as diretrizesCamadas e elevação , recomendamos que você aplique o Mica Alt como a camada base do seu aplicativo, adicione uma camada de comando que fica na parte superior da camada base e adicione uma camada de conteúdo adicional que fica sobre a camada de comando. A camada de comando deve pegar o material por trás dele, Mica Alt, usando o LayerOnMicaBaseAltFillColorDefaultBrush, uma cor sólida de baixa opacidade, como sua tela de fundo. A camada de conteúdo deve pegar as camadas abaixo dela, usando o LayerFillColorDefaultBrush, outra cor sólida de baixa opacidade. O sistema de camadas é o seguinte:
- Mica Alt
- Camada de comando: requer diferenciação hierárquica distinta da camada base. O
LayerOnMicaBaseAltFillColorDefaultBrushdeve ser aplicado às áreas de comando das superfícies do aplicativo WinUI (por exemplo, barra de menus, estrutura de navegação etc.) - Camada de conteúdo: uma tela de fundo contígua para áreas grandes que precisam de uma diferenciação hierárquica distinta da camada base. O
LayerFillColorDefaultBrushdeve ser aplicado às telas de fundo do contêiner das superfícies do aplicativo WinUI (por exemplo, Grades, StackPanels, Quadros etc.).
Para dar uma aparência perfeita à janela do aplicativo, o Mica Alt deverá estar visível na barra de título se você optar por aplicar o material ao seu aplicativo. Você pode mostrar o Mica Alt na barra de título estendendo seu aplicativo para a área não cliente e criando uma barra de título personalizada transparente.
Recomendações
- Aplique o material de pano de fundo à camada mais ao fundo (substituindo a
ApplicationPageBackgroundThemeBrushse presente). - Defina todas as camadas de plano de fundo em que você deseja ver Mica como transparentes para que o Mica seja exibido.
- Não aplique material de pano de fundo mais de uma vez em um aplicativo.
- Não aplique material de pano de fundo a um elemento de interface do usuário. O material de pano de fundo não aparecerá no próprio elemento. Ele só aparecerá se todas as camadas entre o elemento de interface do usuário e a janela forem definidas como transparentes.
Como usar o Mica
Você pode usar o Mica em aplicativos UWP que usam WinUI 2 ou em aplicativos que usam o SDK do Aplicativo Windows 1.1 ou posterior. Você pode usar o Mica Alt em aplicativos que usam o SDK do Aplicativo Windows 1.1 ou posterior.
Usar o Mica com o SDK do Aplicativo Windows
Para usar o Mica em um aplicativo XAML que usa o SDK do Aplicativo Windows e o WinUI 3, defina a propriedade Window.SystemBackdrop como MicaBackdrop.
Esses exemplos mostram como fazer isso no XAML e no código.
Mica
<Window
... >
<Window.SystemBackdrop>
<MicaBackdrop Kind="BaseAlt"/>
</Window.SystemBackdrop>
</Window>
public MainWindow()
{
this.InitializeComponent();
SystemBackdrop = new MicaBackdrop()
{ Kind = MicaKind.BaseAlt };
}
Para obter mais informações sobre como usar as APIs de Composição MicaController, confira Aplicar materiais Mica ou Acrílico em aplicativos do desktop para Windows 11.
Para usar materiais de pano de fundo em um aplicativo Win32, confira Aplicar Mica em aplicativos do desktop Win32 para Windows 11.
Usar o Mica com WinUI 2 para UWP
APIs importantes: classe BackdropMaterial
Você pode aplicar o Mica em um aplicativo UWP com a classe BackdropMaterial. Recomendamos que você defina a propriedade anexada BackdropMaterial em um elemento XAML que é a raiz do conteúdo XAML, pois ela será aplicada a toda a região de conteúdo (como uma Janela). Se o aplicativo tiver um Frame que navegue por várias páginas, você deverá definir essa propriedade no Frame. Caso contrário, você deverá definir essa propriedade na Página do seu aplicativo.
<Page muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<TextBlock>Hello world</TextBlock>
</Page>
Os exemplos a seguir mostram como implementar os padrões de camada padrão mostrados anteriormente. Cada um desses exemplos usa e exige a mesma barra de título code-behind, mostrada no último exemplo.
Exemplo: padrão no NavigationView esquerdo
Por padrão, NavigationView no modo esquerdo inclui a camada de conteúdo em sua área de conteúdo. Este exemplo estende o Mica para a área da barra de título e cria uma barra de título personalizada.
<Page
x:Class="LeftNavView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:LeftNavView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<Page.Resources>
<!--This top margin is the height of the custom TitleBar-->
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="48"
Canvas.ZIndex="1"
Margin="48,0,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="Test App Title"
VerticalAlignment="Center"
Margin="12, 0, 0, 0"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Border>
<muxc:NavigationView x:Name="NavigationViewControl"
IsTitleBarAutoPaddingEnabled="False"
IsBackButtonVisible="Visible"
Header="Title"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
Canvas.ZIndex="0">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
</muxc:NavigationView.MenuItems>
<Grid>
<Frame x:Name="contentFrame">
<Grid>
<TextBlock Padding="56,16,0,0">Page content!</TextBlock>
</Grid>
</Frame>
</Grid>
</muxc:NavigationView>
</Grid>
</Page>
Exemplo: padrão no NavigationView na parte superior
Por padrão, NavigationView no modo parte superior inclui a camada de conteúdo em sua área de conteúdo. Este exemplo estende o Mica para a área da barra de título e cria uma barra de título personalizada.
<Page
x:Class="TopNavView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TopNavView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<Page.Resources>
<CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="32"
Margin="48,0,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="Test App Title"
VerticalAlignment="Center"
Margin="12,0,0,0"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Border>
<muxc:NavigationView x:Name="NavigationViewControl"
Header="Page Title"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
PaneDisplayMode="Top">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Content="Text"/>
<muxc:NavigationViewItem Content="Text"/>
<muxc:NavigationViewItem Content="Text"/>
<muxc:NavigationViewItem Content="Text"/>
<muxc:NavigationViewItem Content="Text"/>
</muxc:NavigationView.MenuItems>
<Grid>
<Frame x:Name="contentFrame">
<Grid>
<TextBlock Padding="56,16,0,0">Page content!</TextBlock>
</Grid>
</Frame>
</Grid>
</muxc:NavigationView>
</Grid>
</Page>
Exemplo: padrão Cartão no NavigationView esquerdo
Para seguir o padrão cartão usando um NavigationView, você precisará remover a camada de conteúdo padrão substituindo os recursos de tema de tela de fundo e borda. Em seguida, você pode criar os cartões na área de conteúdo do controle. Este exemplo cria vários cartões, estende o Mica para a área da barra de título e cria uma barra de título personalizada. Para obter mais informações sobre a interface do usuário do cartão, confira diretrizes sobre Camadas e elevação.
<Page
x:Class="CardLayout.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CardLayout"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
<Page.Resources>
<!--This top margin is the height of the custom TitleBar-->
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
<Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="48"
Canvas.ZIndex="1"
Margin="48,0,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="Test App Title"
VerticalAlignment="Center"
Margin="12,0,0,0"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Border>
<muxc:NavigationView x:Name="NavigationViewControl"
IsTitleBarAutoPaddingEnabled="False"
IsBackButtonVisible="Visible"
Header="Title"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
Canvas.ZIndex="0">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
<muxc:NavigationViewItem Icon="Target" Content="Text"/>
</muxc:NavigationView.MenuItems>
<Grid>
<Frame x:Name="contentFrame">
<StackPanel Orientation="Vertical" Margin="40,16,0,0">
<Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="16"
CornerRadius="8"
BorderThickness="1"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
</Border>
<Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="16"
CornerRadius="8"
BorderThickness="1"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
</Border>
<Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="16"
CornerRadius="8"
BorderThickness="1"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
</Border>
</StackPanel>
</Frame>
</Grid>
</muxc:NavigationView>
</Grid>
</Page>
Code-behind da barra de título
As três páginas XAML de layout de aplicativo anteriores usam esse code-behind para criar uma barra de título personalizada adaptável ao estado e à visibilidade do aplicativo.
Para obter mais informações, confira Personalização da barra de título.
public MainPage()
{
this.InitializeComponent();
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
UpdateTitleBarLayout(coreTitleBar);
// Set XAML element as a draggable region.
Window.Current.SetTitleBar(AppTitleBar);
// Register a handler for when the size of the overlaid caption control changes.
// For example, when the app moves to a screen with a different DPI.
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
// Register a handler for when the title bar visibility changes.
// For example, when the title bar is invoked in full screen mode.
coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
//Register a handler for when the window changes focus
Window.Current.Activated += Current_Activated;
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
UpdateTitleBarLayout(sender);
}
private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
// Update title bar control size as needed to account for system size changes.
AppTitleBar.Height = coreTitleBar.Height;
// Ensure the custom title bar does not overlap window caption controls
Thickness currMargin = AppTitleBar.Margin;
AppTitleBar.Margin = new Thickness(currMargin.Left, currMargin.Top, coreTitleBar.SystemOverlayRightInset, currMargin.Bottom);
}
private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
if (sender.IsVisible)
{
AppTitleBar.Visibility = Visibility.Visible;
}
else
{
AppTitleBar.Visibility = Visibility.Collapsed;
}
}
// Update the TitleBar based on the inactive/active state of the app
private void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
{
SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];
if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
{
AppTitle.Foreground = inactiveForegroundBrush;
}
else
{
AppTitle.Foreground = defaultForegroundBrush;
}
}
// Update the TitleBar content layout depending on NavigationView DisplayMode
private void NavigationViewControl_DisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
{
const int topIndent = 16;
const int expandedIndent = 48;
int minimalIndent = 104;
// If the back button is not visible, reduce the TitleBar content indent.
if (NavigationViewControl.IsBackButtonVisible.Equals(Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Collapsed))
{
minimalIndent = 48;
}
Thickness currMargin = AppTitleBar.Margin;
// Set the TitleBar margin dependent on NavigationView display mode
if (sender.PaneDisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top)
{
AppTitleBar.Margin = new Thickness(topIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
}
else if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
{
AppTitleBar.Margin = new Thickness(minimalIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
}
else
{
AppTitleBar.Margin = new Thickness(expandedIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
}
}
Artigos relacionados
Windows developer
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de