Inicio rápido: agregar un control flotante (XAML)

Applies to Windows and Windows Phone

Aprende a usar un Flyout para mostrar de manera temporal interfaz de usuario relevante para el contexto del usuario. Úsalo para recopilar información del usuario, mostrar más detalles sobre un elemento o pedir al usuario que confirme una acción.

Requisitos previos

  • Windows 8.1 o Windows Phone 8.1
  • Microsoft Visual Studio 2013
  • Damos por hecho que sabes agregar controles a una aplicación básica de Windows en tiempo de ejecución con C++, C# o Visual Basic. Para obtener instrucciones sobre cómo agregar un control, consulta Inicio rápido: Agregar controles y administrar eventos.

Cuándo usar un control flotante

Un control Flyout muestra interfaz de usuario ligera (que se denomina control flotante) que es informativa o requiere la interacción del usuario. A diferencia de los cuadros de diálogo, un control flotante puede descartarse haciendo clic o pulsando fuera de él. Un control flotante debe mostrarse solo como respuesta a la pulsación o clic del usuario. No descartes un control flotante mediante programación, a no ser que el usuario haya presionado un botón de comando o haya seleccionado un elemento de menú en el control flotante. El usuario puede descartar un control flotante en cualquier momento sin realizar una acción con solo pulsar o hacer clic fuera de él, o presionando ESC.

Usa un control flotante para lo siguiente:

  • Recopilar información: si el usuario selecciona una acción que necesita más datos, como elegir una opción o escribir información, puedes colocar esa UI en un control flotante para mantener al usuario en el contexto original.
  • Mostrar más información: muestra más detalles sobre un elemento de la pantalla en el que esté interesado el usuario.
  • Advertencias y confirmaciones: advierte al usuario antes de que lleven a cabo una acción potencialmente destructiva y deja que confirmen la acción.

Para mostrar un menú de elementos entre los que el usuario puede elegir, usa MenuFlyout. Consulta el tema de inicio rápido: agregar un menú flotante.

No uses un Flyout en lugar de ToolTip o menú contextual. Usa ToolTip para mostrar una descripción breve que se oculta tras un tiempo determinado. Usa un menú contextual para acciones contextuales relacionadas con la selección de texto, como copiar y pegar.

Para obtener más información, consulta Directrices y lista de comprobación de controles flotantes.

Usar un control flotante con un control de botón

Es habitual adjuntar un control flotante a un botón, de forma que el control Button tenga una propiedad Flyout para simplificar las tareas de adjuntar y abrir un control Flyout. Un control flotante adjunto a un botón se abre automáticamente cuando el usuario hace clic en el botón. No es necesario controlar eventos para abrir el control flotante. (Esto incluye los controles derivados de Button, como AppBarButton).

El ejemplo siguiente muestra un Flyout adjunto a un Button. El control flotante advierte al usuario que los elementos se eliminarán de forma permanente y permite que confirme o cancele la eliminación.

  1. Declara un control Button en lenguaje XAML.
  2. Adjunta un Flyout a la propiedad Flyout de los botones.
  3. Declara el contenido del control flotante. El control flotante puede tener solo un elemento de contenido, por lo tanto, las interfaces de usuario complejas deben estar encapsuladas en un panel raíz, como StackPanel o Grid.
  4. Controla el evento Click del botón dentro del control flotante para realizar la acción cuando el usuario la confirme.

    Cuando el usuario confirme la acción, oculta el control flotante mediante programación, llamando al método Hide.

    Para cancelar la acción, el usuario puede descartar el control flotante pulsando fuera de él o presionando ESC.


<Button x:Name="DeleteButton" Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BaseTextBlockStyle}">
                    All items will be permanently removed from your cart.
                </TextBlock>
                <Button Click="DeleteConfirmation_Click" Margin="0,5,0,0">
                    Empty my cart
                </Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>


private void DeleteConfirmation_Click(object sender, RoutedEventArgs e)
{
    // Dismiss the Flyout after the action is confirmed.
    DeleteButton.Flyout.Hide();
            
    // Delete content of cart...
}

Cuando el usuario hace clic en el botón, el control flotante abierto tiene este aspecto. El usuario puede hacer clic en el botón incluido en el control flotante para continuar o hacer clic fuera del control flotante para descartarlo y cancelar la acción.

Un botón con un control flotante

Usar un control flotante con otros elementos de interfaz de usuario

Puedes adjuntar un control Flyout a cualquier objeto FrameworkElement mediante la propiedad adjunta FlyoutBase.AttachedFlyout. Si lo haces, debes responder a una interacción en FrameworkElement, como el evento Tapped, y abrir el control Flyout en tu código.

Este ejemplo muestra cómo usar un Flyout compartido para mostrar una vista previa cuando el usuario pulsa una Image.

  1. Declara Flyout como StaticResource y asígnale un valor de atributo x:Key.
  2. Para cada elemento que comparte este Flyout, establece la propiedad adjunta FlyoutBase.AttachedFlyout al recurso Flyout.
  3. Controla el evento Tapped para cada elemento que usa el control flotante. En el controlador de eventos, llama al método FlyoutBase.AttachedFlyout y pasa el elemento pulsado (sender) como parámetro.


<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The DataContext of the Image that the flyout is attached to must be the Image's Source. -->
        <Image Source="{Binding Path=Source}" MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
        <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                <Setter Property="Background" Value="Black"/>
                <Setter Property="BorderBrush" Value="Gray"/>
                <Setter Property="BorderThickness" Value="5"/>
                <Setter Property="MinHeight" Value="300"/>
                <Setter Property="MinWidth" Value="300"/>
            </Style>
        </Flyout.FlyoutPresenterStyle>
    </Flyout>
</Page.Resources>

... 

<!-- Assign the flyout to each element that shares it. -->
<StackPanel>
    <Image Source="Assets/cliff.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/grapes.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/rainier.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>
...


private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  
}

Cuando un usuario pulsa una imagen pequeña, se muestra una vista previa grande en un control flotante como este.

Una imagen con un control flotante

Mostrar y ocultar un control flotante

Solo puede representarse un control flotante por vez. Cuando un control flotante se abre, se descarta automáticamente cualquier otro que ya esté abierto.

Como se muestra en el primer ejemplo de este tutorial, debes descartar un control flotante llamando a su método Hide cuando se realiza una acción.



    DeleteButton.Flyout.Hide();


No descartes un control flotante mediante programación, a no ser que el usuario haya presionado un botón de comando o haya seleccionado un elemento de menú en el control flotante. No debes descartar el control flotante si el usuario solo ha cambiado la configuración. El control flotante se descarta automáticamente cuando el usuario cancela una acción al hacer clic fuera de él.

Un control flotante adjunto a un Button se abre automáticamente al hacer clic en el botón. Cuando un control flotante se adjunta a cualquier otro elemento, debes abrir el control flotante en respuesta a un evento, por lo general, un evento Tapped. En el controlador de eventos, llama al método FlyoutBase.ShowAttachedFlyout. Esto se muestra en el siguiente ejemplo del tutorial.



    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  


Un control flotante normalmente se ubica cerca de los elementos a los que se adjunta para poder mantener al usuario en su contexto actual. Si tiene sentido ubicar el control flotante cerca de un elemento relacionado distinto del elemento que lo invocó, puedes llamar a ShowAt Para obtener más información y ejemplo, consulta el tema sobre el método ShowAt.

Compartir un control flotante

Un Flyoutpuede declararse en XAML ya sea como alineado o como un recurso que puede compartirse. El primer ejemplo de este tutorial muestra cómo declarar un Flyout alineado en XAML de un botón. Este Flyout solo puede adjuntarse a Button, donde se declara.

El segundo ejemplo de este tutorial muestra de qué manera declarar un Flyout como StaticResource para usarlo con distintos elementos. En este ejemplo, el DataContext de la Image imagen principal se establece en él mismo.


<Image DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

Flyout hereda el DataContext de su elemento delimitador, por lo que puedes enlazar la propiedad Source de la Image en el Flyout con la propiedad Source del DataContext. De esta manera, un único Flyout muestra una vista previa de cualquier Image que el usuario pulse.



<Flyout>
    <Image Source="{Binding Path=Source}"/>
...
</Flyout>

Este ejemplo muestra la sintaxis para declarar un Flyout alineado o como recurso que puede compartirse.



<!-- Inline flyouts -->
<!-- Flyout declared inline on a Button -->
<Button>
    <Button.Flyout>
        <Flyout>
        <!-- Flyout content -->
        </Flyout>
    </Button.Flyout>
</Button>

<!-- Flyout declared inline on a FrameworkElement -->
<TextBlock>
    <FlyoutBase.AttachedFlyout>
        <Flyout>
        <!-- Flyout content -->
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>


<!-- Shared resource flyouts -->
<!-- A shared Flyout resource -->
<Page.Resources>
    <Flyout x:Key="SharedFlyoutResource">
        <!-- Flyout content -->
    </Flyout>
</Page.Resources>

<!-- A shared Flyout resource assigned to a Button -->
<Button Flyout="{StaticResource SharedFlyoutResource}"/>

<!-- A shared Flyout resource assigned to a FrameworkElement -->
<TextBlock FlyoutBase.AttachedFlyout="{StaticResource SharedFlyoutResource}"/>


Colocar un control flotante

  • Applies to Windows

De manera predeterminada, un Flyout se muestra arriba del elemento al que se adjunta. Puedes cambiar la ubicación preferida del control flotante estableciendo la propiedad Placement en un valor FlyoutPlacementMode de Top, Bottom, Left o Right. El control flotante se muestra mediante la ubicación preferida si hay espacio en la pantalla. De lo contrario, como cuando el elemento está cerca del borde de la pantalla, el control flotante se ubica con el orden de retroceso:

UbicaciónOrden de retroceso
TopTop > Bottom > Left > Right
BottomBottom > Top > Left > Right
LeftLeft > Right > Top > Bottom
RightRight > Left > Top > Bottom

 

En el ejemplo del control flotante de imagen que se mostró antes, la propiedad Placement del control flotante se establece en Right, como puedes ver aquí.



    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
    ...
    </Flyout>


  • Applies to Windows Phone

En Windows Phone, hay un Flyout en la parte superior de la pantalla de forma predeterminada. Puedes cambiar la propiedad Placement a FlyoutPlacementMode.Full para hacer que el control flotante ocupe toda la pantalla. Los valores Top, Bottom, Left y Right no tienen efecto alguno en las aplicaciones de Windows Phone.

Dar estilo a un control flotante

El cuerpo de un Flyout siempre se muestra con el tema claro o de contraste alto. No puedes aplicar estilo a un control Flyout directamente.

Puedes modificar algunos aspectos de la apariencia del control flotante, como el fondo, el borde, las restricciones de tamaño y la configuración de ScrollViewer, aplicando estilo al FlyoutPresenter del control flotante.

En el ejemplo del control flotante de imagen que se mostró antes, la apariencia del control flotante se modifica estableciendo FlyoutPresenterStyle, como puedes ver aquí.



        <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                <Setter Property="Background" Value="GhostWhite"/>
                <Setter Property="BorderThickness" Value="5"/>
                <Setter Property="MinHeight" Value="300"/>
                <Setter Property="MinWidth" Value="300"/>
            </Style>
        </Flyout.FlyoutPresenterStyle>


Muestras

Para saber más sobre el control Flyout, descarga la muestra en XAML de Flyout y MenuFlyout.

Resumen y pasos siguientes

Has aprendido a usar un control Flyout para que el usuario pueda ver de manera temporal interfaz de usuario contextual.

Aprende a usar un control MenuFlyout para mostrar un menú contextual de elementos a los usuarios en el tutorial Inicio rápido: agregar un control flotante de menú.

 

 

Mostrar:
© 2014 Microsoft