Información general sobre ContextMenu

  • Artículo

La clase ContextMenu representa el elemento que expone funcionalidad mediante un control Menu específico del contexto. Normalmente, un usuario expone el control ContextMenu en la interfaz de usuario haciendo clic con el botón derecho del mouse. En este tema se presenta el elemento ContextMenu y se proporcionan ejemplos de cómo usarlo en lenguaje XAML y en código.

Control ContextMenu

Un elemento ContextMenu está asociado a un control especifico. El elemento ContextMenu permite presentar a los usuarios una lista de elementos que especifican comandos u opciones que están asociados con un control determinado, por ejemplo, un Button. Los usuarios hacen clic con el botón derecho en el control para que aparezca el menú. Normalmente, la hacer clic en un elemento MenuItem se abre un submenú o provoca que una aplicación realice un comando.

Creación de elementos ContextMenu

En los ejemplos siguientes se muestra cómo crear un elemento ContextMenu con submenús. Los controles ContextMenu están asociados a controles de botón.

<Button Name="cmButton" Height="30">
  Button with Context Menu
  <Button.ContextMenu>
    <ContextMenu Name="cm" Opened="OnOpened" Closed="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>

btn = new Button();
btn.Content = "Created with C#";
contextmenu = new ContextMenu();
btn.ContextMenu = contextmenu;
mi = new MenuItem();
mi.Header = "File";
mia = new MenuItem();
mia.Header = "New";
mi.Items.Add(mia);
mib = new MenuItem();
mib.Header = "Open";
mi.Items.Add(mib);
mib1 = new MenuItem();
mib1.Header = "Recently Opened";
mib.Items.Add(mib1);
mib1a = new MenuItem();
mib1a.Header = "Text.xaml";
mib1.Items.Add(mib1a);
contextmenu.Items.Add(mi);
cv2.Children.Add(btn);

Dim btn As New Button()
Dim contextmenu As New ContextMenu()
Dim mi As New MenuItem()
Dim mia As New MenuItem()

btn.Background = Brushes.Red
btn.Height = 30
btn.Content = "Created with Visual Basic."

mi.Header = ("Item 1")
contextmenu.Items.Add(mi)
mia.Header = ("Item 2")
contextmenu.Items.Add(mia)

btn.ContextMenu = (contextmenu)
cv2.Children.Add(btn)

Aplicación de estilos a un control ContextMenu

Mediante un control Style, puede cambiar drásticamente la apariencia y el comportamiento de un elemento ContextMenu sin necesidad de escribir un control personalizado. Además de establecer propiedades visuales, también puede aplicar estilos a las partes de un control. Por ejemplo, puede cambiar el comportamiento de las partes del control mediante propiedades, o puede agregarle partes a un elemento ContextMenu o cambiar su diseño. Los ejemplos siguientes muestran varias maneras de agregar estilos a controles ContextMenu.

En el primer ejemplo se define un estilo denominado SimpleSysResources, que muestra cómo usar la configuración actual del sistema en el estilo. En el ejemplo se asigna MenuHighlightBrushKey como el color de Background y MenuTextBrushKey como el color de Foreground del elemento 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>

En el ejemplo siguiente se usa el elemento Trigger para cambiar la apariencia de un control Menu in en respuesta a eventos que se producen en el control ContextMenu. Cuando el usuario mueve el mouse sobre el menú, el aspecto de los elementos ContextMenu cambia.

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

Vea también