Delen via

Menu's en contextmenu's

  • Artikel

Menu's en contextmenu's zijn vergelijkbaar in hoe ze eruitzien en wat ze kunnen bevatten. Ze geven beide een georganiseerde lijst met opdrachten of opties weer en besparen ruimte door ze te verbergen totdat de gebruiker ze nodig heeft. Er zijn echter verschillen tussen hen, zoals wat u moet gebruiken om ze te maken en hoe ze worden geopend door een gebruiker.

Voorbeeld van een typisch contextmenu

Is dit de juiste controle?

Menu's en contextmenu's zijn bedoeld voor het ordenen van opdrachten en het besparen van ruimte door deze opdrachten te verbergen totdat de gebruiker ze nodig heeft. 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 over de beschikbare ruimte beschikt, kunt u overwegen deze rechtstreeks in een eigen element te plaatsen, zodat gebruikers geen menu hoeven te doorlopen om ernaartoe te gaan.

Wanneer moet u een menu of contextmenu gebruiken?

  • Als het hostelement een knop is of een ander opdrachtelement waarvan de primaire rol is om extra opdrachten weer te geven, gebruikt u een menu.
  • Als het hostelement een ander type element is dat een ander primair doel heeft (zoals het presenteren van tekst of een afbeelding), gebruik een contextmenu.

Als u opdrachten (zoals Knippen, Kopiëren en Plakken) wilt toevoegen aan een tekst- of afbeeldingselement, gebruikt u een contextmenu in plaats van een menu. In dit scenario is de primaire rol van het tekstelement het presenteren en bewerken van tekst; aanvullende opdrachten (zoals Knippen, Kopiëren en Plakken) zijn secundair en horen in een contextmenu.

Voorbeeld van contextmenu in fotogalerie

Contextmenu

Contextmenu's hebben de volgende kenmerken:

  • Zijn gekoppeld aan één element en geven secundaire opdrachten weer.
  • Worden aangeroepen door met de rechtermuisknop te klikken (of een equivalente actie, zoals drukken en vasthouden met uw vinger).
  • Zijn gekoppeld aan een element via de eigenschap ContextFlyout.

In gevallen waarin uw contextmenu algemene opdrachten bevat (zoals Kopiëren, Knippen, Plakken, Verwijderen, Delen of opdrachten voor tekstselectie), gebruikt u opdrachtbalk flyout en groepeert u deze algemene opdrachten als primaire opdrachten, zodat ze worden weergegeven als één horizontale rij in het contextmenu.

In gevallen waarin uw contextmenu geen algemene opdrachten bevat, kan een flyout van opdrachtbalk of flyoutmenu worden gebruikt om een contextmenu weer te geven. We raden u aan CommandBarFlyout te gebruiken omdat het meer functionaliteit biedt dan MenuFlyout en, indien gewenst, hetzelfde gedrag en uiterlijk van MenuFlyout kan bereiken met behulp van alleen secundaire opdrachten.

Menu's hebben de volgende kenmerken:

  • Een enkel toegangspunt (bijvoorbeeld een menu Bestand boven aan het scherm) hebben dat altijd wordt weergegeven.
  • Zijn meestal gekoppeld aan een knop of een ouder menu-item.
  • Worden aangeroepen door met de linkermuisknop te klikken (of een equivalente actie, zoals tikken met uw vinger).
  • Worden gekoppeld aan een element via de Flyout-- of FlyoutBase.AttachedFlyout--eigenschappen of gegroepeerd in een menubalk bovenaan het app-venster.

Wanneer de gebruiker een opdrachtelement (zoals een knop) aanroept waarvan de primaire rol is om extra opdrachten te presenteren, gebruikt u flyoutmenu om een menu op het hoogste niveau te hosten dat inline moet worden weergegeven als een flyout die is gekoppeld aan het element van de gebruikersinterface op het canvas. Elke MenuFlyout kan menu-items en submenu's bevatten. Voor apps die mogelijk meer organisatie of groepering nodig hebben, gebruikt u een menubalk als een snelle en eenvoudige manier om een set menu's op het hoogste niveau in een horizontale rij weer te geven.

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.

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

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 hoekstraalvoor 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:CommandBarFlyout />
<muxc:MenuBar />