Tutorial: Actualizar un gráfico en un documento utilizando botones de radio

  • Artículo

En este tutorial se muestra cómo utilizar los botones de radio en una personalización en el nivel del documento para que Microsoft Office Word ofrezca a los usuarios la opción de seleccionar distintos tipos de gráfico en el documento.

Se aplica a: la información de este tema se aplica a los proyectos de nivel de documento para 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:

  • Agregar un gráfico al documento en un proyecto en el nivel del documento en tiempo de diseño.

  • Agrupar los botones de radio agregándolos a un control de usuario.

  • Cambiar el estilo de gráfico cuando se selecciona una opción.

Para consultar el resultado como ejemplo completo, vea el Ejemplo Word Controls en Ejemplos y tutoriales del desarrollo de Office.

Nota

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

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).
  • Word 2007 o Word 2010.

Crear el proyecto

El primer paso es crear el proyecto de documento de Word.

Para crear un nuevo proyecto

  • Cree un proyecto de documento de Word con el nombre Mis opciones de gráfico. En el asistente, seleccione Crear un nuevo documento. Para obtener más información, consulte Cómo: Crear proyectos de Office en Visual Studio.

    Visual Studio abre el nuevo documento de Word en el diseñador y agrega el proyecto Mis opciones de gráfico al Explorador de soluciones.

Agregar un gráfico al documento

Para agregar un gráfico

  1. En el documento de Word que se hospeda en el diseñador de Visual Studio, en la cinta de opciones, haga clic en la pestaña Insertar.

  2. En el grupo Texto, haga clic en el botón de lista desplegable Insertar objeto y haga clic en Objeto.

    Se abrirá el cuadro de diálogo Objeto.

  3. En la lista Tipo de objeto de la ficha Crear nuevo, seleccione Gráfico de Microsoft Graph y, a continuación, haga clic en Aceptar.

    Se agrega un gráfico al documento en el punto de inserción y aparece la ventana Hoja de datos con algunos datos predeterminados.

  4. Cierre la ventana Hoja de datos para aceptar los valores predeterminados del gráfico y haga clic dentro del documento para mover el foco fuera del gráfico.

  5. Haga clic con el botón secundario en el gráfico y, a continuación, haga clic en Formato de objeto.

  6. En la ficha Diseño del cuadro de diálogo Formato de objeto, seleccione Cuadrado y haga clic en Aceptar.

Agregar un control de usuario al proyecto

De forma predeterminada, los botones de radio de un documento no se excluyen mutuamente. Puede hacer que funcionen correctamente agregándolos a un control de usuario y escribiendo a continuación el código para controlar la selección.

Para agregar un control de usuario

  1. Seleccione el proyecto Mis opciones de gráfico en el Explorador de soluciones.

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

  3. En el cuadro de diálogo Agregar nuevo elemento, haga clic en Control de usuario, asigne al control el nombre ChartOptions y haga clic en Agregar.

Para agregar controles de formularios Windows Forms al control de usuario

  1. Si el control de usuario no está visible en el diseñador, haga doble clic en ChartOptions en el Explorador de soluciones.

  2. Desde la ficha Controles comunes del Cuadro de herramientas, arrastre el primer control RadioButton hasta el control de usuario y cambie las siguientes propiedades.

    Propiedad

    Valor

    Name

    columnChart

    Text

    Gráfico de columnas

  3. Agregue un segundo control RadioButton al control de usuario y cambie las siguientes propiedades.

    Propiedad

    Valor

    Name

    barChart

    Text

    Gráfico de barras

  4. Agregue un tercer control RadioButton al control de usuario y cambie las siguientes propiedades.

    Propiedad

    Valor

    Name

    lineChart

    Text

    Gráfico de líneas

  5. Agregue un cuarto control RadioButton al control de usuario y cambie las siguientes propiedades.

    Propiedad

    Valor

    Name

    areaBlockChart

    Text

    Gráfico de bloques de áreas

Agregar referencias

Para tener acceso al gráfico desde el control de usuario en un documento, debe tener una referencia al ensamblado Microsoft.Office.Interop.Graph en el proyecto.

Para agregar una referencia al ensamblado Microsoft.Office.Interop.Graph

  1. Haga clic en la opción Agregar referencia del menú Proyecto.

    Aparecerá el cuadro de diálogo Agregar referencia.

  2. En la pestaña .NET, seleccione Microsoft.Office.Interop.Graph y haga clic en Aceptar. Si el proyecto está destinado a Word 2007, seleccione la versión 12.0.0.0 del ensamblado; si el proyecto está destinado a Word 2010, seleccione la versión 14.0.0.0.

Cambiar el estilo del gráfico cuando se selecciona un botón de radio

Para que los botones funcionen correctamente, cree un evento público en el control de usuario, agregue una propiedad para establecer el tipo de selección y cree un procedimiento para el evento CheckedChanged de cada uno de los botones de radio.

Para crear un evento y una propiedad en un control de usuario

  1. En el Explorador de soluciones, haga clic con el botón secundario en el control de usuario y, a continuación, haga clic en Ver código.

  2. Agregue código para crear un evento SelectionChanged y la propiedad Selection a la clase ChartOptions.

    Public Event SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)

Private selectedType As Microsoft.Office.Interop.Graph.XlChartType = _
    Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered

Public Property Selection() As Microsoft.Office.Interop.Graph.XlChartType
    Get
        Return Me.selectedType
    End Get
    Set(ByVal value As Microsoft.Office.Interop.Graph.XlChartType)
        Me.selectedType = value
    End Set
End Property

    public event EventHandler SelectionChanged;

private Microsoft.Office.Interop.Graph.XlChartType selectedType =
    Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered;

public Microsoft.Office.Interop.Graph.XlChartType Selection
{
    get
    {
        return this.selectedType;
    }
    set
    {
        this.selectedType = value;
    }
}

Para controlar el evento CheckedChange de los botones de radio

  1. Establezca el tipo de gráfico en el controlador de eventos CheckedChanged del botón de radio areaBlockChart y después provoque el evento.

    Private Sub areaBlockChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles areaBlockChart.CheckedChanged

    If (CType(sender, RadioButton).Checked) Then

        Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlAreaStacked
        RaiseEvent SelectionChanged(Me, EventArgs.Empty)
    End If
End Sub

    private void areaBlockChart_CheckedChanged(object sender, EventArgs e)
{
    if (((RadioButton)sender).Checked)
    {
        this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlAreaStacked;
        if (this.SelectionChanged != null)
        {
            this.SelectionChanged(this, EventArgs.Empty);
        }
    }
}

  2. Establezca el tipo de gráfico en el controlador de eventos CheckedChanged del botón de radio barChart.

    Private Sub barChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles barChart.CheckedChanged

    If (CType(sender, RadioButton).Checked) Then

        Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlBarClustered
        RaiseEvent SelectionChanged(Me, EventArgs.Empty)
    End If
End Sub

    private void barChart_CheckedChanged(object sender, EventArgs e)
{
    if (((RadioButton)sender).Checked)
    {
        this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlBarClustered;
        if (this.SelectionChanged != null)
        {
            this.SelectionChanged(this, EventArgs.Empty);
        }
    }
}

  3. Establezca el tipo de gráfico en el controlador de eventos CheckedChanged del botón de radio columnChart.

    Private Sub columnChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles columnChart.CheckedChanged

    If (CType(sender, RadioButton).Checked) Then

        Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered
        RaiseEvent SelectionChanged(Me, EventArgs.Empty)
    End If
End Sub

    private void columnChart_CheckedChanged(object sender, EventArgs e)
{
    if (((RadioButton)sender).Checked)
    {
        this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered;
        if (this.SelectionChanged != null)
        {
            this.SelectionChanged(this, EventArgs.Empty);
        }
    }
}

  4. Establezca el tipo de gráfico en el controlador de eventos CheckedChanged del botón de radio lineChart.

    Private Sub lineChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles lineChart.CheckedChanged

    If (CType(sender, RadioButton).Checked) Then
        Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlLineMarkers
        RaiseEvent SelectionChanged(Me, EventArgs.Empty)
    End If
End Sub

    private void lineChart_CheckedChanged(object sender, EventArgs e)
{
    if (((RadioButton)sender).Checked)
    {
        this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlLineMarkers;
        if (this.SelectionChanged != null)
        {
            this.SelectionChanged(this, EventArgs.Empty);
        }
    }
}

  5. En C#, debe agregar controladores de eventos para los botones de radio. Puede agregar el código al constructor ChartOptions, bajo la llamada a InitializeComponent. Para obtener más información sobre cómo crear controladores de eventos, vea Cómo: Crear controladores de eventos en proyectos de Office.

    public ChartOptions()
{
    InitializeComponent();

    areaBlockChart.CheckedChanged += new EventHandler(areaBlockChart_CheckedChanged);
    barChart.CheckedChanged += new EventHandler(barChart_CheckedChanged);
    columnChart.CheckedChanged += new EventHandler(columnChart_CheckedChanged);
    lineChart.CheckedChanged += new EventHandler(lineChart_CheckedChanged);
}

Agregar el control de usuario al documento

Cuando genera la solución, el nuevo control de usuario se agrega automáticamente al Cuadro de herramientas. Puede arrastrar el control desde el Cuadro de herramientas al documento.

Para agregar el control de usuario al documento

  1. En el menú Generar, haga clic en Generar solución.

    El control de usuario ChartOptions se agrega al Cuadro de herramientas.

  2. En el Explorador de soluciones, haga clic con el botón secundario en ThisDocument.vb o en ThisDocument.cs y, a continuación, haga clic en Diseñador de vistas.

  3. Arrastre el control ChartOptions desde el Cuadro de herramientas hasta el documento.

    Se agregará al proyecto un nuevo control con el nombre ChartOptions1.

Cambiar el tipo de gráfico

Cree un controlador de eventos para cambiar el tipo de gráfico según la opción que está seleccionada en el control de usuario.

Para cambiar el tipo de gráfico que se muestra en el documento

  1. Agregue el siguiente controlador de eventos a la clase ThisDocument.

    Private Sub ChartOptions1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles ChartOptions1.SelectionChanged

    Try
        Dim shape As Word.Shape = Me.Shapes.Item(1)

        ' Activate the shape.
        shape.Activate()

        Dim dataChart As Graph.Chart = CType(shape.OLEFormat.Object, Graph.Chart)
        dataChart.ChartType = Me.ChartOptions1.Selection

        ' Deactivate the shape.
        Me.ChartOptions1.Select()

    Catch ex As Exception
        MessageBox.Show(ex.Message)
    End Try
End Sub

    private void ChartOptions1_SelectionChanged(object sender, EventArgs e)
{
    try
    {
        object index = 1;
        Word.Shape shape = this.Shapes.get_Item(ref index);

        // Activate the shape.
        shape.Activate();

        Microsoft.Office.Interop.Graph.Chart dataChart = 
            (Microsoft.Office.Interop.Graph.Chart)shape.OLEFormat.Object;
        dataChart.ChartType = this.ChartOptions1.Selection;

        // Deactivate the shape.
        this.ChartOptions1.Select();
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);
    }
}

  2. En C#, debe agregar un controlador de eventos para el control de usuario al evento Startup.

    this.ChartOptions1.SelectionChanged += new EventHandler(ChartOptions1_SelectionChanged);

Probar la aplicación

Ahora puede probar el documento para asegurarse de que el estilo de gráfico se actualiza correctamente al seleccionar un botón de radio.

Para probar el documento

  1. Presione F5 para ejecutar el proyecto.

  2. Seleccione distintos botones de radio.

  3. Confirme que el estilo de gráfico cambia y coincide con la selección.

Pasos siguientes

Éstas son algunas de las tareas que pueden venir a continuación:

Vea también

Conceptos

Tutoriales para Word

Utilizar controles de formularios Windows Forms en documentos de Word.

Limitaciones de los controles de formularios Windows Forms en los documentos de Office

Otros recursos

Ejemplos y tutoriales del desarrollo de Office