Notificación de información

El badging es una manera no intrusiva e intuitiva de mostrar notificaciones o llevar el foco a un área dentro de una aplicación, ya sea para las notificaciones, que indiquen nuevo contenido o muestren una alerta. Un info badge es un pequeño fragmento de interfaz de usuario que se puede agregar a una aplicación y personalizar para mostrar un número, un icono o un punto simple.

info badge está integrado en el XAMLnavigation view, pero también se puede colocar como un elemento independiente en el árbol XAML, lo que te permite colocar un info badge en cualquier control o parte de la interfaz de usuario que elijas. Cuando se usa un info badge elemento que no navigation viewsea , es responsable de determinar mediante programación cuándo mostrar y descartar , info badgey dónde colocar .info badge

¿Es este el control adecuado?

info badge Se debe usar cuando quieras acercar el foco del usuario a un área determinada de la aplicación de una manera nointrusiva. Cuando aparece, info badge está pensado para llevar el foco a un área y, a continuación, permitir que el usuario vuelva a su flujo, lo que les da la opción de examinar o no los detalles de por qué info badge apareció. Las notificaciones de información solo deben representar mensajes descartables y no permanentes: debe info badge tener reglas específicas sobre cuándo puede aparecer, desaparecer y cambiar.

Ejemplos de uso adecuado info badge :

• Para indicar que han llegado nuevos mensajes.
• Para indicar que hay nuevos artículos disponibles para leer.
• Para indicar que hay nuevas opciones disponibles en una página.
• Para indicar que puede haber un problema con un elemento en una página determinada que no impide que la aplicación funcione.

¿Cuándo se debe usar un control diferente?

info badge No se debe usar para mostrar errores críticos ni transmitir mensajes muy importantes que necesitan una acción inmediata. No se deben usar distintivos de información en los casos en los que necesiten interactuar inmediatamente para seguir usando la aplicación.

Ejemplos de uso inadecuado info badge :

• Para indicar una cuestión urgente en una página dentro de la aplicación que debe abordarse antes de seguir usando la aplicación. En este escenario, use .content dialog
• Aparece en una aplicación sin ninguna manera para que el usuario descarte .info badge Para una alerta persistente como esta, use .info bar
• info badge Usar como una forma permanente de llevar el foco del usuario a un área, sin una manera de que el usuario descarte .info badge
• Usar como info badge un icono o imagen normales en la aplicación. En su lugar, use una imagen o icono adecuado (vea IconElement e IconSource).

Tipos de info badges

Hay tres estilos de info badge entre los que puede elegir: punto, icono y numérico, como se muestra en el orden siguiente.

Punto info badge

El punto info badge es una elipse simple con un diámetro de 4px. No tiene borde y no está pensado para contener texto ni nada más dentro de él.

Debe usar el punto info badge para escenarios generales en los que desea guiar el enfoque del usuario hacia info badge , por ejemplo, para indicar que hay contenido o actualizaciones nuevos disponibles.

Icono info badge

El icono info badge es una elipse con un diámetro de 16 píxeles que contiene un icono dentro de él. info badge tiene una propiedad IconSource que proporciona flexibilidad para los tipos de iconos admitidos.

Debe usar el icono info badge para enviar un mensaje rápido junto con la obtención de la atención del usuario, por ejemplo, para alertar al usuario de que algo que no está bloqueado ha ido mal, está disponible una actualización importante adicional o que algo específico de la aplicación está habilitado actualmente (por ejemplo, un temporizador de cuenta atrás que va).

Si desea usar bitmapIconSource para el IconSource de info badge, es responsable de asegurarse de que el mapa de bits se ajuste dentro de info badge (ya sea cambiando el tamaño del icono o cambiando el tamaño de ).info badge

Numérico info badge

El valor numérico info badge es la misma forma y tamaño que el icono info badge, pero contiene un número dentro de él, determinado por la propiedad Value . Los números deben ser enteros y deben ser mayores o iguales que cero. El ancho de info badge se expandirá automáticamente a medida que el número que se muestra crece a varios dígitos, con una animación suave.

Debe usar el valor numérico info badge para mostrar que hay un número específico de elementos que necesitan atención, por ejemplo, mensajes o correos electrónicos nuevos.

Estilos preestablecidos info badge

Para ayudar a admitir los escenarios más comunes en los que info badgese usan , el control incluye estilos preestablecidos integrados info badge . Aunque puede personalizar info badge para usar cualquier combinación de colores, iconos o números que desee, estos valores preestablecidos integrados son una opción rápida para asegurarse de que info badge cumple con las directrices de accesibilidad y es proporcional en términos de icono y tamaño numérico.

Los valores preestablecidos de estilo siguientes están disponibles para info badges:

Atención

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informativo

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Correcto

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Precaución

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Crítico

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Si un estilo se establece en y info badge también se establece una propiedad en conflicto, la propiedad sobrescribirá la parte en conflicto del estilo, pero los elementos de estilo no conflictivos permanecerán aplicados.

Por ejemplo, si aplica a CriticalIconInfoBadgeStyle , info badgepero también establece InfoBadge.Value = "1", acabaría con un info badge que tiene el color de fondo "Crítico", pero muestra el número 1 dentro de él, en lugar de mostrar el icono preestablecido.

En este ejemplo se crea un info badge objeto que toma el color y el icono del estilo preestablecido Icono de atención .

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Accesibilidad

El info badge control no tiene ninguna funcionalidad de lector de pantalla ni automatización de la interfaz de usuario (UIA) integrada por sí misma, ya que el control no se puede centrar y no se puede interactuar con él.

Si usa un info badge elemento dentro de , navigation viewproporciona navigation view compatibilidad integrada con el lector de pantalla y la tecnología de asistencia. Cuando te desplazas por un elemento navigation view y llegas a un navigation view elemento con un info badge elemento en él, el lector de pantalla anunciará que hay un info badge elemento en este elemento. Si el valor info badge en cuestión es numérico, el lector de pantalla también anunciará el info badgevalor de .

Si usas un elemento info badge fuera de , navigation viewte recomendamos lo siguiente para asegurarte de que la aplicación sea totalmente accesible:

• El elemento primario de info badge debe ser enfocado y accesible mediante tabulación.
• El elemento primario anuncia los info badge lectores de pantalla.
• La aplicación envía una notificación de UIA cuando info badge aparece por primera vez.
• La aplicación envía una notificación UIA cuando info badge desaparece de la interfaz de usuario.
• La aplicación envía una notificación de UIA cuando se ha producido un cambio significativo con un existente info badge.
  • La definición de "cambio significativo" es para usted como desarrollador individual. Algunos ejemplos de esto pueden ser: un info badge cambio entre diferentes tipos, un info badge color cambiante para representar su estado o un info badgevalor de que supera un número significativo determinado.

Para controlar lo que anuncia el elemento primario a los lectores de pantalla, puede usar las propiedades adjuntas de la clase AutomationProperties . Para , info badgese recomienda establecer las AutomationProperties.FullDescription propiedades adjuntas o AutomationProperties.ItemStatus en el elemento primario.

Para enviar notificaciones de UIA tras la info badgeapariencia o el despido, puede usar el método AutomationPeer.RaiseAutomationEvent .

info badge tiene un tamaño predeterminado que cumple los requisitos de accesibilidad. Puede personalizar muchos aspectos de la inclusión de info badge su alto, ancho y color, etc., pero es importante que el valor predeterminado info badge se ajuste a nuestras directrices de accesibilidad para el tamaño y el color.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

InfoBadge para aplicaciones para UWP requiere la Biblioteca de interfaz de usuario de Windows 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows). Las API de este control existen en el espacio de nombres Microsoft.UI.Xaml.Controls .

• Apis de WinUI 2:Clase InfoBadge, Propiedad IconSource, Propiedad Value
• Abra la aplicación Galería de WinUI 2 y vea InfoBadge en acción. La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

Creación de un InfoBadge

Importante

Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.

• API importantes:Clase InfoBadge, Propiedad IconSource, Propiedad Value

Abra la aplicación Galería de WinUI 3 y vea InfoBadge en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Puedes crear un InfoBadge en XAML o en código. El tipo de InfoBadge que se crea viene determinado por las propiedades que establezca.

Punto

Para crear un punto InfoBadge, use un control InfoBadge predeterminado sin establecer propiedades.

<InfoBadge />

Icono

Para crear un icono InfoBadge, establezca la propiedad IconSource .

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Numeric

Para crear un InfoBadge numérico, establezca la propiedad Value .

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

En la mayoría de los escenarios, enlazarás la Value propiedad de InfoBadge a un valor entero cambiante en el back-end de la aplicación para que puedas incrementar o disminuir fácilmente y mostrar u ocultar infoBadge en función de ese valor específico.

Nota

Si se establecen las Icon propiedades y Value , la Value propiedad tiene prioridad y InfoBadge aparece como un InfoBadge numérico.

Uso de infoBadge en NavigationView

Si usas un NavigationView en tu aplicación, te recomendamos que uses un InfoBadge en NavigationView para mostrar las notificaciones y alertas de toda la aplicación. Para colocar InfoBadge en un objeto NavigationViewItem, asigne el objeto InfoBadge a la NavigationViewItem.InfoBadge propiedad .

En Left-Expanded modo, InfoBadge aparece alineado a la derecha con el borde del objeto NavigationViewItem.

En Left-Compact modo, infoBadge aparece superpuesto en la esquina superior derecha del icono.

En el modo Superior, InfoBadge se alinea con la esquina superior derecha del elemento general.

Te recomendamos que no uses diferentes tipos de InfoBadges en una NavigationView, como adjuntar un InfoBadge numérico a un Objeto NavigationViewItem y un punto InfoBadge a otro NavigationViewItem en el mismo NavigationView.

Ejemplo: Incremento de un InfoBadge numérico en un control NavigationView

En este ejemplo se simula cómo una aplicación de correo electrónico podría usar infoBadge en un NavigationView para mostrar el número de correos electrónicos nuevos en la bandeja de entrada e incrementar el número que se muestra en infoBadge cuando se recibe un nuevo mensaje.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

Jerarquía en NavigationView

Si tienes un NavigationView jerárquico, con NavigationViewItems anidados en otros NavigationViewItems, los elementos primarios seguirán los mismos patrones de diseño y selección de ubicación que se describen anteriormente.

Los objetos NavigationViewItem y NavigationViewItems primarios tendrán su propia propiedad InfoBadge. Puede enlazar el valor de InfoBadge del elemento primario a factores que determinan los valores de InfoBadge de los elementos secundarios, como mostrar la suma de los InfoBadge numéricos de los elementos secundarios en infoBadge del elemento primario.

Esta imagen muestra un control NavigationView jerárquico con su PaneDisplayMode establecido en Top, donde el elemento de nivel superior (primario) muestra un InfoBadge numérico. La aplicación ha establecido el elemento primario InfoBadge para representar lo que se muestra en los elementos secundarios de InfoBadges, ya que los elementos secundarios no se expanden actualmente (y, por lo tanto, no están visibles).

Uso de InfoBadge en otro control

Es posible que quiera mostrar alertas o notificaciones en elementos dentro de la aplicación que no sean NavigationView. Es posible que tenga un listViewItem que necesite atención especial o un elemento de menú que muestre una notificación. En estos casos, puede integrar InfoBadge directamente en la interfaz de usuario con otros controles.

InfoBadge es un UIElement y, por tanto, no se puede usar como recurso compartido.

Para ello, use InfoBadge como haría con cualquier otro control, simplemente agregue el marcado de InfoBadge donde desea que aparezca. Como InfoBadge hereda de Control, tiene todas las propiedades de posicionamiento integradas, como margen, alineación, relleno, etc., que puede usar para colocar su InfoBadge exactamente donde lo desee.

Si coloca un InfoBadge dentro de otro control, como un Button o un ListViewItem, es probable que se recorte si lo coloca para extenderse más allá del rectángulo de límite del control primario. Si infoBadge está dentro de otro control, no debe colocarse más allá de las esquinas del rectángulo de límite general del control.

Ejemplo: Colocar un InfoBadge dentro de otro control

Este es un botón que tiene un InfoBadge colocado en su esquina superior derecha, con la notificación superpuesta sobre el contenido. Este ejemplo se puede aplicar a muchos controles distintos de Button, sino que simplemente muestra cómo colocar, colocar y mostrar un InfoBadge dentro de otro control WinUI.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

Administración de infoBadge

Un InfoBadge suele mostrar una alerta transitoria, por lo que es habitual mostrarlo u ocultarlo y cambiarlo periódicamente mientras se ejecuta la aplicación.

Mostrar y ocultar un InfoBadge

Puede usar la propiedad Visibility o la propiedad Opacity para mostrar y ocultar un InfoBadge basado en acciones de usuario, lógica de programa, contadores, etc.

Al igual que con otros UIElements, la configuración Visibility.Collapsed hará que InfoBadge no tome espacio en el diseño, por lo que podría hacer que otros elementos se muevan cuando se muestren y se oculten.

Si los elementos que se cambian de posición son un problema, puede usar la Opacity propiedad para mostrar y ocultar infoBadge. Opacity está establecido 1.0 en de forma predeterminada; puede establecerlo en 0 para ocultar InfoBadge. Al usar la Opacity propiedad , InfoBadge seguirá ocupando espacio en el diseño aunque esté oculto actualmente.

Cambiar el estilo de InfoBadge

Puede cambiar el icono o el número que se muestra en infoBadge mientras se muestra. La disminución o incremento de un InfoBadge numérico basado en la acción del usuario se puede lograr cambiando el valor de InfoBadge.Value. Cambiar el icono de infoBadge se puede lograr estableciendo InfoBadge.IconSource en un nuevo IconSource objeto. Al cambiar los iconos, asegúrese de que el nuevo icono tiene el mismo tamaño que el icono antiguo para evitar un efecto visual jarrante.

Comportamiento predeterminado

Si no se InfoBadge.Value establece ni InfoBadge.IconSource , infoBadge tiene como valor predeterminado mostrar un punto (en concreto, si Value se establece -1 en y IconSource se establece nullen , que son los valores predeterminados). Si se establecen las Value propiedades y IconSource , InfoBadge respetará la Value propiedad y mostrará un valor numérico.

También puede cambiar el tipo de InfoBadge mientras se muestra. Para cambiar el tipo de InfoBadge, asegúrese de que la propiedad correspondiente del tipo actual ( o IconSource) esté establecida en su valor predeterminado (-1Value o null) y establezca la propiedad del nuevo tipo igual a un valor adecuado. Para cambiar el tipo de InfoBadge de numérico o icono a un tipo de punto InfoBadge, asegúrese de que InfoBadge.Value está establecido -1 en y InfoBadge.IconSource está establecido nullen .

En función de cómo haya colocado infoBadge, tenga en cuenta que esto puede hacer que los elementos cambien a medida que cambie el tamaño y la forma del InfoBadge.

Artículos relacionados

• NavigationView