Tutorial: Crear una pestaña personalizada usando el diseñador de la cinta de opciones

  • Artículo

En este tutorial se muestra cómo crear una ficha personalizada de la cinta de opciones con el diseñador de la cinta de opciones. Puede utilizar el diseñador de la cinta de opciones para agregar y colocar controles en la ficha personalizada.

Se aplica a: la información de este tema se aplica a los proyectos de nivel de documento y los proyectos de nivel de aplicación para las siguientes aplicaciones: Excel 2007 y Excel 2010; InfoPath 2010; Outlook 2007 y Outlook 2010; PowerPoint 2007 y PowerPoint 2010; Project 2010; Visio 2010; Word 2007 y Word 2010. Para obtener más información, vea Características disponibles por aplicación y tipo de proyecto de Office.

En este tutorial se muestran las tareas siguientes:

  • Crear paneles de acciones.

  • Crear una ficha personalizada.

  • Ocultar y mostrar paneles de acciones con botones de la ficha personalizada.

Nota

Es posible que su 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 tenga y la configuración que esté utilizando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

-

Una edición de Visual Studio 2010 que incluye las herramientas para desarrolladores de Microsoft Office. Para obtener más información, vea [Configurar un equipo para desarrollar soluciones de Office](bb398242\(v=vs.100\).md).
  • Microsoft Office Excel 2007 o Excel 2010. 

vínculo a vídeoPara obtener una versión en vídeo de este tema, vea Video How to: Creating a Custom Tab by Using the Ribbon Designer. Dispone de una demostración en vídeo relacionada en How Do I: Use the Ribbon Designer to Customize the Ribbon in Excel?.

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, vea Cómo: Crear proyectos de Office en Visual Studio.

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

Crear paneles de acciones

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

Para crear paneles de acciones

  1. En el menú Proyecto, haga clic en Agregar nuevo elemento.

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

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

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

  4. En la ventana Propiedades, establezca la propiedad Texto de label1 en Actions Pane 1.

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

Crear una ficha 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 ficha personalizada de la cinta de opciones. Para crear una ficha personalizada, agregue un elemento Cinta (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, haga clic en 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 por MyRibbon y haga clic en 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, haga clic en la pestaña predeterminada.

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

  6. Establezca la propiedad ControlId en My Custom Tab.

  7. En el diseñador de la Cinta, haga clic en grupo1.

  8. En la ventana Propiedades , establezca Etiqueta en Actions Pane Manager.

  9. Desde la ficha Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un botón a grupo1.

  10. Haga clic en button1 para seleccionarlo.

  11. En la ventana Propiedades , establezca Etiqueta en Show Actions Pane 1.

  12. Agregue un segundo botón a grupo1y establezca la propiedad Etiqueta en Show Actions Pane 2.

  13. Desde la ficha Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un control ToggleButton a grupo1.

  14. Establezca la propiedad Etiqueta en Hide Actions Pane.

Ocultar y mostrar paneles de acciones con botones de la ficha 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 que oculten y muestren los paneles de acciones.

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

  1. En el Explorador de soluciones, haga clic con el botón secundario en el archivo MyRibbon.cs o MyRibbon.vb y, a continuación, haga clic en 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.

    Dim actionsPane1 As New ActionsPaneControl1()
Dim actionsPane2 As New ActionsPaneControl2()

    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 recuadro de acciones a la colección ActionsPane.Controls y oculta los objetos de la vista. El código de Visual C# también adjunta delegados a varios eventos de control de la Cinta.

    Private Sub MyRibbon_Load(ByVal sender As System.Object, ByVal e As RibbonUIEventArgs) Handles MyBase.Load
    Globals.ThisWorkbook.ActionsPane.Controls.Add(actionsPane1)
    Globals.ThisWorkbook.ActionsPane.Controls.Add(actionsPane2)
    actionsPane1.Hide()
    actionsPane2.Hide()
    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = False
End Sub

    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;

    // Use the following code in projects that target the .NET Framework 4.
    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);

    // For .NET Framework 3.5 projects, use the following code instead.
    // this.button1.Click += new EventHandler<RibbonControlEventArgs>(button1_Click);
    // this.button2.Click += new EventHandler<RibbonControlEventArgs>(button2_Click);
    // this.toggleButton1.Click += new EventHandler<RibbonControlEventArgs>(toggleButton1_Click);
}

    Para obtener más información sobre las diferencias del ejemplo de código de Visual C# para los proyectos destinados a .NET Framework 4 y .NET Framework 3.5, vea Actualizar las personalizaciones de la Cinta en los proyectos de Office migrados a .NET Framework 4.

  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 Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As Microsoft.Office.Tools.Ribbon.RibbonControlEventArgs) _
        Handles Button1.Click
    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = True
    actionsPane2.Hide()
    actionsPane1.Show()
    ToggleButton1.Checked = False
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, _
    ByVal e As Microsoft.Office.Tools.Ribbon.RibbonControlEventArgs) _
        Handles Button2.Click

    Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = True
    actionsPane1.Hide()
    actionsPane2.Show()
    ToggleButton1.Checked = False

End Sub


Private Sub ToggleButton1_Click(ByVal sender As System.Object, _
    ByVal e As Microsoft.Office.Tools.Ribbon.RibbonControlEventArgs) _
        Handles ToggleButton1.Click

    If ToggleButton1.Checked Then
        Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = False
    Else
        Globals.ThisWorkbook.Application.DisplayDocumentActionTaskPane = True
    End If

End Sub

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

}

Probar la ficha personalizada

Al ejecutar el proyecto, se inicia Excel y en la Cinta aparece la pestaña My Custom Tab. Haga clic en los botones de My Custom Tab para mostrar y ocultar los recuadros de acciones.

Para probar la ficha personalizada

  1. Presione F5 para ejecutar el proyecto.

  2. Haga clic en la pestaña My Custom Tab.

  3. En el grupo Custom Actions Pane Manager, haga clic en Show Actions Pane 1.

    El panel de acciones aparece y muestra la etiqueta Actions Pane 1.

  4. Haga clic en Show Actions Pane 2.

    El panel de acciones aparece y muestra la etiqueta Actions Pane 2.

  5. Haga clic en Hide Actions Pane.

    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:

Vea también

Tareas

Cómo: Iniciarse en la personalización de la cinta de opciones

Cómo: Cambiar la posición de una pestaña en la cinta de opciones

Cómo: Personalizar una pestaña integrada

Cómo: Personalizar el menú de Microsoft Office

Conceptos

Obtener acceso a la cinta de opciones en tiempo de ejecución

Diseñador de la cinta de opciones

Personalizar una cinta de opciones para Outlook

Información general sobre el modelo de objetos para la cinta de opciones

Otros recursos

Información general sobre la cinta de opciones

Historial de cambios

Fecha

Historial

Motivo

Septiembre de 2010

Se ha agregado ejemplo de código de .NET Framework 3.5.

Corrección de errores de contenido.

Septiembre de 2010

Se han agregado pasos para asegurarse de que este tutorial crea una pestaña personalizada. Antes de que este cambio, los controles solo aparecían en la pestaña Complementos.

Corrección de errores de contenido.