Partager via


Menu contextuel

La ContextMenu classe représente l’élément qui expose les fonctionnalités à l’aide d’un contexte spécifique Menu. Un ContextMenu est attaché à un contrôle spécifique et vous permet de présenter aux utilisateurs une liste d’éléments qui spécifient des commandes ou des options associées à un contrôle particulier, comme un Button.

En règle générale, les utilisateurs exposent l'ContextMenu(interface utilisateur) via le bouton droit de la souris. Lorsque les utilisateurs cliquent avec le bouton droit sur le contrôle, le menu s’affiche. Cliquer sur un MenuItem sous-menu ouvre généralement un sous-menu ou provoque l’exécution d’une commande par une application.

Capture d’écran montrant un ContextMenu dans les états par défaut et ouverts.

Création d’un ContextMenu

Vous pouvez créer un ContextMenu élément en le déclarant en XAML ou en le créant par programmation dans le code.

L’exemple suivant montre comment déclarer un menu contextuel en XAML :

<Button Name="cmButton" Height="30" Width="200">
    Button with Context Menu
    <Button.ContextMenu>
        <ContextMenu Name="cm" Opened="Menu_OnOpened" Closed="Menu_OnClosed" StaysOpen="true">
            <MenuItem Header="File"/>
            <MenuItem Header="Save"/>
            <MenuItem Header="SaveAs"/>
            <MenuItem Header="Recent Files">
                <MenuItem Header="ReadMe.txt"/>
                <MenuItem Header="Schedule.xls"/>
            </MenuItem>
        </ContextMenu>
    </Button.ContextMenu>
</Button>

L’exemple suivant montre comment créer un menu contextuel par programmation dans le code :

private void CreateContextMenuProgrammatically()
{
    Button button = new() { Content = "Created with C#" };
    ContextMenu contextMenu = new();
    button.ContextMenu = contextMenu;

    MenuItem fileMenuItem = new() { Header = "File" };
    MenuItem newMenuItem = new() { Header = "New" };
    fileMenuItem.Items.Add(newMenuItem);

    MenuItem openMenuItem = new() { Header = "Open" };
    fileMenuItem.Items.Add(openMenuItem);

    MenuItem recentlyOpenedMenuItem = new() { Header = "Recently Opened" };
    openMenuItem.Items.Add(recentlyOpenedMenuItem);

    MenuItem textFileMenuItem = new() { Header = "Text.xaml" };
    recentlyOpenedMenuItem.Items.Add(textFileMenuItem);

    contextMenu.Items.Add(fileMenuItem);

    // Add the button to your container (implementation depends on your layout)
    // containerPanel.Children.Add(button);
}
Private Sub CreateContextMenuProgrammatically()
    Dim button As New Button() With {.Content = "Created with Visual Basic"}
    Dim contextMenu As New ContextMenu()
    button.ContextMenu = contextMenu

    Dim fileMenuItem As New MenuItem() With {.Header = "File"}
    Dim newMenuItem As New MenuItem() With {.Header = "New"}
    fileMenuItem.Items.Add(newMenuItem)

    Dim openMenuItem As New MenuItem() With {.Header = "Open"}
    fileMenuItem.Items.Add(openMenuItem)

    Dim recentlyOpenedMenuItem As New MenuItem() With {.Header = "Recently Opened"}
    openMenuItem.Items.Add(recentlyOpenedMenuItem)

    Dim textFileMenuItem As New MenuItem() With {.Header = "Text.xaml"}
    recentlyOpenedMenuItem.Items.Add(textFileMenuItem)

    contextMenu.Items.Add(fileMenuItem)

    ' Add the button to your container (implementation depends on your layout)
    ' containerPanel.Children.Add(button)
End Sub

Application de styles à un ContextMenu

En utilisant un contrôle Style, vous pouvez changer considérablement l’apparence et le comportement d’un ContextMenu sans écrire de contrôle personnalisé. Vous pouvez définir des propriétés visuelles et appliquer des styles à des parties d’un contrôle. Par exemple, vous pouvez modifier le comportement des parties du contrôle à l’aide de propriétés, ou vous pouvez ajouter des parties, ou modifier la disposition d’un ContextMenucontrôle. Les exemples suivants montrent plusieurs façons d’ajouter des styles aux ContextMenu contrôles.

Le premier exemple définit un style appelé SimpleSysResources, qui montre comment utiliser les paramètres système actuels dans votre style. L’exemple affecte MenuHighlightBrushKey la Background couleur et MenuTextBrushKey la Foreground couleur du ContextMenu.

<Style x:Key="SimpleSysResources" TargetType="{x:Type MenuItem}">
  <Setter Property = "Background" Value=
    "{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}"/>
  <Setter Property = "Foreground" Value=
    "{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
</Style>

L’exemple suivant utilise l’élément Trigger pour modifier l’apparence de Menu en réponse aux événements déclenchés sur le ContextMenu. Lorsqu’un utilisateur déplace la souris sur le menu, l’apparence des ContextMenu éléments change.

<Style x:Key="Triggers" TargetType="{x:Type MenuItem}">
  <Style.Triggers>
    <Trigger Property="MenuItem.IsMouseOver" Value="true">
      <Setter Property = "FontSize" Value="16"/>
      <Setter Property = "FontStyle" Value="Italic"/>
      <Setter Property = "Foreground" Value="Red"/>
    </Trigger>
  </Style.Triggers>
</Style>

Styles et modèles

Cette section décrit les styles et les modèles du ContextMenu contrôle. Vous pouvez modifier la valeur par défaut ControlTemplate pour donner au contrôle une apparence unique. Pour plus d’informations, consultez Styles et modèles et Créer un modèle pour un contrôle.

Content, propriété

Le ContextMenu contrôle utilise la Items propriété comme propriété de contenu, qui contient les éléments de menu affichés dans le menu contextuel.

Pièces

Le ContextMenu contrôle ne définit aucune partie de modèle nommée.

Lorsque vous créez un ControlTemplate pour un modèle ContextMenu, votre modèle peut contenir un ItemsPresenter dans un ScrollViewer. Affiche chaque élément dans le ItemsPresenterContextMenu et ScrollViewer active le défilement dans le composant. Si le ItemsPresenter n’est pas l’enfant direct du ScrollViewer, vous devez donner le ItemsPresenter nom ItemsPresenter.

États visuels

Le tableau suivant répertorie les états visuels du ContextMenu contrôle.

Nom de l’état visuel Nom du groupe d’états visuels Descriptif
Valide ValidationStates Le contrôle est valide et n’a aucune erreur de validation.
NonValideConcentré ValidationStates Le contrôle a une erreur de validation et a le focus clavier.
InvalideNonFocalisé ValidationStates Le contrôle a une erreur de validation, mais n'est pas focalisé au clavier.

Voir aussi