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 hozzáadja MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem és MenuFlyoutSeparator objektumokat a MenuFlyouthoz.

Ezek az objektumok célja:

• MenuFlyoutItem– Azonnali művelet végrehajtása.
• MenuFlyoutSubItem– A menüelemek kaszkádolt listáját tartalmazza.
• 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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

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.

<muxc:MenuBar>
    <muxc: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"/>
    </muxc:MenuBarItem>

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

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

    <muxc:MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </muxc:MenuBarItem>
</muxc: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
• Menüsáv osztály