0% found this document useful (0 votes)
36 views25 pages

MDIDocking Sample

The document describes creating an MDI application with docking panes using Codejock controls. It discusses adding controls like CommandBars, DockingPanes and PropertyGrids to forms and assigning IDs. The application will have docking panes on the document windows and a child window with both CommandBars and DockingPanes.

Uploaded by

tilimo7819
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
36 views25 pages

MDIDocking Sample

The document describes creating an MDI application with docking panes using Codejock controls. It discusses adding controls like CommandBars, DockingPanes and PropertyGrids to forms and assigning IDs. The application will have docking panes on the document windows and a child window with both CommandBars and DockingPanes.

Uploaded by

tilimo7819
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Tutorial 3

MDI Docking Sample


In this sample program you will:

 Learn how to create an MDI application that has docking panes attached to each document
frame
Each new document will contain a docking pane with a property grid on it
 Learn how to create an application that uses both docking panes and command bars
The MDI form will have a command bar, and one of the controls on the toolbar will
display a child form. The child form will contain its own command bar and two
docking panes
This tutorial will only illustrate how to incorporate several Codejock controls into the same
application. Each control has a separate in-depth tutorial.

Refer to the TabManager sample to see a complete list of customizable


options available for the docking pane tabs. Refer to the CommandBars and
Docking Panes samples for more information on the methods, properties and
events used to create each type of control.
2

MDI Docking
Figure 3.1.
What you can
create in this
sample

Opening the Application


 Open Visual Basic and Select new project from the file menu. Select VB Application
Wizard from the new project dialog box and click OK
 On the first step of the wizard, you do not have a profile so accept the
default and continue.
 On the second step of the wizard, make sure that MDI is selected and give
the project an appropriate name.
 Now click Finish.
3

Figure 3.2.
Opening a new
project

Adding Controls
 Once the VB Application Wizard is finished, display the toolbox (View->Toolbox).
 Right-Click on an open area not occupied by a control and select
Components… from the pop-up menu. Project->Components will work as
well.
 Select the Controls tab if it is not already selected and scroll down to the
bottom. You should see Xtreme CommandBars ActiveX Control module,
Xtreme PropertyGrid Controls ActiveX Control module, and Xtreme
DockingPane ActiveX Control module. Make sure that the check box is
selected and click OK
4

Figure 3.3.
Adding a new
control

 You should now have the CommandBars control, DockingPane control, and
PropertyGrid control added to your Toolbox.
 Right-click on the grey area of your main MDI form and select Menu Editor.
 In the editor, hit the delete button until all of the menu items are removed from the
list box below.
 This will remove the menu created by Visual Basic.
 By allowing Visual Basic to create a menu, all of the menu event procedures
that Visual basic created can be used with the menu added to the command
bar.
 To delete the toolbar generated by Visual Basic, click on the toolbar control
on your main MDI form and hit the delete key.
 Do not delete the ImageList control. It will be used to supply images to the
command bar.

Before any controls are added:


 Click on the main MDI form
 Go to the properties window
 Change the Name to frmMain and the Caption to “MDI Docking”
 Add a CommandBars control
5

 Place a CommandBars control (red box in Figure 3.4.) on any blank area on the
MDI form
 Click on the CommandBars control
 Go to the properties window
 Name it CommandBars

Figure 3.4.
Adding
controls

 Visual Basic created two controls:


 A CommonDialog control (yellow box in Figure 3.4.)

 An ImageList control (green box in Figure 3.4.)


 The CommonDialog control is used to create and display common dialogs
such as the print dialog.
 The ImageList control is used to supply the command bar with images.

Each document contained in the MDI application will have a docking pane attached to the
left side of the form that contains a property grid control. A DockingPane control is needed
in each form that will have a docking pane.

 Open the frmDocument form in Object view.

 Place a DockingPane control (red box in Figure 3.5.) on any blank area of the
frmDocument form.
 Click on the DockingPane control
 Go to the properties window
 Name it DockingPaneManager.
6

Figure 3.5.
Adding
controls

 Add an ImageList control (green box in Figure 3.5.) to the form


 Click on the control
 Go to the properties window
 Name the control imlPaneIcons
 Change the ImageHeight and ImageWidth to 16

The docking pane attached to the document form will have an icon displayed on its tab
when the pane is docked as in Figure 3.6.

Figure 3.6.
Docking Pane
icon

 Right-click on the imlPaneIcons ImageList control already created


7

 Select properties from the pop-up menu.

Figure 3.7.
Opening
Properties

 There will not be any images in the Images List box (red box in Figure 3.8.).
 To add images:
1. Click on the Insert Picture… button
2. Navigate to the C:\Program Files\Codejock
Software\ActiveX\Suite\samples\Common\MDIDocking\Icons
directory.
3. Insert incon1.bmp into the image list as in Figure 3.8.
8

Figure 3.8.
Inserting
Pictures

 The key and tag properties are not important for this ImageList. Leave them
as the default values.
 The Index of the image will correspond to the Id of the docking pane.
 A MaskColor is needed to mask transparent content of an image.
 The image has a background color of green that needs to be set as the
transparent color.
 To do this:
1. Click on the Color tab
2. Click on MaskColor (red box in Figure 3.9.) in the Properties box
3. Select Green from the Color Palette (blue box in Figure 3.9.)
4. Click the Apply button
5. Click OK to finish

It is recommended that you use a bitmap for your ImageList. Bitmaps will
look much better than icons when displayed on the docking pane tabs
9

Figure 3.9.
MaskColor

Creating a New Form


A separate form is created and will be attached to a docking pane. The form attached to the
docking pane will only contain a property grid control, which will be resized to fill the entire
area of the docking pane.
 Add a new form to your project
 Click on Project->Add Form
 Make sure Form is selected
 Click the Open button

Figure 3.10.
Opening a new
form
10

 Visual Basic will display a new form


 With the new form selected:
 Go to the properties window
 Change the Name to frmPropertyGrid
 Change the BorderStyle to 0-None.

Figure 3.11.
The New Form

 Place a PropertyGrid control (red box in Figure 3.11.) on any blank area on
frmPropertyGrid form
 Click on the PropertyGrid control
 Go to the properties window
 Name it wndPropertyGrid
 Change the ToolBar Visible property to True.

A separate child form is created and will contain both a CommandBar and DockingPane
control. The child form is used to illustrate how to incorporate the CommandBar and
DockingPane controls together in the same form.
 Add a new form to your project
 Click on Project->Add Form
 Make sure Form is selected
 Click the Open button
11

Figure 3.12.
The New Form

 Visual Basic will display a new form


 With the new form selected:
 Go to the properties window
1. Change the Name to frmChild
2. Change the Caption to Child Form
3. Change the BackColor to Application WorkSpace
(&H8000000C&)

 Place a DockingPane control (red box in Figure 3.13) on any blank area of the
frmChild form
 Click on the DockingPane control
 Go to the properties window
 Name it DockingPaneManager

 Place a CommandBars control (yellow box in Figure 3.13.) on any blank area on
the frmChild form
 Click on the CommandBars control
 Go to the properties window
 Name it CommandBars.

Assigning IDs and Index Numbers


An ID and Index number needs to be assigned for each CommandBar contro that will be
added to the toolbar/menubar. The Id is used to identify which CommandBar control was
clicked. If the CommandBar control will display an image, then the index will be the same as
the Tag value used in the imlToolbarIcons ImageList.
12

 To assign a Tag value to an image in the imlToolbarIcons Imaglist


 Right-click on the ImageList control
 Select Properties from the pop-up menu
 Click the Images tab on the Property Pages dialog
 You will see all of your toolbar icons
 Click on an image and the Tag value is displayed in the Tag field (blue box in
Figure 3.13.)

Figure 3.13.
Property Pages

 With the General code section selected in the code view, assign an ID and index to
each and every CommandBar control
 Add the following code to the General code section of frmMain

Const ID_FILE_NEW = 100


Const ID_FILE_OPEN = 101
Const ID_FILE_CLOSE = 102
Const ID_FILE_SAVE = 103
Const ID_FILE_EXIT = 104

Const ID_EDIT_UNDO = 105


Const ID_EDIT_COPY = 106
Const ID_EDIT_PASTE = 107
Const ID_EDIT_CUT = 108

Const ID_VIEW_TOOLBAR_STANDARD = 109


Const ID_VIEW_TOOLBAR_THEMES = 115
Const ID_VIEW_STATUSBAR = 110
Const ID_VIEW_OPTIONS = 111
13

Const ID_HELP_ABOUT = 112

Const ID_FILE_PRINT = 113


Const ID_FILE_PRINT_SETUP = 114

Const ID_FORMAT_BOLD = 120


Const ID_FORMAT_ITALIC = 121
Const ID_FORMAT_UNDERLINE = 122

Const ID_FORMAT_ALIGNLEFT = 123


Const ID_FORMAT_CENTER = 124
Const ID_FORMAT_ALIGNRIGHT = 125

Const ID_THEME_OFFICE = 130


Const ID_THEME_DEFAULT = 131
Const ID_THEME_OFFICE2003 = 132
Const ID_THEME_NATIVEXP = 133

Const ID_WINDOW_CASCADE = 140


Const ID_WINDOW_TILE_HORIZANTALLY = 141
Const ID_WINDOW_TILE_VERTICALLY = 142

Const ID_VIEW_FORM = 150

 The name of the Id can be anything you want, but it is recommended that you follow
a naming scheme. For example, for the “New File” menu control, it is declared like
this: Const ID_NEW_FILE

Const is declared when included as part of an object module, Public Const


must be used when declaring in a .bas module file

 Start with the prefix ID followed by the name of the CommandBar control, all
separated by underscores
 Assign the CommandBar control ID an index number. The number can be any
integer (a number in the range 100-5700 should do), just make sure each index is
unique or the CommandBar controls items with an identical index will use the same
image and perform the same function
 Make sure that the appropriate Tag value is assigned to each CommandBar control
ID if the control will use an image
 In the sample, the print image has a Tag value of 113, so in General section of code,
the ID and index would be declared and assigned using the following line of code:
Const ID_FILE_PRINT = 113
Const ID_FILE_PRINT_SETUP = 114

 CommandBar controls that do not have an image can be assigned any unique value.
14

Form_Load Event Procedure (frmMain MDI Form)


Start by coding the Form_Load event procedure of the frmMain MDI form.
 It is recommended that the CommandBarsGlobalSettings.App property is set in the
Form_Load event of every application that uses a CommandBars control
 The following code is used to set the App property:
CommandBarsGlobalSettings.App = App

 This line of code is used to fill some internal parameters (Title, Path,
CompanyName, EXEName) that will be used by the CommandBars control.
 The App object contains some useful properties that the CommandBars
control uses such as App.Title, App.Path, and App.EXEName.
 The CommandBar will be created via code in this sample
 The Toolbar will have a button that will open up a child form that has both a
DockingPane and CommandBars control.
 After the CommandBar is complete, the imlToolbarIcons ImageList is loaded
 To create the CommandBar, add the code in the diagram below to the
MDIForm_Load event procedure.

For information on how to create a CommandBar and the code used to


create it, complete the SDI, MDI, or Static Bars CommandBars Samples.

Private Sub MDIForm_Load()


Me.Left = GetSetting(App.Title, "Settings", "MainLeft", 1000)
Me.Top = GetSetting(App.Title, "Settings", "MainTop", 1000)
Me.Width = GetSetting(App.Title, "Settings", "MainWidth", 6500)
Me.Height = GetSetting(App.Title, "Settings", "MainHeight", 6500)

CommandBarsGlobalSettings.App = App

Dim Control As CommandBarControl


Dim ControlFile As CommandBarPopup, ControlEdit As CommandBarPopup
Dim ControlView As CommandBarPopup
Dim ControlWindow As CommandBarPopup, ControlHelp As CommandBarPopup

Set ControlFile = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, "&File", _


-1, False)
With ControlFile.CommandBar.Controls
Set Control = .Add(xtpControlButton, ID_FILE_NEW, "&New", -1, False)
Control.ShortcutText = "Ctrl+N"

Set Control = .Add(xtpControlButton, ID_FILE_OPEN, "&Open", -1, False)


Control.ShortcutText = "Ctrl+O"
15

.Add xtpControlButton, ID_FILE_CLOSE, "&Close", -1, False


.Add xtpControlButton, ID_FILE_SAVE, "&Save", -1, False

Set Control = .Add(xtpControlButton, ID_FILE_PRINT, "&Print", -1, False)


Control.BeginGroup = True
.Add xtpControlButton, ID_FILE_PRINT_SETUP, "Print Set&up...", -1, False

Set Control = .Add(xtpControlButton, ID_FILE_EXIT, "&Exit", -1, False)


Control.BeginGroup = True
End With

Set ControlEdit = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, "&Edit", _


-1, False)
With ControlEdit.CommandBar.Controls
Set Control = .Add(xtpControlButton, ID_EDIT_UNDO, "&Undo", -1, False)

Set Control = .Add(xtpControlButton, ID_EDIT_CUT, "Cu&t", -1, False)


Control.ShortcutText = "Ctrl+X"
Control.BeginGroup = True

Set Control = .Add(xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False)


Control.ShortcutText = "Ctrl+C"

Set Control = .Add(xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False)


Control.ShortcutText = "Ctrl+V"
End With

Set ControlView = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, "&View", _


-1, False)
With ControlView.CommandBar.Controls
Set Control = .Add(xtpControlPopup, 0, "&Toolbars", -1, False)
Control.CommandBar.Controls.Add xtpControlButton, ID_VIEW_TOOLBAR_STANDARD, _
"&Standard", -1, False

.Add xtpControlButton, ID_VIEW_STATUSBAR, "Status Bar", -1, False

Set Control = .Add(xtpControlButton, ID_VIEW_OPTIONS, "&Options", -1, False)


Control.BeginGroup = True
End With

Set ControlWindow = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _


"&Window", -1, False)
With ControlWindow.CommandBar.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New Window", -1, False
.Add xtpControlButton, ID_WINDOW_TILE_HORIZANTALLY, "Tile &Horizontally", -1, False
.Add xtpControlButton, ID_WINDOW_TILE_VERTICALLY, "Tile &Vertically", -1, False
.Add xtpControlButton, ID_WINDOW_CASCADE, "&Cascade", -1, False
End With

Set ControlHelp = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _


"&Help", -1, False)
With ControlHelp.CommandBar.Controls
.Add xtpControlButton, ID_HELP_ABOUT, "&About", -1, False
End With

Dim ToolBar As CommandBar

Set ToolBar = CommandBars.Add("Standard", xtpBarTop)


With ToolBar.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New", -1, False
.Add xtpControlButton, ID_FILE_OPEN, "&Open", -1, False
.Add xtpControlButton, ID_FILE_SAVE, "&Save", -1, False

Set Control = .Add(xtpControlButton, ID_FILE_PRINT, "&Print", -1, False)


16

Control.BeginGroup = True

Set Control = .Add(xtpControlButton, ID_EDIT_CUT, "Cu&t", -1, False)


Control.BeginGroup = True

.Add xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False


.Add xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False

Set Control = .Add(xtpControlButton, ID_FORMAT_BOLD, "Bold", -1, False)


Control.BeginGroup = True
.Add xtpControlButton, ID_FORMAT_ITALIC, "Italic", -1, False
.Add xtpControlButton, ID_FORMAT_UNDERLINE, "Underline", -1, False

Set Control = .Add(xtpControlButton, ID_FORMAT_ALIGNLEFT, "Align Left", -1, False)


Control.BeginGroup = True
.Add xtpControlButton, ID_FORMAT_CENTER, "Center", -1, False
.Add xtpControlButton, ID_FORMAT_ALIGNRIGHT, "Align Right", -1, False

Set Control = .Add(xtpControlButton, ID_VIEW_FORM, "Child Form")


Control.BeginGroup = True
Control.Style = xtpButtonCaption

End With

CommandBars.AddImageList imlToolbarIcons

LoadNewDoc
End Sub

The Visual Theme


Controls were added to the CommandBar that allow the user to select which visual theme
will be applied to the CommandBar and TaskPanel. When a control on the CommandBar
is clicked, the Execute event procedure is called. The event is passed a pointer to the control
that was clicked. The Id declared in the General code section that was assigned to each
control is used to determine which control was clicked in the CommandBar.
 Add the following code to the CommandBars_Execute event procedure.
Private Sub CommandBars_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next

Select Case Control.Id


Case ID_HELP_ABOUT: MsgBox "Version " & App.Major & "." & App.Minor & "." & App.Revision
Case ID_VIEW_TOOLBAR_STANDARD: CommandBars(2).Visible = Not CommandBars(2).Visible
Case ID_VIEW_TOOLBAR_THEMES: CommandBars(3).Visible = Not CommandBars(3).Visible

Case ID_FILE_NEW: LoadNewDoc


Case ID_FILE_OPEN: mnuFileOpen_Click
Case ID_FILE_SAVE: mnuFileSave_Click
Case ID_FILE_PRINT: mnuFilePrint_Click
Case ID_FILE_CLOSE: mnuFileClose_Click

Case ID_FILE_EXIT: Unload Me

Case ID_VIEW_STATUSBAR:
sbStatusBar.Visible = Not sbStatusBar.Visible
CommandBars.RecalcLayout

Case ID_FORMAT_BOLD:
17

ActiveForm.rtfText.SelBold = Not ActiveForm.rtfText.SelBold


Case ID_FORMAT_ITALIC:
ActiveForm.rtfText.SelItalic = Not ActiveForm.rtfText.SelItalic
Case ID_FORMAT_UNDERLINE:
ActiveForm.rtfText.SelUnderline = Not ActiveForm.rtfText.SelUnderline

Case ID_FORMAT_ALIGNLEFT: ActiveForm.rtfText.SelAlignment = rtfLeft


Case ID_FORMAT_CENTER: ActiveForm.rtfText.SelAlignment = rtfCenter
Case ID_FORMAT_ALIGNRIGHT: ActiveForm.rtfText.SelAlignment = rtfRight

Case ID_EDIT_CUT:
Clipboard.SetText ActiveForm.rtfText.SelRTF
ActiveForm.rtfText.SelText = vbNullString
Case ID_EDIT_COPY: Clipboard.SetText ActiveForm.rtfText.SelRTF
Case ID_EDIT_PASTE: ActiveForm.rtfText.SelRTF = Clipboard.GetText

Case ID_WINDOW_CASCADE: Me.Arrange vbCascade


Case ID_WINDOW_TILE_HORIZANTALLY: Me.Arrange vbTileHorizontal
Case ID_WINDOW_TILE_VERTICALLY: Me.Arrange vbTileVertical

Case ID_VIEW_FORM:
Load frmChild
frmChild.Show

End Select
End Sub

 When the CommandBars control to display the frmChild form is clicked,


the Child form is opened using the Show method.

Case ID_VIEW_FORM:
Load frmChild
frmChild.Show

For more information on the Execute event, complete any CommandBars


tutorial.

The Size of the Status Bar


The size of the status bar must be accounted for when drawing the window.
 Add the following code to the CommandBars_GetClientBoardersWidth event
procedure.

Private Sub CommandBars_GetClientBordersWidth(Left As Long, Top As Long, Right As Long, _


Bottom As Long)
If sbStatusBar.Visible Then
Bottom = sbStatusBar.Height
End If
End Sub
18

 This event procedure will be called automatically so you will not directly call
it in your code.
 Without this procedure status bar would get drawn over.

For more information on the GetClientBordersWidth event, complete any


CommandBars tutorial.

Enabling/Disabling Commands
Some of the command buttons or menu selections are displayed differently based on a value,
or are enabled/disabled based on some condition. For example, you might want to
enable/disable certain command buttons/ menu selections based on events that take place
in your application.
 The CommandBars_Update event procedure is used to do this
 Add the following code to the CommandBars_Update event procedure

For more information on the Update event, complete any CommandBars


tutorial.

Private Sub CommandBars_Update(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next


Select Case Control.Id
Case ID_FILE_SAVE: Control.Enabled = Not ActiveForm Is Nothing
Case ID_FILE_PRINT: Control.Enabled = Not ActiveForm Is Nothing
Case ID_EDIT_CUT:
If ActiveForm Is Nothing Then
Control.Enabled = False
Else
Control.Enabled = Not ActiveForm.rtfText.SelLength = 0
End If
Case ID_EDIT_COPY:
If ActiveForm Is Nothing Then
Control.Enabled = False
Else
Control.Enabled = Not ActiveForm.rtfText.SelLength = 0
End If
Case ID_EDIT_PASTE: Control.Enabled = Not ActiveForm Is Nothing
Case ID_VIEW_TOOLBAR_STANDARD: Control.Checked = CommandBars(2).Visible
Case ID_VIEW_TOOLBAR_THEMES: Control.Checked = CommandBars(3).Visible

Case ID_VIEW_STATUSBAR: Control.Checked = sbStatusBar.Visible

Case ID_FORMAT_BOLD:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
19

Control.Checked = ActiveForm.rtfText.SelBold
End If
Case ID_FORMAT_ITALIC:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelItalic
End If
Case ID_FORMAT_UNDERLINE:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelUnderline
End If
Case ID_FORMAT_ALIGNLEFT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfLeft
End If
Case ID_FORMAT_CENTER:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfCenter
End If
Case ID_FORMAT_ALIGNRIGHT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfRight
End If

End Select
End Sub

 The “Toolbar” and “StatusBar” CommandBar controls all have a check


mark that is toggled on and off when the control is visible/hidden.
 This is the place to add any other code that will need to be executed when
you need to check if a menu item is checked/not checked

This code only places/removes the check mark next to the item in the
menu, the code to actually hide/unhide the status bar should go in the
Execute event procedure.

or any other action that should be performed when a command


button/menu item needs to look different based on specific conditions but
has not been clicked (i.e. hiding check marks next to menu controls)
 This will complete the frmMain MDI form

The frmPropertyGrid form contains a simple property grid that will allow the user to
change the BackColor of the document window. The frmPropertyGrid form will be
attached to a docking pane and the docking pane will be docked to a document frame.
 Open the frmPropertyGrid form in Code view
20

 A separate subroutine is created that will be called by the frmDocument form and let
the property grid control know which document form it is attached to. This is
necessary so it can change the BackColor of the document.
 The subroutine will be passed a reference to the frmDocument form that called the
subroutine and place this reference in a variable that can be used throughout the
frmPropertyGrid form
 In the General code section of the frmPropertyGrid form, an object variable of type
frmDocument is declared
 This variable will hold a reference to the frmDocument form that has the docking
pane with the property grid control
 Add the following code to the General code section of the frmPropertyGrid form.
Dim frmDocument As frmDocument

 Now you will create the SetDocument subroutine


 Click somewhere on your code view window
 Click Tools>Add Procedure... from the popup menu.

Figure 3.14.
Add Procedures

 Type SetDocument as the name, the type as sub, and scope as public
 Click OK
 Visual Basic takes you to the new subroutine
 Add the following code to the SetDocument subroutine.

Public Sub SetDocument(document As frmDocument)


Set frmDocument = document
End Sub
21

 This code will set a reference to the calling document and place it in the
frmDocument object pointer.

The property grid will only contain one category called “Settings” with two properties. The
“BackColor” property will bring up a color picker dialog that the user can select the color of
the document background.
 Add the following code to the frmPropertyGrid event procedure.
Private Sub Form_Load()

Dim Category As PropertyGridItem


Dim Item As PropertyGridItem

Set Category = wndPropertyGrid.AddCategory("Settings")

Set Item = Category.AddChildItem(PropertyItemBool, "SaveOnClose", True)


Category.AddChildItem PropertyItemColor, "BackColor", &HFFFFFF

Category.Expanded = True

Exit Sub

Err:
Debug.Print "Error: "; Err.Description
End Sub

For more information on the methods and properties used to add


categories and items to the property grid control, complete any
PropertyGrid tutorial.

Whenever a value is changed in the property grid, the ValueChanged event procedure is
called.
 Add the code in the diagram below to the ValueChanged event procedure.
Private Sub wndPropertyGrid_ValueChanged(ByVal Item As XtremePropertyGrid.IPropertyGridItem)
Select Case Item.Caption
Case "BackColor": frmDocument.rtfText.BackColor = Item.Value

End Select
End Sub

 The BackColor of the Rich Textbox on the frmDocument form is changed


to the color selected in the property grid.

For more information on the ValueChanged event, complete any


PropertyGrid tutorial.
22

The property grid control should take up the entire area of the docking pane. To do this, the
property grid control is resized to the same dimensions as the frmPropertyGrid form it was
placed on.
 Add the following code to the frmPropertyGrid.Form_Resize event procedure.
Private Sub Form_Resize()
On Error Resume Next
wndPropertyGrid.Move Me.ScaleLeft, Me.ScaleTop, Me.ScaleWidth, Me.ScaleHeight

End Sub

 The Move method is used to resize the property grid control. This will resize
the control each time the frmPropertyGrid form is resized.
 This completes the frmPropertyGrid form.

The frmDocument form will have one docking pane attached to the left side of the frame.
The docking pane must be created and docked to the left side of the frame, then the
frmPropertyGrid form must be attached to the docking pane. For each new document, a
new frmPropertyGrid object must be created and attached to the docking pane. An object
variable of type frmPropertyGrid is declared in the General code section and is used to
hold a reference to a new frmPropertyGrid object.
 Add the following code to the General code section of the frmDocument form.
Const ID_PANE_PROPERTIES = 1

Dim frmPropertyGrid As frmPropertyGrid

 The ID_PANE_PROPERTIES constant is used to identify the docking pane.


 After the docking pane is created, the frmPropertyGrid.SetDocument
subroutine is called passing in Me as the parameter.
 The Me parameter is used to allow the frmPropertyGrid.SetDocument
subroutine access the Rich TextBox control on the frmDocument form.
 Add the code in the diagram below to the frmDocument.Form_Load event
procedure.
Private Sub Form_Load()

Dim PaneProperties As Pane

Set PaneProperties = _
DockingPaneManager.CreatePane(ID_PANE_PROPERTIES, 210, 120, DockLeftOf, Nothing)

PaneProperties.Title = "Properties"

DockingPaneManager.ImageList = imlDockingPanes

Set frmPropertyGrid = New frmPropertyGrid


23

frmPropertyGrid.SetDocument Me

End Sub

 In the subroutine, the DockingPaneManager.CreatePane method is used to


create and dock a pane.
 The CreatePane method takes five parameters:
1. The ID of the pane
2. The initial width of the pane in pixels
3. The initial height of the pane in pixels
4. The direction in which to dock the pane
5. The neighboring pane that the pane will be docked to
 The fifth parameter can be the keyword Nothing when you want to use the
main frame as a neighbor.
 Only one pane is created and it is assigned the value of the
ID_PANE_PROPERTIES constant as the ID
 The pane will have an initial width of 210 pixels, a height of 120 pixels, and is
docked to the left side of the document.
 Then the title of the pane is changed by setting the Title property to
“Properties”
 The imlDockingPanes ImageList is added to the DockingPaneManager and
will use the first image as an icon in the docking pane tab
 Then a new frmPropertyGrid object is created and Me is passed to the new
objects SetDocument subroutine.

For more information on the methods and properties used to create


docking panes and attach forms, complete any DockingPanes tutorial.

To attach the frmPropertyGrid frame to the docking pane, edit the DockingPanesManager
AttachPane event procedure. This event procedure will also be called automatically and does
not need to be directly called in your code.
 Add the following code to the AttachPane event procedure.
Private Sub DockingPaneManager_AttachPane(ByVal Item As XtremeDockingPane.IPane)
Item.Handle = frmPropertyGrid.hwnd
End Sub
24

 The AttachPane event procedure is passed an object of type IPane called


Item. This event procedure will be called each time a docking pane is created.
 In the event procedure, the frmPropertyGrid frame is attached to the
docking pane with the following code
Item.Handle = frmPropertyGrid.hwnd

 The Handle property of the docking pane is set to reference the Handle
property of the frmPropertyGrid frame.

The size of the client area, which is the area not occupied by a docking pane or command
bar, must be known so that the Rich TextBox can be resized and moved to the correct
location. Each time the docking pane is resized, the Rich TextBox must be moved to the
correct location. The DockingPaneManager event procedure Resize is called each time a
docking pane’s size is changed (closing, maximize, minimize, resize, hide, etc). This event
procedure will be called automatically so you will not directly call it in your code. Without
this procedure, you would not see your status bar and the toolbar would be displayed over
the docking panes and open document.
 Add the following code to the Resize event procedure.
Private Sub DockingPaneManager_Resize()
On Error Resume Next

Dim Left As Long


Dim Top As Long
Dim Right As Long
Dim Bottom As Long

DockingPaneManager.GetClientRect Left, Top, Right, Bottom

rtfText.Move Left, Top, Right - Left, Bottom - Top


rtfText.RightMargin = IIf(rtfText.Width > 400, rtfText.Width - 400, rtfText.Width)

End Sub

When the user closes the frmDocument window, the frmPropertyGrid form attached to the
docking pane is still in memory. In the fmrDocument.Form_Unload event procedure, the
frmPropertyGrid form must be unloaded.
 Add the following code to the fmrDocument.Form_Unload event procedure.
Private Sub Form_Unload(Cancel As Integer)
Unload frmPropertyGrid
End Sub

 The Unload method will remove the frmPropertyGrid form from memory.
This will complete the frmDocument form.
25

When the user clicks on the “Child Form” button on the toolbar, a child form with a
command bar and two docking panes is displayed.
 To add the command bar and docking panes to the frmChild form, add the
following code to the frmChild.Form_Load event procedure.

Private Sub Form_Load()

Dim Control As CommandBarControl


Dim Combo As CommandBarComboBox
Dim ControlFile As CommandBarPopup, ControlOpen As CommandBarPopup

Set ControlFile = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, "&File")


With ControlFile.CommandBar.Controls

.Add xtpControlButton, 0, "New Project"

Set ControlOpen = .Add(xtpControlPopup, 0, "Open")


ControlOpen.CommandBar.Controls.Add xtpControlButton, 0, "Open Project"
Set Control = ControlOpen.CommandBar.Controls.Add(xtpControlButton, 0, "Open File...")
Control.ShortcutText = "Ctrl+O"

.Add xtpControlButton, 0, "&Close"


.Add xtpControlButton, 0, "&Save"
.Add xtpControlButton, 0, "Save &As"

Set Control = .Add(xtpControlButton, 0, "Print...")


Control.BeginGroup = True
.Add xtpControlButton, 0, "Print Set&up..."

Set Control = .Add(xtpControlButton, 0, "&Exit")


Control.BeginGroup = True
End With

DockingPaneManager.SetCommandBars Me.CommandBars

Dim PaneOutput As Pane, PaneBox As Pane

Set PaneOutput = DockingPaneManager.CreatePane(1, 150, 120, DockLeftOf, Nothing)


PaneOutput.Title = "Output"

Set PaneBox = DockingPaneManager.CreatePane(1, 150, 120, DockBottomOf, PaneOutput)


PaneBox.Title = "Box"

End Sub

 If you use both DockingPanes and CommandBars in the same form,


associate the command bars with the docking pane manager using the
SetCommandBars method.
DockingPaneManager.SetCommandBars Me.CommandBars

 This is necessary for correct resizing and layout of controls on the form.

You have now completed this tutorial! If you are unclear on anything covered, you might
want to go back and complete this tutorial again. It might be a good idea to add some
additional functionality to this sample application to make sure you fully understand what is
going on.

You might also like