Тени в приложениях Windows

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

Тень — это один из способов, с помощью которых пользователь воспринимает высоту. Свет над приподнятым объектом создает тень на поверхности ниже. Чем выше объект, тем больше и мягче тень становится. Поднятые объекты в пользовательском интерфейсе не обязательно должны иметь тени, но они помогают создать эффект возвышенности.

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

Если вы используете стандартные элементы управления, тени уже включены в пользовательский интерфейс. Однако вы можете вручную включить тени в пользовательский интерфейс с помощью API ThemeShadow или DropShadow .

Теневой эффект темы

Тип ThemeShadow можно применить к любому элементу XAML, чтобы нарисовать тени соответствующим образом на основе координат x, y, z.

• Он применяет тени к элементам на основе значения z-глубины, эмулируя глубину.
• Благодаря встроенной эстетике теней в приложениях сохраняется консистентность теней.

Вот как ThemeShadow реализован в MenuFlyout. MenuFlyout имеет встроенную тень с глубиной 32px, примененной к главному меню и всем вложенным меню.

Откройте приложение коллекции WinUI и просмотрите ThemeShadow в действии

ThemeShadow в стандартных элементах управления

Следующие распространенные элементы управления автоматически используют ThemeShadow для отбрасывания теней с глубиной 32px, если не указано иное.

• Контекстное меню, панель команд, всплывающее меню панели команд, панель меню
• Диалоговые окна и всплывающие элементы (диалоговое окно в 128 пикселей)
• Обозреватель навигации
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• Совет по обучению
• Поле автоподсказок
• Средства выбора календаря и даты и времени
• Подсказка (16px)
• Числовое поле
• TabView
• Элемент управления транспортировкой мультимедиа, InkToolbar
• BreadcrumbBar
• Подключенная анимация

ThemeShadow в всплывающих окнах

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

ThemeShadow автоматически накладывает тени при применении к любому элементу XAML в Popup. Он создаст тени в фоновом содержимом приложения, а также любые другие открытые всплывающие окна под ним.

Чтобы использовать ThemeShadow с всплывающими окнами, примените свойство Shadow к элементу XAML. Затем поднимите элемент над другими элементами за ним, например, используя z-компонент свойства Translation. Для большинства всплывающих элементов интерфейса рекомендованная стандартная высота относительно фонового содержимого приложения составляет 32 эффективных пикселя.

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

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Отключение параметра themeShadow по умолчанию для пользовательских всплывающих окон

Элементы управления на основе Flyout, DatePickerFlyout, MenuFlyout или TimePickerFlyout автоматически используют ThemeShadow для создания тени.

Если тень по умолчанию не отображается корректно на содержимом вашего элемента управления, вы можете отключить её, установив свойство IsDefaultShadowEnabled в false в связанном FlyoutPresenter.

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

ThemeShadow в других элементах

Замечание

Начиная с Windows 11, если приложение предназначено для пакета SDK Windows версии 22000 или более поздней, коллекция Receivers игнорируется. Однако не будет ошибок, и тень продолжает функционировать.

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

Чтобы создать тень от элемента XAML, который не находится во всплывающем элементе, необходимо явно указать другие элементы, которые могут получать тень в коллекции ThemeShadow.Receivers. Приемники не могут быть предком передатчика в визуальном дереве.

В этом примере показаны два прямоугольника, которые бросают тени в сетку за ними:

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Эффект наложения тени

DropShadow не предоставляет встроенные теневые значения, и вам нужно указать их самостоятельно. Примеры реализации см. в классе DropShadow .

Подсказка

Начиная с Windows 11, если приложение нацелено на Windows SDK версии 22000 или более поздней, ThemeShadow будет вести себя как отбрасываемая тень. Если вы используете DropShadow, вместо этого можно использовать ThemeShadow.

Какую тень следует использовать?

Недвижимость	Теневой эффект темы	DropShadow
Минимальная версия SDK	Пакет SDK 18362	Пакет SDK 14393
Приспособляемость	Да	нет
Настройка	нет	Да
Источник света	None	None
Поддерживается в трехмерных средах	Да (хотя он работает в трехмерной среде, тени эмулируются.)	нет

• Имейте в виду, что цель использования тени заключается в обеспечении осмысленной иерархии, а не в простом визуальном оформлении.
• Как правило, мы рекомендуем использовать ThemeShadow, которая предоставляет согласованные значения тени.
• Если вы беспокоитесь о производительности, ограничьте количество теней, используйте другие приемы визуального оформления или используйте DropShadow.
• Если у вас есть более сложные сценарии для достижения визуальной иерархии, рассмотрите возможность использования другого визуального лечения (например, цвета). Если требуется тень, используйте DropShadow.

Связанные статьи

• Повышение уровня и слоение в Windows
• Материалы (акрил / мика)