Menü lebegő menü és menüsáv

A menüben és a helyi menükben a menükijelölések a parancsok vagy beállítások listájának megjelenítésére szolgálnak, ha a felhasználó kéri. A menüfelirat egyetlen, beágyazott, felső szintű menüt jelenít meg, amely menüelemeket és almenüket tartalmazhat. Ha több felső szintű menüt szeretne megjeleníteni egy vízszintes sorban, használja a menüsávot (amelyet általában az alkalmazásablak tetején helyez el).

Ez a megfelelő vezérlő?

Menu- és helyi menü scenario azonosításhoz, valamint az menü-úszók és a parancssáv-úszók használatához útmutatást talál a menük és helyi menük című témakörben parancssáv-úszó.

A menü-flyoutok használhatók menüként és környezetfüggő menüként a parancsok rendszerezésére. Tetszőleges tartalom, például értesítés vagy megerősítési kérés megjelenítéséhez használjon párbeszédpanelt vagy lebegő-et.

Ha egy adott parancsot gyakran használnak, és van rá elegendő hely, tekintse meg a gyűjteményben található parancsok példáit, hogy miként helyezhet el egy parancsot közvetlenül a saját elemében, ezáltal elkerülve, hogy a felhasználóknak menüket kelljen böngészniük annak eléréséhez.

Legördülő menü létrehozása

• Fontos API-k:MenuFlyout osztály, ContextFlyout tulajdonság, FlyoutBase.AttachedFlyout tulajdonság

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

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.

Lebegő menü létrehozásához használja a MenuFlyout osztályt. A menü tartalmát úgy határozhatja meg, hogy MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem és MenuFlyoutSeparator objektumokat ad hozzá a MenuFlyouthoz.

Ezek az objektumok célja:

• MenuFlyoutItem– Azonnali művelet végrehajtása.
• MenuFlyoutSubItem– A menüelemek kaszkádolt listáját tartalmazza.
• SplitMenuFlyoutItem – Alapértelmezett művelet végrehajtása a kapcsolódó műveletekkel egy kaszkádolt listában. További információ: Felosztott menüelem hozzáadása.
• ToggleMenuFlyoutItem– Egy opció be- vagy kikapcsolása.
• RadioMenuFlyoutItem– Váltás a kölcsönösen kizáró menüelemek között.
• MenuFlyoutSeparator– A menüelemek vizuális elválasztása.

Ez a példa létrehoz egy MenuFlyout, és a legtöbb vezérlő számára elérhető ContextFlyout tulajdonságot használja a MenuFlyout helyi menüként való megjelenítéséhez.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

A következő példa majdnem azonos, de ahelyett, hogy a ContextFlyout tulajdonságot használja a MenuFlyout osztály helyi menüként való megjelenítéséhez, a példa a FlyoutBase.ShowAttachedFlyout tulajdonságot használja menüként való megjelenítéséhez.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

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

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Felosztott menüelem hozzáadása

• Fontos API-k:SplitMenuFlyoutItem osztály, Items tulajdonság

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

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.

A SplitMenuFlyoutItem menüelőugró ablakban osztott gombos működést biztosít. Két részből áll:

• A fő rész egy alapértelmezett műveletet hajt végre, például egy MenuFlyoutItem. Ha azt szeretné, hogy reagáljon, amikor a felhasználó kiválasztja, kezelje a Click eseményt, vagy állítsa be a Command tulajdonságot.
• A másodlagos rész megnyitja a kapcsolódó beállítások almenüjét, például a MenuFlyoutSubItemet.

Akkor használjon osztott menüelemet, ha egy parancsnak van egy általános alapértelmezett művelete és néhány változata, például egy fájl mentése különböző formátumokban. A menü rövidebb marad, mint ha az egyes változatokat külön elemként sorolná fel.

Megjegyzés:

A SplitMenuFlyoutItem használatához Windows App SDK 1.8.6-os vagy újabb verzióra van szükség.

Ez a példa a WinUI 3 Gallery alkalmazásból két osztott menüelemet ad hozzá a MenuFlyouthoz. Az almenüelemek az Items tulajdonságban találhatók. Mivel Items a SplitMenuFlyoutItem XAML tartalomtulajdonsága, az almenüelemeket közvetlenül a SplitMenuFlyoutItem elemen belül is hozzáadhatja.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Az almenü menuFlyoutSeparator objektumokat és más SplitMenuFlyoutItem objektumokat is tartalmazhat. Ha a Items gyűjtemény üres, a másodlagos rész le van tiltva.

Az almenü testreszabásához állítsa a SubMenuPresenterStyle beállítást az almenü megjelenítőjének stílusára, a SubMenuItemStyle pedig az almenü elemeinek stílusára.

A felhasználók a billentyűzet használatakor külön-külön használják a két részt:

• Ha az elsődleges rész fókuszban van, nyomja le az Enter vagy a Szóköz billentyűt az alapértelmezett művelet végrehajtásához, vagy a Jobbra nyílbillentyűvel helyezze a fókuszt a másodlagos részre.
• Ha a másodlagos rész fókuszban van, nyomja le az Enter billentyűt vagy a Jobbra nyílbillentyűt az almenü megnyitásához.
• Ha az almenü meg van nyitva, nyomja meg az Esc vagy a Balra nyílbillentyűt az almenü bezárásához.

A képernyőolvasók külön is felolvassák a két részt. A másodlagos rész egy gombként lesz bejelentve, amely a menüelemhez tartozó további lehetőségeket biztosít.

Icons

Fontolja meg a menüelem ikonok megadását a következőhöz:

• A leggyakrabban használt elemek.
• Menüelemek, amelyek ikonja szabványos vagy jól ismert.
• Menüelemek, amelyek ikonja jól szemlélteti a parancsot.

Nem szükséges ikonokat megadnia olyan parancsokhoz, amelyek nem rendelkeznek szabványos vizualizációval. A titkosítási ikonok nem hasznosak, vizuális zsúfoltságokat hozhatnak létre, és megakadályozhatják, hogy a felhasználók a fontos menüelemekre összpontosítanak.

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

Jótanács

A MenuFlyoutItem ikonjának mérete 16x16px. Ha SymbolIcont, FontIcont vagy PathIcont használ, az ikon automatikusan a megfelelő méretre skálázódik, a hűség elvesztése nélkül. Ha BitmapIcont használ, ügyeljen arra, hogy az ikon 16 x 16 px legyen.

Enyhe figyelmen kívül hagyás

Az olyan könnyen bezárható vezérlők, mint a menük, a helyi menük és más lebegő panelek, a billentyűzet és a gamepad fókuszát az átmeneti felhasználói felületen belül tartják, amíg azokat el nem küldik. Ha vizuális jelzést szeretne adni ehhez a viselkedéshez, a Xbox egyszerűsített elvetési vezérlői olyan átfedést rajzolnak, amely halványítja a hatókörön kívüli felhasználói felület láthatóságát. Ez a viselkedés a LightDismissOverlayMode tulajdonsággal módosítható. Az átmeneti UI-k általában a "light dismiss" átfedést az Xboxon (Auto) jelenítik meg, de más eszközcsoportok esetén nem. Beállíthatja, hogy az átfedés legyen mindig bekapcsolva, vagy mindig kikapcsolva.

<MenuFlyout LightDismissOverlayMode="Off" />

Menüsáv létrehozása

• Fontos API-k:Menüsáv osztály. MenuBarItem osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a menüsáv működését

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.

Ugyanazokkal az elemekkel hozhat létre menüket menüsávban, mint lebegő menüben. A MenuFlyoutItem objektumainak csoportosítása helyett azonban egy MenuBarItem elembe kell csoportosítani őket. Az egyes MenuBarItem-ek a menüsávban felső szintű menükként vannak hozzáadva.

Megjegyzés:

Ez a példa csak a felhasználói felületi struktúra létrehozását mutatja be, de egyik parancs implementálását sem mutatja be.

<MenuBar>
    <MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

Kapcsolódó cikkek

• A Windows alkalmazások tervezésének alapjai
• Menük és helyi menük
• Gyűjtemények és listák környezetfüggő utasításkezelése
• MenuFlyout osztály
• SplitMenuFlyoutItem osztály
• Menüsáv osztály