Материал мики

  • Статья

Мика является непрозрачным, динамическим материалом, который включает темы и классические обои для рисования фона длительных окон, таких как приложения и параметры. Вы можете применить Mica к фону приложения, чтобы порадовать пользователей и создать визуальную иерархию. Тем самым вы увеличите производительность, поскольку пользователи будут сразу видеть, какое окно находится в фокусе. Mica специально разработан для повышения производительности приложений, так как создает образец рисунка рабочего стола только один раз для создания визуализации. Mica доступна для приложений UWP, использующих WinUI 2 и приложения, использующие пакет SDK для приложений Windows 1.1 или более поздней версии, во время работы в Windows 11 версии 22000 или более поздней версии.

hero image

Мика в светлой теме
Mica in light theme

Мика в темной теме
Mica in dark theme

Мика Alt является вариантом Mica, с более сильным тонированием цвета фона рабочего стола пользователя. Вы можете применить Mica Alt к фону приложения, чтобы обеспечить более глубокую визуальную иерархию, чем Мика, особенно при создании приложения с вкладками заголовка. Mica Alt доступен для приложений, использующих пакет SDK для приложений Windows 1.1 или более поздней версии, во время работы в Windows 11 версии 22000 или более поздней версии.

Эти изображения показывают разницу между Микой и Микой Alt в строке заголовка с вкладками. Первый образ использует Мику, а второй образ использует Mica Alt.

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

Когда следует использовать Мику или Мику Alt

Мика и Мика Alt являются материалами, которые появляются на фоне вашего приложения — за всем другим содержимым. Каждый материал непрозрачн и включает тему пользователя и обои на рабочем столе, чтобы создать его высокоперсонализированный внешний вид. Когда пользователь перемещает окно по экрану, материал Mica динамически адаптируется для создания полнофункциональных визуализаций с помощью фонового рисунка под приложением. Кроме того, этот материал помогает пользователям сосредоточиться на текущей задаче, возвращаясь к нейтральному цвету, когда приложение неактивно.

Рекомендуется применить Mica или Mica Alt в качестве базового слоя приложения и определить приоритет видимости в области заголовков. Дополнительные инструкции по слоев см. в разделе "Слой" и "Повышение уровня" и"Уровень приложений" с помощью Мики.

Удобство использования и адаптируемость

Материалы Мики автоматически адаптируют их внешний вид для широкого спектра устройств и контекстов. Они предназначены для повышения производительности, так как они фиксируют фоновые обои только один раз, чтобы создать их визуализации.

В режиме высокой контрастности пользователи продолжают видеть знакомый цвет фона их выбора вместо Mica или Mica Alt. Кроме того, материалы Mica будут отображаться как твердый резервный цвет (SolidBackgroundFillColorBase для Mica, SolidBackgroundFillColorBaseAlt для Mica Alt) когда:

  • Пользователь отключает прозрачность в Параметры > цвет персонализации>.
  • Режим экономии батареи активируется.
  • Приложение выполняется на низком оборудовании.
  • Окно приложения на рабочем столе деактивирует.
  • Приложение Windows работает на Xbox или HoloLens.
  • Версия Windows ниже 22000.

Слои приложений с помощью Мики

Стандартный уровень содержимого шаблона
Standard content layer

Слой содержимого шаблона карточки
Card pattern content layer

Мика идеально подходит в качестве базового слоя в иерархии вашего приложения из-за его неактивных и активных состояний и тонкой персонализации. Чтобы следовать двухуровневой системе слоев и повышения уровня , мы рекомендуем применить Mica в качестве базового слоя приложения и добавить дополнительный слой содержимого, который находится на вершине базового слоя. Слой содержимого должен забрать материал за ним, Мика, используя LayerFillColorDefaultBrush, низкопрозрачный цвет в качестве фона. Рекомендуемые шаблоны слоя содержимого:

  • Стандартный шаблон: непрерывный фон для больших областей, которым требуется отдельная иерархиальная дифференцировка от базового слоя. Объект LayerFillColorDefaultBrush должен применяться к фонам контейнеров поверхностей приложения WinUI (например, Сетки, StackPanels, Кадры и т. д.).
  • Шаблон карточки: сегментированные карта для приложений, разработанных с несколькими разделами и неразрывными компонентами пользовательского интерфейса. Определение пользовательского интерфейса карта с помощью LayerFillColorDefaultBrush см. в руководстве по уровню и повышению прав.

Чтобы обеспечить простой внешний вид окна приложения, Мика должна быть видна в заголовке строки, если вы решили применить материал к вашему приложению. Вы можете отобразить Мику в строке заголовка, расширив приложение в не клиентскую область и создав прозрачную настраиваемую строку заголовка. Дополнительные сведения см. в строке заголовка.

В следующих примерах показаны распространенные реализации стратегии слоев в NavigationView , где Mica отображается в области заголовков.

  • Стандартный шаблон в left NavigationView.
  • Стандартный шаблон в Top NavigationView.
  • Шаблон карточки в области навигации слева.

Стандартный шаблон в left NavigationView

По умолчанию NavigationView в левом режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется в области заголовков и создает настраиваемую строку заголовка.

Nav View in standard pattern with custom title bar in Left mode

Стандартный шаблон в Top NavigationView

По умолчанию NavigationView в верхнем режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется в области заголовков и создает настраиваемую строку заголовка.

NavigationView in standard pattern with custom title bar in Top mode

Шаблон карточки в области навигации слева

Чтобы следовать шаблону карта с помощью NavigationView, необходимо удалить слой содержимого по умолчанию, переопределив ресурсы фона и границы темы. Затем можно создать карта в области содержимого элемента управления. В этом примере создается несколько карта, расширение Mica в область строки заголовка и создание настраиваемой строки заголовка. Дополнительные сведения о пользовательском интерфейсе карта см. в руководстве по уровню и повышению прав.

NavigationView in standard pattern with custom title bar in Left mode

Слои приложений с помощью Mica Alt

Мика Alt является альтернативой Mica в качестве базового слоя в иерархии вашего приложения с такими же функциями, как неактивные и активные состояния и тонкой персонализации. Мы рекомендуем применить Mica Alt в качестве базового слоя приложения при необходимости контрастировать между элементами строки заголовка и областями команд приложения (например, навигацией, меню).

Распространенный сценарий использования Mica Alt — это при создании приложения с помощью панели заголовка с вкладками. Чтобы следовать инструкциям по уровню и повышению прав, мы рекомендуем применить Mica Alt в качестве базового слоя приложения, добавить слой команд, который находится на вершине базового слоя, и, наконец, добавить дополнительный слой содержимого, который находится на вершине уровня команд. Слой команд должен забрать материал за ним, Мика Alt, используя LayerOnMicaBaseAltFillColorDefaultBrushнизкопрозрачный цвет сплошной цвет, в качестве фона. Слой содержимого должен забрать слои под ним, используя LayerFillColorDefaultBrushдругой цвет сплошной сплошной непрозрачности. Система слоев выглядит следующим образом:

  • Мика Альт
  • Уровень команд. Требуется отдельная иерархическая дифференцировка от базового слоя. Он LayerOnMicaBaseAltFillColorDefaultBrush должен применяться к областям команд для поверхностей приложения WinUI (например, MenuBar, структуры навигации и т. д.).
  • Слой содержимого: непрерывный фон для больших областей, которым требуется отдельная иерархическая дифференцировка от уровня команд. Он LayerFillColorDefaultBrush должен применяться к фону контейнера поверхностей приложения WinUI (например, Сетки, StackPanels, Кадры и т. д.).

Чтобы обеспечить простой внешний вид окна приложения, Мика Alt должна отображаться в заголовке строки, если вы решили применить материал к вашему приложению. Вы можете отобразить Mica Alt в строке заголовка, расширив приложение в не клиентскую область и создав прозрачную пользовательскую строку заголовка.

Рекомендации

  • Примените фоновый материал к самому заднему слое (заменяя ApplicationPageBackgroundThemeBrush при наличии).
  • Установите все фоновые слои, которые вы хотите увидеть Mica в прозрачном, чтобы мика отображала через.
  • Не применяйте материал фона более одного раза в приложении.
  • Не применяйте материал фона к элементу пользовательского интерфейса. Материал фона не будет отображаться на самом элементе. Он будет отображаться только в том случае, если все слои между элементом пользовательского интерфейса и окном заданы как прозрачные.

Как использовать Мику

Вы можете использовать Mica в приложениях UWP, использующих WinUI 2 или в приложениях, использующих пакет SDK для приложений Windows 1.1 или более поздней версии. Вы можете использовать Mica Alt в приложениях, использующих пакет SDK для приложений Windows 1.1 или более поздней версии.

Использование Mica с пакетом SDK для приложений Windows

Чтобы использовать Mica в приложении XAML, использующего пакет SDK для приложений Windows и WinUI 3, задайте для свойства Window.SystemBackdrop значение MicaBackdrop.

В этих примерах показано, как это сделать в XAML и коде.

Mica

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

public MainWindow()
{
    this.InitializeComponent();

    SystemBackdrop = new MicaBackdrop() 
                        { Kind = MicaKind.BaseAlt };
}

Дополнительные сведения об использовании API композиции MicaController см. в статье Apply Mica or Акриловые материалы в классических приложениях для Windows 11.

Сведения об использовании фонов в приложении Win32 см. в статье Apply Mica in Win32 desktop apps for Windows 11.

Использование Mica с WinUI 2 для UWP

Важные API: класс ФонМатериал

Вы можете применить Мику в приложении UWP с классом ФонМатериал . Рекомендуется задать присоединенное свойство ФонМатериал для элемента XAML, являющегося корнем содержимого XAML, так как оно будет применяться ко всему региону содержимого (например, Window). Если в приложении есть кадр, который перемещается по нескольким страницам, необходимо задать это свойство в frame. В противном случае необходимо задать это свойство на странице приложения.

<Page muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <TextBlock>Hello world</TextBlock>
</Page>

В следующих примерах показано, как реализовать стандартные шаблоны слоев, показанные ранее. В каждом из этих примеров используется и требуется один и тот же код строки заголовка, показанный в последнем примере.

Пример. Стандартный шаблон в left NavigationView

По умолчанию NavigationView в левом режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется в области заголовков и создает настраиваемую строку заголовка.

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

Пример. Стандартный шаблон в Top NavigationView

По умолчанию NavigationView в верхнем режиме включает слой содержимого в его области содержимого. В этом примере Mica расширяется в области заголовков и создает настраиваемую строку заголовка.

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

Пример: шаблон карточки в области навигации слева

Чтобы следовать шаблону карта с помощью NavigationView, необходимо удалить слой содержимого по умолчанию, переопределив ресурсы фона и границы темы. Затем можно создать карта в области содержимого элемента управления. В этом примере создается несколько карта, расширение Mica в область строки заголовка и создание настраиваемой строки заголовка. Дополнительные сведения о пользовательском интерфейсе карта см. в руководстве по уровню и повышению прав.

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

Код строки заголовка

Предыдущие три страницы xaml макета приложения используют этот код позади для создания настраиваемой строки заголовка, адаптивной к состоянию приложения и видимости.

Дополнительные сведения см. в разделе "Настройка строки заголовка".

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);
    }
}