Материал mica

Статья
05/17/2023

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

Главное изображение

Mica в светлой теме

Mica в темной теме

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

На этих изображениях показана разница между Mica и Mica Alt в строке заголовка с вкладками. На первом изображении используется Mica, а на втором — Mica Alt.

Снимок экрана: Mica в строке заголовка с вкладками.

Снимок экрана: Mica Alt в строке заголовка с вкладками.

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

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

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

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

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

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

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

Наложение приложений с помощью Mica

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

Уровень содержимого шаблона карточки

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

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

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

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

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

Стандартный шаблон в левом представлении навигации

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

Представление навигации в стандартном шаблоне с настраиваемой строкой заголовка в режиме слева

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

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

NavigationView в стандартном шаблоне с настраиваемой строкой заголовка в режиме

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

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

NavigationView в стандартном шаблоне с настраиваемой строкой заголовка в левом режиме

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

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

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

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

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

Использование Mica

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

Использование Mica с Windows App SDK

Чтобы использовать Mica в приложении XAML, которое использует Windows App SDK и 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 см. в статье Применение материалов Mica или Акрил в классических приложениях для Windows 11.

Сведения об использовании фона в приложении Win32 см. в статье Применение Mica в классических приложениях Win32 для Windows 11.

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

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

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

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

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

Пример: стандартный шаблон в левом представлении навигации

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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

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

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

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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);
    }
}

Материал mica

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

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

Наложение приложений с помощью Mica

Стандартный шаблон в левом представлении навигации

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

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

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

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

Использование Mica

Использование Mica с Windows App SDK

Mica

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

Пример: стандартный шаблон в левом представлении навигации

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

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

Код программной части заголовка

Дополнительные ресурсы

Дополнительные ресурсы

Материал mica

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

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

Наложение приложений с помощью Mica

Стандартный шаблон в левом представлении навигации

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

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

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

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

Использование Mica

Использование Mica с Windows App SDK

Mica

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

Пример: стандартный шаблон в левом представлении навигации

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

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

Код программной части заголовка

Похожие статьи

Дополнительные ресурсы

Дополнительные ресурсы