Dela via

Utfällbar meny och menyrad

Utfällbara menyer används i meny- och snabbmenyscenarier för att visa en lista över kommandon eller alternativ när användaren begär det. En utfällbar meny visar en enkel, integrerad meny på högsta nivån som kan ha menyalternativ och undermenyer. Om du vill visa en uppsättning med flera menyer på den översta nivån på en vågrät rad använder du menyraden (som du vanligtvis placerar längst upp i appfönstret).

Exempel på en typisk snabbmeny

Är det här rätt kontroll?

Se menyer och snabbmenyer för hjälp med att identifiera menyscenarier jämfört med snabbmenyscenarier och vägledning om när du ska använda den utfällbara menyn jämfört med den utfällbara kommandoraden.

Utfällbara menyer kan användas som menyer och snabbmenyer för att ordna kommandon. Om du vill visa godtyckligt innehåll, till exempel ett meddelande eller en bekräftelsebegäran, använder du en dialogruta eller en utfällbara meny.

Om ett visst kommando används ofta och du har tillgängligt utrymme kan du läsa samlingskommandon för exempel på hur du placerar ett kommando direkt i ett eget element så att användarna inte behöver gå igenom en meny för att komma åt det.

Skapa en utfälld meny

Öppna WinUI 3-galleriappen och se MenuFlyout i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Om du vill skapa en utfälld meny använder du klassen MenuFlyout. Du definierar innehållet i menyn genom att lägga till MenuFlyoutItem-, MenuFlyoutSubItem-, ToggleMenuFlyoutItem-, RadioMenuFlyoutItem - och MenuFlyoutSeparator-objekt i MenuFlyout.

Dessa objekt är till för:

Det här exemplet skapar en MenuFlyout och använder egenskapen ContextFlyout , en egenskap som är tillgänglig för de flesta kontroller, för att visa MenuFlyout som en snabbmeny.

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

Nästa exempel är nästan identiskt, men i stället för att använda egenskapen ContextFlyout för att visa klassen MenuFlyout som en snabbmeny använder exemplet egenskapen FlyoutBase.ShowAttachedFlyout för att visa den som en meny.

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

Ikoner

Överväg att tillhandahålla menyalternativikoner för:

  • De vanligaste objekten.
  • Menyalternativ vars ikon är standard eller välkänd.
  • Menyobjekt vars ikon väl illustrerar vad kommandot gör.

Känn dig inte skyldig att ange ikoner för kommandon som inte har någon standardvisualisering. Kryptiska ikoner är inte användbara, skapar visuell oreda och hindrar användarna från att fokusera på viktiga menyalternativ.

Exempel på snabbmeny med ikoner 

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

Tips

Storleken på ikonen i en MenuFlyoutItem är 16x16px. Om du använder SymbolIcon, FontIcon eller PathIcon skalas ikonen automatiskt till rätt storlek utan att återgivningen går förlorad. Om du använder BitmapIcon säkerställer du att resursen är 16x16px.

Snabb avvisning

Kontroller som stängs när man klickar utanför, såsom menyer, snabbmenyer och andra utfällbara objekt, fångar tangentbords- och handkontrollsfokus inuti det tillfälliga användargränssnittet tills de stängs. För att ge en visuell signal för det här beteendet ritar ljusdunkelkontroller på Xbox ett skikt som minskar synligheten för användargränssnitt utanför ramen. Det här beteendet kan ändras med egenskapen LightDismissOverlayMode . Standardinställningen är att tillfälliga gränssnitt visar ett överlägg för ljus avfärkning på Xbox (Auto), men inte på andra enhetsfamiljer. Du kan välja att tvinga överlägget att alltid vara på eller alltid av.

<MenuFlyout LightDismissOverlayMode="Off" />

Skapa en menyrad

Öppna WinUI 3-galleriappen och se Menyrad i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Du använder samma element för att skapa menyer i en menyrad som i en utfällbar meny. Men i stället för att gruppera MenuFlyoutItem-objekt i en MenuFlyout grupperar du dem i ett MenuBarItem-element. Varje MenuBarItem läggs till i menyraden som en meny på den översta nivån.

Exempel på en menyrad

Obs

Det här exemplet visar bara hur du skapar användargränssnittsstrukturen, men visar inte implementeringen av något av kommandona.

<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 och WinUI 2

Viktig

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

Menyraden kräver Windows 10 version 1809 (SDK 17763) eller senare eller WinUI 2.

Kontrollerna MenuFlyout och MenuBar för UWP-appar ingår som en del av WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för dessa kontroller finns i namnrymderna Windows.UI.Xaml.Controls och Microsoft.UI.Xaml.Controls .

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för dessa kontroller som använder rundade hörn. För mer information om hörnradien, se .

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

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