Walkthrough: Update a chart in a document using radio buttons

  • [アーティクル]

Applies to: yesVisual Studio noVisual Studio for Mac

Note

This article applies to Visual Studio 2017. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

This walkthrough demonstrates how to use radio buttons in a document-level customization for Microsoft Office Word to give users the option to select chart styles on the document.

Applies to: The information in this topic applies to document-level projects for Word. For more information, see Features available by Office application and project type.

This walkthrough illustrates the following tasks:

  • Adding a chart to the document in a document-level project at design time.

  • Grouping radio buttons by adding them to a user control.

  • Changing the chart style when an option is selected.

    To see the result as a completed sample, see the Word Controls Sample at Office development samples and walkthroughs.

    Note

    Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Personalize the IDE.

Prerequisites

You need the following components to complete this walkthrough:

Create the project

The first step is to create a Word Document project.

To create a new project

  1. Create a Word Document project with the name My Chart Options. In the wizard, select Create a new document. For more information, see How to: Create Office projects in Visual Studio.

    Visual Studio opens the new Word document in the designer and adds the My Chart Options project to Solution Explorer.

Add a chart to the document

To add a chart

  1. In the Word document that is hosted in the Visual Studio designer, on the Ribbon, click the Insert tab.

  2. In the Text group, click the Insert Object drop-down button, and click Object.

    The Object dialog box opens.

  3. In the Object type list on the Create New tab, select Microsoft Graph Chart and then click OK.

    A chart is added to the document at the insertion point, and the Datasheet window appears with some default data.

  4. Close the Datasheet window to accept the default values in the chart and click inside the document to move focus away from the chart.

  5. Right-click the chart, and then click Format Object.

  6. On the Layout tab of the Format Object dialog box, select Square and click OK.

Add a user control to the project

Radio buttons on a document are not mutually exclusive by default. You can make them function correctly by adding them to a user control, and then writing code to control the selection.

To add a user control

  1. Select the My Chart Options project in Solution Explorer.

  2. On the Project menu, click Add New Item.

  3. In the Add New Item dialog box, click User Control, name the control ChartOptions, and click Add.

To add Windows Form controls to the user control

  1. If the user control is not visible in the designer, double-click ChartOptions in Solution Explorer.

  2. From the Common Controls tab of the Toolbox, drag the first Radio Button control to the user control, and change the following properties.

    Property Value
    Name columnChart
    Text Column Chart

  3. Add a second Radio Button to the user control, and change the following properties.

    Property Value
    Name barChart
    Text Bar Chart

  4. Add a third Radio Button to the user control, and change the following properties.

    Property Value
    Name lineChart
    Text Line Chart

  5. Add a fourth Radio Button to the user control, and change the following properties.

    Property Value
    Name areaBlockChart
    Text Area Block Chart

Add references

To access the chart from the user control on a document, you must have a reference to the Microsoft.Office.Interop.Graph assembly in your project.

To add a reference to the Microsoft.Office.Interop.Graph assembly

  1. On the Project menu, click Add Reference.

    The Add Reference dialog box appears.

  2. On the .NET tab, select Microsoft.Office.Interop.Graph and click OK. Select the 14.0.0.0 version of the assembly.

Change the chart style when a radio button is selected

To make the buttons work correctly, create a public event on the user control, add a property to set the selection type, and create a procedure for the CheckedChanged event of each of the radio buttons.

To create an event and property on a user control

  1. In Solution Explorer, right-click the user control, and then click View Code.

  2. Add code to create a SelectionChanged event and the Selection property to the ChartOptions class.

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

    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

To handle the CheckedChange event of the radio buttons

  1. Set the chart type in the CheckedChanged event handler of the areaBlockChart radio button and then raise the event.

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

    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

  2. Set the chart type in the CheckedChanged event handler of the barChart radio button.

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

    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

  3. Set the chart type in the CheckedChanged event handler of the columnChart radio button.

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

    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

  4. Set the chart type in the CheckedChanged event handler of the lineChart radio button.

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

    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

  5. In C#, you must add event handlers for the radio buttons. You can add the code to the ChartOptions constructor, beneath the call to InitializeComponent. For information about creating event handlers, see How to: Create Event Handlers in Office Projects.

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

Add the User control to the document

When you build the solution, the new user control is automatically added to the Toolbox. You can then drag the control from the Toolbox to your document.

To add the user control your document

  1. On the Build menu, click Build Solution.

    The ChartOptions user control is added to the Toolbox.

  2. In Solution Explorer, right-click ThisDocument.vb or ThisDocument.cs, and then click View Designer.

  3. Drag the ChartOptions control from the Toolbox to the document.

    In the Properties window, name the control that you just added to the document ChartOptions1.

Change the chart type

Create an event handler to change the chart type according to the option that is selected in the user control.

To change the type of chart that is displayed in the document

  1. Add the following event handler to the ThisDocument class.

    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.OLEFormat.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.OLEFormat.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. In C#, you must add an event handler for the user control to the Startup event.

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

Test the application

You can now test your document to make sure that the chart style is updated correctly when you select a radio button.

To test your document

  1. Press F5 to run your project.

  2. Select various radio buttons.

  3. Confirm that the chart style changes to match the selection.

Next steps

Here are some tasks that might come next:

See also