Sdílet prostřednictvím

Flyouts

Roletka je lehce uzavíratelný kontejner, který může zobrazit libovolné uživatelské rozhraní jako svůj obsah. Vyskakovací okna mohou obsahovat další vyskakovací okna nebo kontextové nabídky pro vytvoření vnořeného prostředí.

Je to správná kontrola?

  • Nepoužívejte výklopný panel místo popisku nebo kontextové nabídky. Pomocí popisu zobrazíte krátký popis, který se skryje po zadaném čase. Kontextová nabídka umožňuje provádět kontextové akce související s prvkem uživatelského rozhraní, jako je kopírování a vložení.

Doporučení, kdy použít vyskakovací nabídku vs. kdy použít dialogové okno, podobný ovládací prvek, najdete v tématu Dialogy a vyskakovací nabídky.

Vytvoření informačního rámečku

  • Důležitá rozhraní API: třída Flyout, vlastnost Button.Flyout

Otevřete aplikaci Galerie WinUI 3 a podívejte se na panel v akci

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Informační rámečky jsou připojené ke konkrétním ovládacím prvkům. Pomocí vlastnosti Umístění můžete určit, kde se má zobrazit výběhové okno: Nahoře, Vlevo, Dole, Vpravo nebo Celoplošně. Pokud vyberete režim úplného umístění, aplikace roztáhne informační panel a umístí ho do okna aplikace. Některé ovládací prvky, například Tlačítko, poskytují vlastnost vyjížděcí nabídky, kterou můžete použít k přidružení vyjížděcí nabídky nebo kontextové nabídky.

Tento příklad vytvoří jednoduchý informační panel, který při stisknutí tlačítka zobrazí nějaký text.

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

Pokud ovládací prvek nemá kontextovou vlastnost, můžete místo toho použít vlastnost FlyoutBase.AttachedFlyout připojenou vlastnost. Když to uděláte, musíte také volat FlyoutBase.ShowAttachedFlyout metodu pro zobrazení informačního rámečku.

Tento příklad k obrázku přidá jednoduchou rozbalovací nabídku. Když uživatel klepne na obrázek, zobrazí se v aplikaci kontextová nabídka.

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

Předchozí příklady definovaly své rozbalovací nabídky přímo. Kontextový popisek můžete také definovat jako statický prostředek a pak ho použít s více prvky. Tento příklad vytvoří složitější informační panel, který při klepnutí na miniaturu zobrazí větší verzi obrázku.

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

Styl informačního rámečku

Chcete-li styl Flyoutu, upravte jeho FlyoutPresenterStyle. Tento příklad ukazuje odstavec s obtékajícím textem a umožňuje, aby byl blok textu přístupný pro čtečku obrazovky.

přístupné vyskakovací okno s obtékajícím textem 

<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 vyskakovacích oken pro desetistopé prostředí

Ovládací prvky s lehkým zrušením, jako jsou rozbalovací nabídky, zachytí zaostření klávesnice a herního ovladače uvnitř své dočasné uživatelské rozhraní, dokud nejsou zrušeny. Chcete-li poskytnout vizuální upozornění na toto chování, na Xboxu ovládací prvky pro zhasnutí světla aktivují překrytí, které ztmaví kontrast a viditelnost prvků uživatelského rozhraní mimo aktuální oblast. Toto chování lze upravit pomocí LightDismissOverlayMode vlastnosti. Ve výchozím nastavení informační rámečky nakreslí překrytí světla na Xbox, ale ne jiné rodiny zařízení, ale aplikace se můžou rozhodnout, že překrytí bude vždy On nebo vždy Off.

rozbalovacího s tlumeným překryvem 

<MenuFlyout LightDismissOverlayMode="On">

Chování při lehkém zavření

Dialogová okna lze zavřít pomocí rychlé akce skrytí, včetně

  • Klepněte mimo roletku
  • Stiskněte klávesu Escape
  • Stiskněte tlačítko Zpět hardwarového nebo softwarového systému.
  • Stiskněte tlačítko gamepad B.

Při zavření klepnutím se toto gesto obvykle absorbuje a nepředá se do uživatelského rozhraní pod ním. Pokud je například tlačítko viditelné za otevřeným informačním panelem, první klepnutí uživatele zavře tento panel, ale tlačítko neaktivuje. Stisknutí tlačítka vyžaduje druhé klepnutí.

Toto chování můžete změnit tak, že tlačítko označíte jako prvek umožňující průchod vstupu pro vyskakovací okno. Rozbalovací okno se zavře v důsledku výše popsaných akcí lehkého zavření a také předá událost klepnutí na určenou OverlayInputPassThroughElement. Zvažte přijetí tohoto chování, abyste urychlili interakce uživatelů s funkčně podobnými položkami. Pokud má vaše aplikace kolekci oblíbených položek a každá položka v kolekci obsahuje připojené vyskakovací okno, je vhodné očekávat, že uživatelé mohou chtít rychle manipulovat s několika takovými okny za sebou.

Poznámka:

Dávejte pozor, abyste neoznačili prvek pro průchozí vstup překrytí, který vede k destruktivní činnosti. Uživatelé si zvykli na nenápadné zamítnutí akcí, které neaktivují hlavní UI. Tlačítka jako Zavření, Odstranění nebo jiná podobně destruktivní tlačítka by se neměla aktivovat při lehkém zrušení, aby se předešlo nečekanému a rušivému chování.

V následujícím příkladu se všechna tři tlačítka v panelu Oblíbených aktivují při prvním klepnutí.

<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);
{
  • Last updated on