Wysuwane menu

Okno wysuwane to kontener, który można łatwo zamknąć i który może wyświetlać dowolny interfejs użytkownika jako zawartość. Okna wysuwane mogą zawierać inne okna wysuwane lub menu kontekstowe, aby utworzyć zagnieżdżone doświadczenie.

Czy jest to właściwa kontrola?

• Nie używaj menu rozwijanego zamiast etykietki narzędziowej lub menu kontekstowego . Użyj etykietki narzędzia, aby wyświetlić krótki opis, który ukrywa się po upływie określonego czasu. Użyj menu kontekstowego dla akcji kontekstowych związanych z elementem interfejsu użytkownika, takim jak kopiowanie i wklejanie.

Aby uzyskać zalecenia dotyczące używania okna wysuwanego a kiedy używać okna dialogowego (podobnej kontrolki), zobacz Okna dialogowe i wysuwane.

Utwórz wysuwaną kartę

• ważnych interfejsów API: klasa Flyout, właściwość Button.Flyout

Otwórz aplikację Galerii WinUI 3 i zobacz działający element wysuwany

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze sklepu Microsoft Store lub pobierz kod źródłowy w witrynie GitHub

Wyskakujące elementy są wiązane z określonymi kontrolkami. Możesz użyć właściwości Umieszczanie, aby określić, gdzie jest wyświetlane okno wysuwane: Górna, Lewa, Dolna, Prawa lub Pełna. Jeśli wybierzesz tryb pełnego rozmieszczenia, aplikacja rozciąga okno wysuwane i wyśrodkowuje je w oknie aplikacji. Niektóre kontrolki, takie jak Button, udostępniają właściwość Flyout, której można użyć do skojarzenia z menu wysuwanym lub menu kontekstowym .

W tym przykładzie zostanie utworzone proste okno wysuwane, które wyświetla jakiś tekst po naciśnięciu przycisku.

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

Jeśli kontrolka nie ma właściwości wysuwanej, możesz zamiast tego użyć właściwości FlyoutBase.AttachedFlyout dołączonej. Gdy to zrobisz, należy również wywołać metodę FlyoutBase.ShowAttachedFlyout, aby wyświetlić flyout.

Ten przykład dodaje proste okno wysuwane do obrazu. Gdy użytkownik naciągnie obraz, aplikacja wyświetli okno wysuwane.

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

W poprzednich przykładach zdefiniowano okienka rozwijane w wierszu. Możesz również zdefiniować okno wysuwane jako zasób statyczny, a następnie użyć go z wieloma elementami. W tym przykładzie zostanie utworzone bardziej skomplikowane okno wysuwane, które wyświetla większą wersję obrazu po naciśnięciu miniatury.

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

Stylizowanie wysuwanego panelu

Aby stylować wysuwane okno, zmodyfikuj FlyoutPresenterStyle. W tym przykładzie pokazano zawijanie tekstu i sprawiono, że blok tekstu jest dostępny dla czytnika ekranu.

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

Stylizacja menu rozwijanych dla dziesięciostopowych doświadczeń

Lekkie kontrolki odrzucania, takie jak wysuwana pułapka skupiająca klawiaturę i gamepad, koncentrują fokus wewnątrz tymczasowego interfejsu użytkownika do czasu, aż zostaną zamknięte. Aby zapewnić wizualną wskazówkę dla tego zachowania, lekkie kontrolki odrzucania na konsoli Xbox rysują nakładkę, która przyciemnia kontrast i widoczność poza zakresem interfejsu użytkownika. To zachowanie można zmodyfikować za pomocą właściwości LightDismissOverlayMode. Domyślnie wysuwane elementy wyświetlą delikatną nakładkę odrzucającą na konsoli Xbox, ale nie na innych rodzinach urządzeń. Jednakże, aplikacje mogą wymusić, aby nakładka była zawsze Włączone na lub zawsze Wyłączone.

<MenuFlyout LightDismissOverlayMode="On">

Zachowanie lekkiego odrzucania

Wysuwane elementy można zamknąć za pomocą szybkiej akcji odrzucania światła, w tym

• Naciśnij poza wysuwane okienko
• Naciśnij Escape klawiatury
• Naciśnij przycisk Wstecz w sprzęcie lub oprogramowaniu
• Naciśnij przycisk gamepad B

Podczas odrzucania za pomocą naciśnięcia ten gest jest zwykle wchłaniany i nie przekazywany do interfejsu użytkownika poniżej. Jeśli na przykład jest widoczny przycisk za otwartym menu wysuwanym, pierwsze naciśnięcie użytkownika zamyka okno wysuwane, ale nie aktywuje tego przycisku. Naciśnięcie przycisku wymaga drugiego naciśnięcia.

To zachowanie można zmienić, wyznaczając przycisk jako element przekazywania danych wejściowych dla wysuwanego menu. Okno wysuwane zostanie zamknięte w wyniku akcji zwolnienia światła opisanych powyżej, a także przekaże zdarzenie naciśnięcia do wyznaczonego OverlayInputPassThroughElement. Rozważ wdrożenie tego zachowania, aby przyspieszyć interakcje użytkowników na elementach podobnych funkcjonalnie. Jeśli aplikacja ma kolekcję ulubionych, a każdy element w kolekcji zawiera dołączone menu rozwijane, rozsądnie jest oczekiwać, że użytkownicy mogą chcieć wchodzić w interakcje z wieloma takimi oknami w krótkim odstępie czasu.

Notatka

Należy zachować ostrożność, aby nie wyznaczyć elementu przekazywania danych w nakładce, który spowoduje działanie destrukcyjne. Użytkownicy przyzwyczaili się do dyskretnych akcji odrzucania światła, które nie aktywują podstawowego interfejsu użytkownika. Przyciski zamykania, usuwania lub podobnie destrukcyjne nie powinny być aktywowane przy odrzuceniu światła, aby uniknąć nieoczekiwanego i destrukcyjnego zachowania.

W poniższym przykładzie wszystkie trzy przyciski wewnątrz paska Ulubione zostaną aktywowane przy pierwszym naciśnięciu.

<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 i WinUI 2

Ważny

Informacje i przykłady przedstawione w tym artykule są zoptymalizowane pod kątem aplikacji korzystających z zestawu Windows App SDK i WinUI 3, ale ogólnie mają zastosowanie do aplikacji platformy UWP korzystających z interfejsu WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Interfejsy API dla tej kontrolki znajdują się w przestrzeni nazw Windows.UI.Xaml.Controls.

• interfejsy API platformy UWP:klasa Flyout, właściwość Button.Flyout
• Otwórz aplikację Galeria WinUI 2 i zobacz działanie okna wysuwanego. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze sklepu Microsoft Store lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszych WinUI 2, aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Promień narożnika.

Powiązane artykuły

• podpowiedzi
• menu i menu kontekstowe
• , klasa wysuwana
• klasy ContentDialog