Flyouts

Um flyout é um contentor de dispensa leve que pode mostrar uma interface arbitrária como seu conteúdo. Os flyouts podem conter outros flyouts ou menus de contexto para criar uma experiência aninhada.

Será este o controlo correto?

• Não uses um flyout em vez de tooltip ou menu de contexto. Utilize uma dica de ferramenta para mostrar uma descrição curta que se oculta após um tempo determinado. Use um menu de contexto para ações contextuais relacionadas com um elemento da interface, como copiar e colar.

Para recomendações sobre quando usar um flyout vs. quando usar um diálogo (um controlo semelhante), veja Diálogos e flyouts.

Criar um flyout

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Os flyouts estão ligados a comandos específicos. Pode usar a propriedade Placement para especificar onde aparece um flyout: Cima, Esquerda, Baixo, Direito ou Completo. Se optares pelo modo de colocação completa, a aplicação irá esticar o flyout e centrá-lo dentro da janela da aplicação. Alguns controlos, como Botão, fornecem uma propriedade Flyout que pode usar para associar um menu desdobrável ou menu de contexto.

Este exemplo cria um simples flyout que mostra algum texto quando o botão é pressionado.

<Button Content="Click me">
  <Button.Flyout>
     <Flyout>
        <TextBlock Text="This is a flyout!"/>
     </Flyout>
  </Button.Flyout>
</Button>

Se o controlo não tiver uma propriedade flyout, pode usar a propriedade associada FlyoutBase.AttachedFlyout em vez disso. Ao fazer isto, também precisa de chamar o método FlyoutBase.ShowAttachedFlyout para mostrar o flyout.

Este exemplo adiciona um simples flyout a uma imagem. Quando o utilizador toca na imagem, a aplicação mostra o flyout.

<Image Source="Assets/cliff.jpg" Width="50" Height="50"
  Margin="10" Tapped="Image_Tapped">
  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <TextBlock Text="This is some text in a flyout."  />
    </Flyout>
  </FlyoutBase.AttachedFlyout>
</Image>

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

Os exemplos anteriores definiram diretamente os seus flyouts. Também podes definir um flyout como um recurso estático e depois usá-lo com múltiplos elementos. Este exemplo cria um flyout mais complicado que mostra uma versão maior de uma imagem quando a miniatura é tocada.

<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The flyout's DataContext must be the Image Source
             of the image the flyout is attached to. -->
        <Image Source="{Binding Path=Source}"
            MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
    </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);
}

Estilizar um flyout

Para estilizar um Flyout, modifique o seu FlyoutPresenterStyle. Este exemplo mostra um parágrafo de texto envolvente e torna o bloco de texto acessível a um leitor de ecrã.

<Flyout>
  <Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
      <Setter Property="ScrollViewer.HorizontalScrollMode"
          Value="Disabled"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
      <Setter Property="IsTabStop" Value="True"/>
      <Setter Property="TabNavigation" Value="Cycle"/>
    </Style>
  </Flyout.FlyoutPresenterStyle>
  <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</Flyout>

Flyouts de styling para experiências de 3 metros

Controlos de descarte leve, como menus suspensos, capturam o foco do teclado e do comando de jogo dentro da sua interface temporária até serem dispensados. Para fornecer uma pista visual para este comportamento, os controlos de descarte com luz na Xbox desenham uma sobreposição que diminui o contraste e a visibilidade da interface fora do alcance. Este comportamento pode ser modificado com a LightDismissOverlayMode propriedade. Por defeito, os flyouts desenham a sobreposição de descarte de luz na Xbox, mas não noutras famílias de dispositivos. As aplicações podem optar por forçar que a sobreposição esteja sempre ligada ou sempre desligada.

<MenuFlyout LightDismissOverlayMode="On">

Comportamento de desvalorização leve

Os flyouts podem ser encerrados com uma ação rápida e leve de eliminação, incluindo

• Toque fora do painel deslizante
• Pressione a tecla do teclado Escape
• Pressione o botão de recuo do sistema de hardware ou software
• Pressiona o botão B da manete

Ao descartar com um toque, este gesto é normalmente absorvido e não passado para a interface subjacente. Por exemplo, se houver um botão visível atrás de um flyout aberto, o primeiro toque do utilizador desativa o flyout, mas não ativa esse botão. Carregar no botão requer um segundo toque.

Pode alterar este comportamento designando o botão como elemento de passagem de entrada para o flyout. O flyout fecha-se como resultado das ações de descarte de luz descritas acima e também transmitirá o evento de toque para o local designado OverlayInputPassThroughElement. Considere adotar este comportamento para acelerar as interações dos utilizadores em itens funcionalmente semelhantes. Se a sua aplicação tiver uma coleção de favoritos e cada item da coleção incluir um flyout anexado, é razoável esperar que os utilizadores queiram interagir rapidamente com vários flyouts.

No exemplo seguinte, os três botões dentro da Barra de Favoritos serão ativados no primeiro toque.

<Page>
    <Page.Resources>
        <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
                OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
            <StackPanel>
                <HyperlinkButton Content="Washington Trails Association"/>
                <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
            <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>
            <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
            <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
        </StackPanel>
        <ScrollViewer Grid.Row="1">
            <WebView x:Name="WebContent"/>
        </ScrollViewer>
    </Grid>
</Page>

private void Folder2_Click(object sender, RoutedEventArgs e)
{
     Flyout flyout = new Flyout();
     flyout.OverlayInputPassThroughElement = FavoritesBar;
     ...
     flyout.ShowAt(sender as FrameworkElement);
{

UWP e WinUI 2

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

Artigos relacionados

• Dicas de ferramentas
• Menus e menu de contexto
• da classe Flyout
• classe ContentDialog