Walkthrough: Updating a Chart in a Document Using Radio Buttons

Applies to
The information in this topic applies only to the specified Visual Studio Tools for Office projects and versions of Microsoft Office. Project type Document-level projects Microsoft Office version Word 2007 Word 2003 For more information, see Features Available by Application and Project Type.

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.

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 Word Controls Sample.

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 Visual Studio Settings.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio Tools for Office (an optional component of Visual Studio 2008 Professional and Visual Studio Team System).

• Microsoft Office Word 2003 or Microsoft Office Word 2007.

This walkthrough uses the menus in Word 2003, but the same options are available in the Word 2007 Ribbon.

Creating the Project

The first step is to create a Word Document project.

To create a new project

• 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 Visual Studio Tools for Office Projects.

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

Adding a Chart to the Document

In Word 2003 projects, the Insert menu on the Visual Studio toolbar contains the Word commands for adding a chart.

To add a chart

1. On the Insert menu, click Object.

   The Object dialog box opens.

   Note

   If the Insert menu is not visible, you must first click inside the document to give it focus. For more information see, Office Menus in the Visual Studio Environment.

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

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

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

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

Adding 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

Adding References

To access the chart from the user control on a document, you must have a reference to the Microsoft Graph 11.0 Object Library in your project.

To add a reference to the Microsoft Graph 11.0 Object Library

1. On the Project menu, click Add Reference.

   The Add Reference dialog box appears.

2. Click the COM tab.

3. Select Microsoft Graph 11.0 Object Library in the Component Name list and then click OK.

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

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 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. Set the chart type in the CheckedChanged event handler of the barChart radio button.

   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. Set the chart type in the CheckedChanged event handler of the columnChart radio button.

   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. Set the chart type in the CheckedChanged event handler of the lineChart radio button.

   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. 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 Visual Studio Tools for 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);
   }
   

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

   A new control named ChartOptions1 is added to your project.

Changing 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 
           'first object is the runtime storage control 
           Dim index As Object = 2
           Dim shape As Word.Shape = Me.Shapes.Item(index)
   
           '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
       {
           //first object is the runtime storage control 
           object index = 2;
           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. In C#, you must add an event handler for the user control to the Startup event.

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

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

• Using a button to populate a text box. For more information, see Walkthrough: Displaying Text in a Text Box in a Document Using a Button.

• Change formatting by selecting a style from a combo box. For more information, see Walkthrough: Changing Document Formatting Using CheckBox Controls.

See Also

Concepts

Walkthroughs Using Word

Using Windows Forms Controls on Word Documents

Limitations of Windows Forms Controls on Office Documents

Other Resources

Samples and Walkthroughs (Office Development)