Sombras en aplicaciones de Windows

Windows aplicaciones usan sombras para expresar profundidad y agregar jerarquía visual. Las sombras ayudan a crear la percepción de profundidad, guiando la atención del usuario a los elementos más importantes de la interfaz de usuario.

La sombra es una forma en que un usuario percibe la elevación. La luz sobre un objeto elevado crea una sombra en la superficie de abajo. Cuanto mayor sea el objeto, más grande y suave será la sombra. Los objetos elevados de la interfaz de usuario no necesitan tener sombras, pero ayudan a crear la apariencia de elevación.

En las aplicaciones de Windows, las sombras deben usarse de forma intencionada más que por razones estéticas. El uso de demasiadas sombras disminuirá o eliminará la capacidad de la sombra para centrar al usuario.

Si usa controles estándar, las sombras ya se incorporan a la interfaz de usuario. Sin embargo, puede incluir manualmente sombras en la interfaz de usuario mediante las API ThemeShadow o DropShadow .

ThemeShadow

El tipo ThemeShadow se puede aplicar a cualquier elemento XAML para dibujar sombras adecuadamente basadas en coordenadas x, y, z.

• Aplica sombras a elementos basados en el valor de profundidad z, emulando profundidad.
• Mantiene las sombras coherentes en todas las aplicaciones gracias a la estética de sombras integrada.

Aquí se muestra cómo se ha implementado ThemeShadow en un MenuFlyout. MenuFlyout tiene una sombra integrada con una profundidad de 32px aplicada al menú principal y a todos los menús anidados.

ThemeShadow en controles comunes

Los siguientes controles comunes usarán automáticamente ThemeShadow para proyectar sombras desde una profundidad de 32px a menos que se especifique lo contrario.

• Menú contextual, barra de comandos, desplegable de la barra de comandos, Barra de Menús
• Cuadros de diálogo y controles flotantes (cuadro de diálogo en 128px)
• NavigationView (Vista de navegación)
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• TeachingTip
• CajaDeSugerenciasAutomáticas
• Selectores de calendario, fecha y hora
• Mensaje emergente (16px)
• Cuadro número
• TabView (Vista de pestañas)
• Control de transporte multimedia, InkToolbar
• Barra de migas de pan
• Animación conectada

ThemeShadow en ventanas emergentes

A menudo, la interfaz de usuario de la aplicación utiliza un elemento emergente para escenarios en los que necesita llamar la atención del usuario y realizar una acción rápida. Estos son ejemplos excelentes cuando se debe usar shadow para ayudar a crear una jerarquía en la interfaz de usuario de la aplicación.

ThemeShadow aplica automáticamente sombras cuando se aplican a cualquier elemento XAML en un Popup. Proyectará sombras sobre el contenido de fondo de la aplicación que esté detrás de él y sobre cualquier otro elemento emergente abierto que se encuentre debajo de él.

Para usar ThemeShadow con elementos emergentes, usa la propiedad Shadow para aplicar ThemeShadow a un elemento XAML. A continuación, eleva el elemento sobre otros elementos que están detrás de él, por ejemplo, mediante el uso del componente z de la propiedad Translation. Para la mayoría de la interfaz de usuario emergente, la elevación predeterminada recomendada en relación con el contenido en segundo plano de la aplicación es de 32 píxeles efectivos.

En este ejemplo se muestra un rectángulo en un elemento emergente que proyecta una sombra sobre el contenido de fondo de la aplicación y cualquier elemento emergente detrás suyo.

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

Deshabilitar el ThemeShadow predeterminado en los controles flotantes personalizados

Los controles basados en Flyout, DatePickerFlyout, MenuFlyout o TimePickerFlyout usan automáticamente ThemeShadow para convertir una sombra.

Si la sombra predeterminada no parece correcta en el contenido del control, puede deshabilitarla estableciendo la propiedad IsDefaultShadowEnabled en el control FlyoutPresenter asociado.

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

ThemeShadow en otros elementos

En general, le animamos a pensar cuidadosamente en el uso de la sombra y limitar su uso a los casos en los que introduce una jerarquía visual significativa. Sin embargo, proporcionamos una manera de proyectar una sombra desde cualquier elemento de la interfaz de usuario en caso de que tengas escenarios avanzados que lo requieran.

Para proyectar una sombra desde un elemento XAML que no está en un elemento Popup, debes especificar explícitamente los demás elementos que pueden recibir la sombra en la colección ThemeShadow.Receivers. Los receptores no pueden ser antecesores del emisor en el árbol visual.

En este ejemplo se muestran dos rectángulos que proyectan sombras sobre una cuadrícula detrás de ellos.

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

Colocar sombra

DropShadow no proporciona valores de sombra integrados y debe especificarlos usted mismo. Para ver implementaciones de ejemplo, consulte la clase DropShadow .

¿Qué sombra debo usar?

• Tenga en cuenta que el propósito de la sombra es proporcionar una jerarquía significativa, no como un tratamiento visual simple.
• Por lo general, se recomienda usar ThemeShadow, que proporciona valores de sombra coherentes.
• Para problemas sobre el rendimiento, limite el número de sombras, use otro tratamiento visual o use DropShadow.
• Si tiene escenarios más avanzados para lograr una jerarquía visual, considere la posibilidad de usar otro tratamiento visual (por ejemplo, color). Si se necesita sombra, use DropShadow.

Artículos relacionados

• Elevación y capas en Windows
• Materiales (Acrílico/ Mica)