Всплывающие элементыFlyouts

Всплывающий элемент — это контейнер с возможностью исчезновения, который отображает в качестве содержимого произвольный пользовательский интерфейс.A flyout is a light dismiss container that can show arbitrary UI as its content. Всплывающие элементы могут содержать другие вложенные всплывающие элементы или контекстные меню.Flyouts can contain other flyouts or context menus to create a nested experience.

Контекстное меню внутри всплывающего элемента

Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library

Логотип WinUI

Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Дополнительные сведения см. в разделе о радиусе угла.For more info, see Corner radius. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.For more info, including installation instructions, see Windows UI Library.

API платформы: класс FlyoutPlatform APIs: Flyout class

Выбор правильного элемента управленияIs this the right control?

  • Не используйте всплывающий элемент вместо подсказки или контекстного меню.Don't use a flyout instead of tooltip or context menu. Используйте подсказку, чтобы вывести краткое описание, которое исчезает через определенное время.Use a tooltip to show a short description that hides after a specified time. Для контекстных действий, связанных с элементом пользовательского интерфейса, например копированием или вставкой, используйте контекстное меню.Use a context menu for contextual actions related to a UI element, such as copy and paste.

Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в статье Диалоговые окна и всплывающие элементы.For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

Как создать всплывающий элементHow to create a flyout

Всплывающие элементы связаны с определенными элементами управления.Flyouts are attached to specific controls. Вы можете использовать свойство Placement для указания места отображения всплывающего элемента: вверху, слева, внизу, справа или в центре.You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Если выбрать полный режим размещения, приложение растягивает всплывающий элемент или размещает его в центре окна приложения.If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Некоторые элементы управления, например Button, содержат свойство Flyout, которое можно использовать для привязки всплывающего элемента или контекстного меню.Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

В этом примере создается простой всплывающий элемент, в котором отображается текст при нажатии кнопки.This example creates a simple flyout that displays some text when the button is pressed.

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

Если элемент управления лишен свойства "Flyout", вы можете использовать присоединенное свойство FlyoutBase.AttachedFlyout.If the control doesn't have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. При этом также следует вызвать метод FlyoutBase.ShowAttachedFlyout для отображения всплывающего элемента.When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

В этом примере к изображению добавляется простой всплывающий элемент.This example adds a simple flyout to an image. Когда пользователь нажимает на изображение, приложение отображает всплывающий элемент.When the user taps the image, the app shows the 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);
}

В предыдущих примерах всплывающие элементы определялись внутренне.The previous examples defined their flyouts inline. Вы также можете определить всплывающий элемент как статический ресурс и использовать его с несколькими элементами.You can also define a flyout as a static resource and then use it with multiple elements. В этом примере показано создание более сложного всплывающего элемента, в котором отображается увеличенный вариант изображения при нажатии его эскиза.This example creates a more complicated flyout that displays a larger version of an image when its thumbnail is tapped.

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

Стилизация всплывающего элементаStyle a flyout

Для стилизации всплывающего элемента изменяется его свойство FlyoutPresenterStyle.To style a Flyout, modify its FlyoutPresenterStyle. В этом примере показан абзац создания программы-оболочки текста и делает блок текста доступным для программ чтения с экрана.This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

Всплывающий элемент со специальными возможностями с переносом текста

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

Изменение стиля всплывающих элементов для более наглядного отображенияStyling flyouts for 10-foot experiences

Элементы управления с исчезновением, например всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты.Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на приставке Xbox отображают наложение, затемняющее контрастность и видимость вне области действия пользовательского интерфейса.To provide a visual cue for this behavior, light dismiss controls on Xbox draw an overlay that dims the contrast and visibility of out of scope UI. Это поведение можно изменить с помощью свойства LightDismissOverlayMode.This behavior can be modified with the LightDismissOverlayMode property. По умолчанию всплывающие элементы пользовательского интерфейса отображают наложение с исчезновением на приставке Xbox, но не на других семействах устройств, хотя приложения могут принудительно устанавливать наложению постоянное значение Вкл. или Выкл. .By default, flyouts will draw the light dismiss overlay on Xbox but not other device families, but apps can choose to force the overlay to be always On or always Off.

Всплывающий элемент с наложением яркости

<MenuFlyout LightDismissOverlayMode="On">

Поведение с исчезновениемLight dismiss behavior

Всплывающие элементы можно закрыть с помощью таких действий исчезновения:Flyouts can be closed with a quick light dismiss action, including

  • Коснитесь области за пределами всплывающего элемента.Tap outside the flyout
  • Нажмите клавишу Escape на клавиатуре.Press the Escape keyboard key
  • Нажмите аппаратную или программную системную кнопку "Назад".Press the hardware or software system Back button
  • Нажмите кнопку геймпада "B".Press the gamepad B button

При закрытии касанием этот жест обычно не передается пользовательскому интерфейсу под элементом.When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Например, если за открытым всплывающим элементом отображается кнопка, первое касание приведет к закрытию всплывающего элемента, но кнопка при этом не будет активирована.For example, if there's a button visible behind an open flyout, the user's first tap dismisses the flyout but does not activate this button. Для нажатия кнопки нужно второе касание.Pressing the button requires a second tap.

Вы можете изменить это поведение, назначив кнопку в качестве прозрачного элемента ввода для всплывающего элемента.You can change this behavior by designating the button as an input pass-through element for the flyout. Всплывающий элемент закроется при выполнении действий исчезновения, описанных выше, и передаст событие касания назначенному элементу OverlayInputPassThroughElement.The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement. Такое поведение рекомендуется использовать для ускорения взаимодействия пользователей с функционально схожими элементами.Consider adopting this behavior to speed up user interactions on functionally similar items. Если ваше приложение имеет коллекцию избранного и каждый элемент в коллекции содержит присоединенный всплывающий элемент, логично предположить, что пользователям может потребоваться последовательно взаимодействовать с несколькими всплывающими элементами.If your app has a favorites collection and each item in the collection includes an attached flyout, it's reasonable to expect that users may want to interact with multiple flyouts in rapid succession.

[!NOTE] Старайтесь не назначать прозрачный элемент ввода наложения, так как это приведет к деструктивным действиям.Be careful not to designate an overlay input pass-through element which results in a destructive action. Пользователи привыкают к действиям незаметного исчезновения, которые активируют основной пользовательский интерфейс.Users have become habituated to discreet light dismiss actions which do not activate primary UI. Кнопки "Закрыть", "Удалить" или другие кнопки деструктивных действий не должны активироваться при исчезновении, так как это может стать причиной непредвиденного и ошибочного поведения.Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

В следующем примере будут активированы все три кнопки внутри FavoritesBar при первом касании.In the following example, all three buttons inside FavoritesBar will be activated on the first tap.

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

Получение примера кодаGet the sample code