Sugerencia de enseñanza

Un consejo didáctico es un elemento desplegable semipersistente y rico en contenido que proporciona información contextual. A menudo se utiliza para informar, recordar y enseñar a los usuarios sobre características importantes y nuevas que pueden mejorar su experiencia.

Una sugerencia de enseñanza puede cerrarse automáticamente cuando pierde el enfoque o bien puede requerir una acción explícita para cerrarse. Un consejo de enseñanza puede apuntar a un elemento específico de la interfaz de usuario con su cola y también se puede utilizar sin cola ni objetivo.

¿Es este el control adecuado?

Use un control TeachingTip para centrar la atención de un usuario en actualizaciones y características nuevas o importantes, recordar a un usuario de opciones no esenciales que mejorarían su experiencia o enseñar a un usuario cómo se debe completar una tarea.

Dado que los consejos de enseñanza son transitorios, no es un método recomendado para avisar a los usuarios sobre los errores o cambios importantes de estado.

Recommendations

• Las sugerencias son temporales y no deben contener información u opciones que sean críticas para la experiencia de una aplicación.
• Evita mostrar sugerencias de enseñanza con demasiada frecuencia. Es más probable que las sugerencias de enseñanza reciban atención individual cuando se distribuyen a lo largo de sesiones prolongadas o múltiples.
• Mantén las sugerencias concisas y el tema claro. Las investigaciones muestran que, en promedio, los usuarios solo leen entre 3 y 5 palabras y comprenden entre 2 y 3 antes de decidir si van a interactuar con una sugerencia.
• No se garantiza la accesibilidad de un gamepad para un consejo educativo. Para las aplicaciones que predicen la entrada de gamepad, consulta interacciones con gamepad y control remoto. Se recomienda probar la accesibilidad del mando de juego de cada consejo de enseñanza con todas las configuraciones posibles de la UI de la aplicación.
• Cuando se habilita la propiedad teaching tip para salir del marco raíz XAML, se recomienda también habilitar la propiedad IsLightDismissEnabled y configurar PreferredPlacement para que esté cerca del centro del marco raíz XAML.

Volver a configurar una sugerencia de enseñanza abierta

Es posible volver a configurar algunos contenidos y propiedades mientras la sugerencia de enseñanza está abierta, y estos cambios surtirán efecto inmediatamente. Otras propiedades y contenido (como la propiedad de icono, los botones de acción y de cierre y volver a configurar los descartes por cambio de foco y los descartes explícitos) requieren que la sugerencia de enseñanza se cierre y se vuelva a abrir para que los cambios de estas propiedades surtan efecto. Ten en cuenta que cambiar el comportamiento de descarte de manual a descarte por cambio de foco mientras una sugerencia de enseñanza está abierta provocará que su botón Cerrar se elimine antes de que el comportamiento de cierre por cambio de foco se habilite, por lo que la sugerencia se quedará bloqueada en la pantalla.

Examples

Una sugerencia de enseñanza puede tener varias configuraciones notables, incluidas estas:

Una sugerencia de enseñanza puede dirigirse a un elemento de interfaz de usuario específico con su cola para mejorar la clarity contextual de la información que está presentando.

Cuando la información presentada no se refiere a un elemento específico de la interfaz de usuario, se puede crear un consejo de enseñanza general eliminando el indicador.

Una sugerencia de enseñanza puede requerir al usuario que la descarte usando un botón "X" en la esquina superior o un botón "Cerrar" en la parte inferior. Es posible que un consejo de enseñanza esté habilitado para cierre automático, en cuyo caso no habrá un botón de cierre, y el consejo de enseñanza se cerrará cuando el usuario se desplace o interactúe con otros elementos de la aplicación. Debido a este comportamiento, las sugerencias de cierre automático son la mejor solución cuando una sugerencia debe colocarse en un área desplazable.

Crear una sugerencia de enseñanza

• API importantes:Clase TeachingTip

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

La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Aquí está el XAML para un control de sugerencia educativa dirigida que muestra el aspecto predeterminado del TeachingTip con un título y un subtítulo. Ten en cuenta que la sugerencia de enseñanza puede aparecer en cualquier lugar del árbol de elementos o el código subyacente. En el ejemplo a continuación, está ubicado en un ResourceDictionary.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Save automatically"
            Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to.">
        </TeachingTip>
    </Button.Resources>
</Button>

public MainPage()
{
    this.InitializeComponent();

    if(!HaveExplainedAutoSave())
    {
        AutoSaveTip.IsOpen = true;
        SetHaveExplainedAutoSave();
    }
}

Este es el resultado cuando se muestran la página que contiene el botón y la sugerencia de enseñanza:

En el ejemplo anterior, las propiedades Título y Subtítulo se usan para establecer el título y el subtítulo de la sugerencia de enseñanza. La propiedad Target se establece en "SaveButton" para establecer la conexión visual entre sí y el botón. Para mostrar el tip de enseñanza, su propiedad IsOpen se configura en true.

Sugerencias no dirigidas

No todas las sugerencias están relacionadas con un elemento en pantalla. Para estos escenarios, no defina un destino y el consejo didáctico se mostrará en relación con los bordes de la raíz de XAML. Sin embargo, no se puede quitar la delta de una sugerencia de enseñanza y conservar la colocación relativa a un elemento de la interfaz de usuario mediante la definición de la propiedad TailVisibility en "Collapsed". El ejemplo siguiente es de una sugerencia de enseñanza no dirigida.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to.">
</TeachingTip>

Ten en cuenta que en este ejemplo el elemento TeachingTip está en el árbol de elementos, en lugar de en un objeto ResourceDictionary o en el código subyacente. Esto no tiene ningún efecto sobre el comportamiento; TeachingTip solo se muestra cuando se abre y no ocupa espacio en el diseño.

Ubicación preferida

El consejo de enseñanza replica el comportamiento de colocación de FlyoutPlacementMode con la propiedad PreferredPlacement. El modo de colocación predeterminado intentará colocar una sugerencia de enseñanza dirigida sobre su objetivo, y colocará las sugerencias de enseñanza no dirigidas centradas en la parte inferior de la raíz de XAML. Al igual que con Flyout, si el modo de colocación preferido no deja espacio para que se muestre la sugerencia de enseñanza, se elegirá automáticamente otro modo de colocación.

Para las aplicaciones que predicen la entrada de gamepad, consulta interacciones con gamepad y control remoto. Se recomienda probar la accesibilidad del mando de juego de cada consejo de enseñanza con todas las configuraciones posibles de la UI de la aplicación.

Una sugerencia de enseñanza dirigida con la propiedad PreferredPlacement establecida en "BottomLeft" se mostrará con el puntero centrado en la parte inferior de su objetivo y con su cuerpo desplazado hacia la izquierda.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            PreferredPlacement="BottomLeft">
        </TeachingTip>
    </Button.Resources>
</Button>

Una sugerencia de enseñanza no dirigida que tenga la propiedad PreferredPlacement configurada en "BottomLeft" se mostrará en la esquina inferior izquierda de la raíz de XAML.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft">
</TeachingTip>

El siguiente diagrama muestra el resultado de los 13 modos de PreferredPlacement que se pueden establecer para las sugerencias de enseñanza dirigidas.

El siguiente diagrama muestra el resultado de los 13 modos de PreferredPlacement que se pueden establecer para las sugerencias de enseñanza no dirigidas.

Agregar un margen de colocación

Puedes controlar la distancia a la que se separa una sugerencia de enseñanza dirigida de su destino y hasta qué punto se separa una sugerencia de enseñanza no dirigida de los bordes de la raíz xaml mediante la propiedad PlacementMargin. Al igual que Margin, PlacementMargin tiene cuatro valores : izquierda, derecha, superior e inferior, por lo que solo se usan los valores pertinentes. Por ejemplo, PlacementMargin.Left se aplica cuando el indicador está a la izquierda del destino o en el borde izquierdo de la raíz de XAML.

En el ejemplo siguiente se muestra una sugerencia no dirigida cuyos valores Left/Top/Right/Bottom de PlacementMargin están establecidos en 80.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft"
    PlacementMargin="80">
</TeachingTip>

Agregar contenido

El contenido se puede agregar a una sugerencia de enseñanza mediante la propiedad Content . Si el tamaño de la sugerencia de enseñanza no permite mostrar todo el contenido, se habilitará automáticamente una barra de desplazamiento para permitir que el usuario se desplace por el área de contenido.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

Agregar botones

De manera predeterminada, junto al título de una sugerencia de enseñanza se muestra un botón estándar de cierre "X". El botón Cerrar puede personalizarse con la propiedad CloseButtonContent, en cuyo caso el botón se mueve a la parte inferior de la sugerencia de enseñanza.

Nota: Las sugerencias que pueden descartarse por cambio de foco no muestran un botón Cerrar

Se puede agregar un botón de acción personalizado estableciendo la propiedad ActionButtonContent (y, opcionalmente, las propiedades ActionButtonCommand yActionButtonCommandParameter ).

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            ActionButtonContent="Disable"
            ActionButtonCommand="{x:Bind DisableAutoSaveCommand}"
            CloseButtonContent="Got it!">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

Contenido destacado

Se puede agregar contenido de borde a borde a una sugerencia de enseñanza si se establece la propiedad HeroContent. La ubicación del contenido de elemento principal puede establecerse en la parte superior o inferior de una sugerencia de enseñanza si configura la propiedad HeroContentPlacement.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
            <TeachingTip.HeroContent>
                <Image Source="Assets/cloud.png" />
            </TeachingTip.HeroContent>
        </TeachingTip>
    </Button.Resources>
</Button>

Agregar un icono

Se puede agregar un icono junto al título y el subtítulo mediante la propiedad IconSource . Entre los tamaños de icono recomendados se incluyen 16 píxeles, 24 píxeles y 32 píxeles.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            <TeachingTip.IconSource>
                <SymbolIconSource Symbol="Save" />
            </TeachingTip.IconSource>
        </TeachingTip>
    </Button.Resources>
</Button>

Habilitar el descarte automático

La funcionalidad de descarte por cambio de foco está deshabilitada de manera predeterminada, pero se puede establecer la propiedad IsLightDismissEnabled para habilitarla, de modo que una sugerencia de enseñanza se cierre, por ejemplo, cuando un usuario se desplace o interactúe con otros elementos de la aplicación. Debido a este comportamiento, las sugerencias de cierre automático son la mejor solución cuando una sugerencia debe colocarse en un área desplazable.

El botón Cerrar se quitará automáticamente de una sugerencia de enseñanza que tenga habilitado el descarte por cambio de foco para que los usuarios puedan identificar que su comportamiento es de descarte por cambio de foco.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    IsLightDismissEnabled="True">
</TeachingTip>

Eludir los límites de la raíz de XAML

A partir de Windows 10, versión 1903 (compilación 18362), una sugerencia de enseñanza puede escapar de los límites de la raíz XAML y la pantalla estableciendo la propiedad ShouldConstrainToRootBounds. Cuando esta propiedad está habilitada, una sugerencia de enseñanza no intentará mantenerse en los límites de la raíz de XAML ni de la pantalla y usará siempre la posición especificada en el modo PreferredPlacement. Se recomienda habilitar la propiedad IsLightDismissEnabled y establecer el modo PreferredPlacement más cercano al centro de la raíz de XAML para garantizar la mejor experiencia para los usuarios.

En versiones anteriores de Windows, esta propiedad se omite y el consejo de enseñanza siempre permanece dentro de los límites de la raíz de XAML.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomRight"
    PlacementMargin="-80,-50,0,0"
    ShouldConstrainToRootBounds="False">
</TeachingTip>

Cancelar y aplazar el proceso de cierre

El evento Closing puede usarse para cancelar o aplazar el cierre de una sugerencia de enseñanza. Puede utilizarse para mantener abierto el consejo didáctico o permitir el tiempo necesario para una acción o animación personalizada. Cuando se cancela el cierre de una sugerencia de enseñanza, IsOpen volverá a ser verdadero, sin embargo, permanecerá falso durante el aplazamiento. También se puede cancelar un cierre de manera programática.

Nota:

Si ninguna opción de colocación permite que la sugerencia de enseñanza se muestre por completo, esta recorrerá su ciclo de eventos para forzar un cierre, en lugar de mostrarse sin un botón de cierre accesible. Si la aplicación cancela el evento de cierre, la sugerencia de enseñanza puede permanecer abierta sin un botón Cerrar accesible.

<TeachingTip x:Name="EnableNewSettingsTip"
    Title="New ways to protect your privacy!"
    Subtitle="Please close this tip and review our updated privacy policy and privacy settings."
    Closing="OnTipClosing">
</TeachingTip>

private void OnTipClosing(muxc.TeachingTip sender, muxc.TeachingTipClosingEventArgs args)
{
    if (args.Reason == muxc.TeachingTipCloseReason.CloseButton)
    {
        using(args.GetDeferral())
        {
            bool success = UpdateUserSettings(User thisUsersID);
            if(!success)
            {
                // We were not able to update the settings!
                // Don't close the tip and display the reason why.
                args.Cancel = true;
                ShowLastErrorMessage();
            }
        }
    }
}

Artículos relacionados

• Cuadros de diálogo y controles flotantes