Tutorial: Creación de una pestaña personalizada mediante el Diseñador de cintas

  • Artículo

El diseñador de la cinta de opciones permite crear una pestaña personalizada y, a continuación, agregar y colocar controles en ella.

Se aplica a: la información de este tema se aplica a proyectos de nivel de documento para Excel. Para obtener más información, consulte Características disponibles por aplicación de Office lication y tipo de proyecto.

En este tutorial se muestran las tareas siguientes:

Nota:

Es posible que tu equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para más información, vea Personalizar el IDE de Visual Studio.

Requisitos previos

Necesitará los componentes siguientes para completar este tutorial:

Crear un proyecto de libro de Excel

Los pasos para utilizar el diseñador de la cinta de opciones son casi idénticos para todas las aplicaciones de Office. En este ejemplo se utiliza un libro de Excel.

Para crear un proyecto de libro de Excel

  • Cree un proyecto de libro de Excel con el nombre MyExcelRibbon. Para obtener más información, consulta How to: Create Office Projects in Visual Studio.

    Visual Studio abre el nuevo libro en el diseñador y agrega el proyecto MyExcelRibbon a Explorador de soluciones.

Crear paneles de acciones

Agregue dos paneles de acciones personalizados al proyecto. Posteriormente agregará botones a la pestaña personalizada que muestren y oculten estos paneles de acciones.

Para crear paneles de acciones

  1. En el menú Proyecto , elija Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento , seleccione ActionsPaneControl y, a continuación, elija Agregar.

    El archivo ActionsPaneControl1.cs o ActionsPaneControl1.vb se abre en el diseñador.

  3. En la pestaña Controles comunes del Cuadro de herramientas, agregue una etiqueta a la superficie del diseñador.

  4. En la ventana Propiedades , establezca la propiedad Text de label1 en Panel de acciones 1.

  5. Repita los pasos del 1 al 5 para crear un segundo panel de acciones y una etiqueta. Establezca la propiedad Text de la segunda etiqueta en Panel de acciones 2.

Creación de una pestaña personalizada

Una de las instrucciones de diseño de las aplicaciones de Office es que los usuarios siempre deberían tener control de su interfaz de usuario. Para agregar esta capacidad en los paneles de acciones, puede agregar botones que muestren y oculten cada panel de acciones en una pestaña personalizada de la cinta de opciones. Para crear una pestaña personalizada, agregue un elemento ribbon (Diseñador visual) al proyecto. El diseñador ayuda a agregar y colocar controles, a establecer las propiedades del control y a controlar los eventos de control.

Para crear una ficha personalizada

  1. En el menú Proyecto , elija Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento , seleccione Cinta (diseñador visual).

  3. Cambie el nombre de la nueva cinta de opciones a MyRibbon y elija Agregar.

    El archivo MyRibbon.cs o MyRibbon.vb se abre en el diseñador de la cinta de opciones y muestra una ficha y un grupo predeterminados.

  4. En el diseñador de la cinta de opciones, elija la pestaña predeterminada.

  5. En la ventana Propiedades , expanda la propiedad ControlId y, a continuación, establezca la propiedad ControlIdType en Personalizado.

  6. Establezca la propiedad Label en Mi pestaña personalizada.

  7. En el Diseñador de cinta de opciones, elija group1.

  8. En la ventana Propiedades , establezca Etiqueta en Administrador de panel de acciones.

  9. En la pestaña Controles de cinta de Office del Cuadro de herramientas, arrastre un botón a group1.

  10. Seleccione el botón1.

  11. En la ventana Propiedades , establezca Etiqueta en Mostrar panel de acciones 1.

  12. Agregue un segundo botón a group1 y establezca la propiedad Label en Mostrar panel de acciones 2.

  13. En la pestaña Controles de cinta de Office del Cuadro de herramientas, arrastre un control ToggleButton a group1.

  14. Establezca la propiedad Label en Ocultar panel de acciones.

Ocultar y mostrar paneles de acciones mediante botones en la pestaña personalizada

El último paso consiste en agregar código que responda al usuario. Agregue controladores de eventos para los eventos Click de los dos botones y el evento Click del botón de alternancia. Agregue código a estos controladores de eventos para ocultar o mostrar los paneles de acciones.

Para ocultar y mostrar paneles de acciones con botones de la ficha personalizada

  1. En Explorador de soluciones, abra el menú contextual de MyRibbon.cs o MyRibbon.vb y, a continuación, elija Ver código.

  2. Agregue el siguiente código al comienzo de la clase MyRibbon. Este código crea dos objetos de panel de acciones.

    ActionsPaneControl1 actionsPane1 = new ActionsPaneControl1();
ActionsPaneControl2 actionsPane2 = new ActionsPaneControl2();

  3. Reemplace el método MyRibbon_Load por el código siguiente. Este código agrega los objetos de panel de acciones a la colección Controls y oculta los objetos de la vista. El código de Visual C# también asocia delegados a varios eventos de control de la cinta de opciones.

    private void MyRibbon_Load(object sender, RibbonUIEventArgs e)
{
    Globals.ThisWorkbook.ActionsPane.Controls.Add(actionsPane1);
    Globals.ThisWorkbook.ActionsPane.Controls.Add(actionsPane2);
    actionsPane1.Hide();
    actionsPane2.Hide();
    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = false;

    this.button1.Click += new Microsoft.Office.Tools.Ribbon.RibbonControlEventHandler(
        this.button1_Click);
    this.button2.Click += new Microsoft.Office.Tools.Ribbon.RibbonControlEventHandler(
        this.button2_Click);
    this.toggleButton1.Click += new Microsoft.Office.Tools.Ribbon.RibbonControlEventHandler(
        this.toggleButton1_Click);


}

  4. Agregue los tres métodos de control de eventos siguientes a la clase MyRibbon. Estos métodos controlan los eventos Click de los dos botones y el evento Click del botón de alternancia. Los controladores de eventos de button1 y button2 muestran paneles de acciones alternativos. El controlador de eventos de toggleButton1 muestra y oculta el panel de acciones activo.

    private void button1_Click(object sender, RibbonControlEventArgs e)
{
    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = true;
    actionsPane2.Hide();
    actionsPane1.Show();
    toggleButton1.Checked = false;
}

private void button2_Click(object sender, RibbonControlEventArgs e)
{
    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = true;
    actionsPane1.Hide();
    actionsPane2.Show();
    toggleButton1.Checked = false;

}

private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
{
    if (toggleButton1.Checked == true)
    {
        Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = false;
    }
    else
    {
        Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = true;
    }

}

Prueba de la pestaña personalizada

Al ejecutar el proyecto, Excel se inicia y aparece la pestaña Mi pestaña personalizada en la cinta de opciones. Elija los botones de la pestaña Mis personalizados para mostrar y ocultar los paneles de acciones.

Para probar la ficha personalizada

  1. Presione F5 para ejecutar el proyecto.

  2. Elija la pestaña Mi pestaña personalizada.

  3. En el grupo Administrador de panel de acciones personalizadas, elija Mostrar panel de acciones 1.

    Aparece el panel de acciones y muestra la etiqueta Panel de acciones 1.

  4. Elija Mostrar panel de acciones 2.

    Aparece el panel de acciones y muestra la etiqueta Panel de acciones 2.

  5. Elija Ocultar panel de acciones.

    Los paneles de acciones ya no están visibles.

Pasos siguientes

Puede aprender más acerca de la personalización de la interfaz de usuario de Office en estos temas:

  • Agregar una interfaz de usuario basada en contexto a cualquier personalización de nivel de documento. Para obtener más información, vea Información general sobre el panel Acciones.

  • Extender un formulario estándar o personalizado de Microsoft Office Outlook. Para obtener más información, vea Tutorial: Diseño de un área de formulario de Outlook.

Contenido relacionado