Legördülő- é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 egy párbeszédpanelt vagy egy kibonthatópanelt.

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 Gallery alkalmazás interaktív példákat tartalmaz a legtöbb WinUI 3 vezérlőre, funkcióra és képességre. Szerezd meg az alkalmazást a Microsoft Store-ból , vagy a forráskódot a GitHubról .

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

Ikonok

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>

Borravaló

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 elbocsátá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. A vizuális jelzés érdekében az Xbox könnyen elvethető vezérlői megjelenítenek egy átfedést, amely elhalvá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ó. Alapértelmezés szerint az átmeneti UI-k az Xbox (Automatikus) esetében rajzolják meg a fénykizárási átfedést, más eszközcsaládokat azonban 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 Gallery alkalmazás interaktív példákat tartalmaz a legtöbb WinUI 3 vezérlőre, funkcióra és képességre. Szerezd meg az alkalmazást a Microsoft Store-ból , vagy a forráskódot a GitHubról .

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.

Jegyzet

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>

UWP és WinUI 2

Fontos

A cikkben szereplő információk és példák a Windows App SDK és a WinUI 3 használó alkalmazásokra vannak optimalizálva, de általánosan alkalmazhatók a WinUI 2 használó UWP-alkalmazásokra. A platformspecifikus információkért és példákért tekintse meg az UWP API-referenciát.

Ez a szakasz az UWP- vagy WinUI 2-alkalmazások vezérlőjének használatához szükséges információkat tartalmazza.

A menüsávhoz a Windows 10 1809-es (SDK 17763) vagy újabb verziója, illetve a WinUI 2 szükséges.

Az UWP-alkalmazások MenuFlyout és MenuBar vezérlői a WinUI 2 részeként érhetők el. További információ, beleértve a telepítési utasításokat, lásd WinUI 2. Ezekhez a vezérlőkhöz tartozó API-k a Windows.UI.Xaml.Controls és Microsoft.UI.Xaml.Controls névterekben is léteznek.

• UWP API-k:MenuFlyout osztály, MenuBar osztály, ContextFlyout tulajdonság, FlyoutBase.AttachedFlyout tulajdonság
• WinUI 2 API-k:MenuBar osztály, ContextFlyout tulajdonság, FlyoutBase.AttachedFlyout tulajdonság
• Nyissa meg a WinUI 2 Katalógus alkalmazást, és tekintse meg a Menüsáv működését. A WinUI 2 Gallery alkalmazás interaktív példákat tartalmaz a WinUI 2 vezérlők, funkciók és funkciók többségére. Szerezze be az alkalmazást a Microsoft Store , vagy kérje le a forráskódot GitHub.

Javasoljuk, hogy a legújabb WinUI 2 használatával szerezze be a legújabb stílusokat és sablonokat az összes vezérlőhöz. A WinUI 2.2 vagy újabb verziója egy új sablont tartalmaz ezekhez a vezérlőkhöz, amelyek lekerekített sarkokat használnak. További információért lásd a sarok sugarát.

Ha a jelen cikkben szereplő kódot a WinUI 2-vel szeretné használni, használjon egy aliast az XAML-ben (muxc) a projektben szereplő Windows felhasználói felületi kódtár API-k megjelenítéséhez. További információt A WinUI 2 használatának első lépéseit ismertető cikkben talál.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:MenuFlyout />
<muxc:MenuBar />

Kapcsolódó cikkek

• Parancstervezés alapjai Windows-alkalmazásokhoz
• menük és kontextusmenük
• Gyűjtemények és listák környezetfüggő irányítása
• MenuFlyout osztály
• Menüsáv osztály