Delen via

Menu uitklappen en menubalk

Flyouts van menu's worden gebruikt in menu- en contextmenuscenario's om een lijst met opdrachten of opties weer te geven wanneer deze door de gebruiker worden aangevraagd. In een flyout van een menu wordt één inlinemenu op het hoogste niveau weergegeven met menu-items en submenu's. Als u een reeks menu's op het hoogste niveau in een horizontale rij wilt weergeven, gebruikt u de menubalk (die u meestal boven aan het app-venster plaatst).

Voorbeeld van een typisch contextmenu

Is dit de juiste controle?

Zie menu's en contextmenu's voor hulp bij het identificeren van menu's versus contextmenuscenario’s en richtlijnen voor het gebruik van een menu flyout versus een commando#balk flyout.

Uitvouwmenu's kunnen worden gebruikt als menu's en contextmenu's om opdrachten te ordenen. Als u willekeurige inhoud, zoals een melding of bevestigingsaanvraag, wilt weergeven, gebruikt u een dialoogvenster of een flyout.

Als een bepaalde opdracht regelmatig wordt gebruikt en u de beschikbare ruimte hebt, raadpleegt u de verzamelingsopdrachten voor voorbeelden voor het rechtstreeks in een eigen element plaatsen, zodat gebruikers geen menu hoeven te doorlopen om ernaartoe te gaan.

Een flyout voor een menu maken

Open de App WinUI 3 Gallery en zie MenuFlyout in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Als u een flyout voor een menu wilt maken, gebruikt u de klasse MenuFlyout. U definieert de inhoud van het menu door de objecten MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem en MenuFlyoutSeparator-objecten toe te voegen aan de MenuFlyout.

Deze objecten zijn bedoeld voor:

In dit voorbeeld wordt een MenuFlyout gemaakt en wordt de eigenschap ContextFlyout gebruikt, een eigenschap die beschikbaar is voor de meeste besturingselementen, om de MenuFlyout weer te geven als contextmenu.

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

Het volgende voorbeeld is bijna identiek, maar in plaats van de eigenschap ContextFlyout te gebruiken om de klasse MenuFlyout weer te geven als contextmenu, gebruikt het voorbeeld de eigenschap FlyoutBase.ShowAttachedFlyout om deze weer te geven als een menu.

<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

Overweeg pictogrammen voor menu-items op te geven voor:

  • De meest gebruikte items.
  • Menu-items waarvan het pictogram standaard of bekend is.
  • Menu-items waarvan het pictogram goed illustreert wat de opdracht doet.

Het is niet verplicht om pictogrammen te bieden voor opdrachten die geen standaardvisualisatie hebben. Cryptische pictogrammen zijn niet nuttig, zorgen voor visuele rommel en voorkomen dat gebruikers zich op de belangrijke menu-items concentreren.

Voorbeeld van contextmenu met pictogrammen 

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

Aanbeveling

De grootte van het pictogram in een MenuFlyoutItem is 16x16px. Als u SymbolIcon, FontIcon of PathIcon gebruikt, wordt het pictogram automatisch geschaald naar de juiste grootte zonder kwaliteitsverlies. Als u BitmapIcon gebruikt, moet u ervoor zorgen dat uw asset 16x16px is.

Licht sluiten

Licht Sluiten-bedieningselementen zoals menu's, contextmenu's en andere flyouts houden toetsenbord- en gamepadfocus vast in de tijdelijke gebruikersinterface totdat deze worden gesloten. Als visuele aanwijzing voor dit gedrag tekenen 'light dismiss'-besturingselementen op de Xbox een overlay die de zichtbaarheid van de gebruikersinterface buiten het bereik dimt. Dit gedrag kan worden gewijzigd met de eigenschap LightDismissOverlayMode . Standaard zullen tijdelijke UIs de lichte overlay op Xbox (Auto) tekenen, maar niet op andere apparaatfamilies. U kunt ervoor kiezen om af te dwingen dat de overlay altijd aan of altijd uit is.

<MenuFlyout LightDismissOverlayMode="Off" />

Een menubalk maken

Open de winUI 3-galerie-app en zie menubalk in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

U gebruikt dezelfde elementen om menu's in een menubalk te maken als in een flyout van een menu. In plaats van menuFlyoutItem-objecten in een MenuFlyout te groeperen, groepeert u deze echter in een MenuBarItem-element. Elke MenuBarItem wordt als menu op het hoogste niveau toegevoegd aan de menubalk.

Voorbeeld van een menubalk

Opmerking

In dit voorbeeld ziet u alleen hoe u de UI-structuur maakt, maar geen implementatie van een van de opdrachten weergeeft.

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

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

MenuBalk vereist Windows 10, versie 1809 (SDK 17763) of hoger of WinUI 2.

De besturingselementen MenuFlyout en MenuBalk voor UWP-apps zijn opgenomen als onderdeel van WinUI 2. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor deze controls bestaan in zowel de namespaces Windows.UI.Xaml.Controls als Microsoft.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor deze besturingselementen die gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

<muxc:MenuFlyout />
<muxc:MenuBar />
  • Last updated on