Megosztás a következőn keresztül:

Lebegő menük

A felugró ablak egy könnyen eltüntethető tároló, amely tetszőleges felhasználói felületet jeleníthet meg tartalomként. A legördülő panelek más legördülő paneleket vagy helyi menüket is tartalmazhatnak a hierarchikus felület létrehozása érdekében.

Ez a megfelelő vezérlő?

  • Ne használjon lebegő panelt a elemleírás vagy a helyi menü helyett. Egy eszköztipp segítségével jelenítsen meg egy rövid leírást, amely egy megadott idő után automatikusan eltűnik. Használja a helyi menüt a felhasználói felület elemeihez kapcsolódó környezeti műveletekhez, például másoláshoz és beillesztéshez.

A lenyíló panelek és a párbeszédpanelek (hasonló vezérlési elemek) használatával kapcsolatos javaslatokért lásd: Párbeszédpanelek és lenyíló panelek.

Lenyíló panel létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a felugró panel működés közben

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Az felugró ablakok adott vezérlőkhöz vannak csatolva. Az Elhelyezés tulajdonság használatával megadhatja, hogy hol jelenik meg felugró panel: felül, balra, alul, jobbra vagy teljes. Ha a Teljes elhelyezési módot választja, az alkalmazás kinyújtja a megjelenő panelt, és középre igazítja az alkalmazásablakban. Egyes vezérlők, például a Button, olyan lebegő menü tulajdonságot biztosítanak, amellyel társíthatsz egy lebegő vagy helyi menüt.

Ez a példa egy egyszerű felugró panelt hoz létre, amely szöveget jelenít meg a gomb megnyomásakor.

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

Ha a vezérlő nem rendelkezik úszópanel-tulajdonsággal, ehelyett használhatja a FlyoutBase.AttachedFlyout csatolt tulajdonságot. Ha ezt teszi, akkor a FlyoutBase.ShowAttachedFlyout metódust is meg kell hívnia a felugró ablak megjelenítéséhez.

Ez a példa egy egyszerű előugró panelt ad hozzá egy képhez. Amikor a felhasználó a képre koppint, az alkalmazás megjeleníti a felugró panelt.

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

Az előző példák beágyazottan határozták meg a úszó paneleket. Statikus erőforrásként is meghatározhat egy legördülő/felugró menüt, majd több elemmel is használhatja. Ez a példa egy bonyolultabb felületet hoz létre, amely egy kép nagyobb verzióját jeleníti meg, amikor a miniatűr meg van érintve.

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

Előugró panel stílusának kialakítása

A Flyout stílusának beállításához módosítsa a FlyoutPresenterStyle-t. Ez a példa egy sortörési szöveget ábrázoló bekezdést mutat be, és akadálymentessé teszi a szövegblokkot egy képernyőolvasó számára.

Akadálymentes úszó panel körbefuttatási szöveggel 

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

Stíluslapok tervezése 10 láb távolságból történő élményekhez

Úgynevezett gyors elbocsátás vezérlők, mint például az úszó felületek, a billentyűzet és a gamepad fókuszát a felhasználói felületükön belül tartják, amíg azokat el nem távolítják. Ha vizuális jelzéssel szeretné ellátni ezt a viselkedést, az Xbox halványító vezérlői olyan átfedést hoznak létre, amely csökkenti a hatókörön kívüli UI elemek kontrasztját és láthatóságát. Ez a viselkedés a LightDismissOverlayMode tulajdonsággal módosítható. Alapértelmezés szerint az úszó panelek a fénykizárási átfedést Xboxon jelenítik meg, más eszközcsaládokon viszont nem, de az alkalmazások dönthetnek úgy, hogy az átfedés mindig On vagy mindig Off legyen.

Felugró ablak elsötétítő réteggel 

<MenuFlyout LightDismissOverlayMode="On">

Enyhe elutasító viselkedés

Az úszó panelek gyors fénykizárási művelettel zárhatók be, beleértve a

  • Koppintson a legördülő menün kívülre
  • Nyomja le az Escape billentyűkombinációt
  • Nyomja le a hardver- vagy szoftverrendszer Vissza gombját
  • Nyomja le a gamepad B gombját

A koppintással történő elutasításkor ez a kézmozdulat általában elnyelődik, és nem továbbítja az alatta lévő felhasználói felületnek. Ha például egy gomb látható egy megnyitott úszó ablak mögött, a felhasználó első koppintása bezárja a úszó panelt, de nem aktiválja ezt a gombot. A gomb megnyomásához egy második koppintás szükséges.

Úgy módosíthatja ezt a viselkedést, hogy a gombot a felugró ablak bemeneti átmenő elemként határozza meg. A lebegő menü a fent ismertetett könnyed bezárási műveletek eredményeként bezárul, és a koppintás eseményét is átadja a kijelölt OverlayInputPassThroughElement-nak. Fontolja meg ezt a viselkedést, hogy felgyorsítsa a felhasználói interakciókat a funkcionálisan hasonló elemeken. Ha az alkalmazás rendelkezik kedvencek gyűjteményével, és a gyűjtemény minden eleme tartalmaz egy csatolt legördülő panelt, ésszerű elvárni, hogy a felhasználók egymás után, gyorsan több legördülő panellel is interakcióba léphetnek.

Megjegyzés:

Ügyeljen arra, hogy ne jelöljön ki átfedő bemeneti átmenő elemet, amely romboló műveletet eredményez. A felhasználók megszokták, hogy diszkrét fényelbocsátó műveleteket hajtanak végre, amelyek nem aktiválják az elsődleges felhasználói felületet. A váratlan és zavaró viselkedés elkerülése érdekében a bezárás, törlés vagy hasonló káros hatású gombok ne aktiválódjanak közvetlen elbocsátáskor.

Az alábbi példában a Kedvencek sáv mindhárom gombja aktiválva lesz az első koppintáskor.

<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