Microsoft KB Archive/288222

= How To Create a Transparent Framer Control =

Article ID: 288222

Article Last Modified on 6/29/2004

-

APPLIES TO


 * Microsoft Visual Basic 5.0 Professional Edition
 * Microsoft Visual Basic 6.0 Professional Edition
 * Microsoft Visual Basic 5.0 Enterprise Edition
 * Microsoft Visual Basic 6.0 Enterprise Edition

-



This article was previously published under Q288222



SUMMARY
You can create a transparent frame to emphasize a section of some other control by using a custom UserControl. This article demonstrates how to create and use a Framer control for this purpose.



MORE INFORMATION
The Framer control can be used to highlight or point out sections of another control for emphasis. You can also click through the &quot;frame&quot; and affect the control beneath it. If you want to create multiple frames, you can use a control array or, in Visual Basic 6.0, you can create additional controls dynamically. The &quot;References&quot; section of this article includes instructions for this.

The following example uses an MSChart and an MSFlexGrid control for demonstration. The code is the same for each, but the Chart has a smaller border.

The Framer uses an Adjustment value for positioning the Line controls that form the right and bottom sides. This is because, like most controls, Lines are positioned by their Top and Left coordinates. So this Adjustment factor brings the right and bottom lines into view.

Steps to Create a Framer Control and Test Project
 Create a new Standard EXE project. Form1 is created by default. On the Project menu, click to select Components, check both Microsoft FlexGrid Control and Microsoft Chart Control, and then click OK. Add an MSFlexGrid control and an MSChart control to Form1.  Insert the following code into the General Declarations section of Form1: Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type

Dim Framing As RECT

Dim MINFrameSize As Integer  ' Smallest Frame dimension to draw. Dim FlexGridBoderSize As Integer Dim ChartBoderSize As Integer

Private Sub Form_Load Framer1.Visible = False MINFrameSize = 120 ChartBoderSize = 20 FlexGridBoderSize = 50 With MSFlexGrid1  ' Draw MSFlexGrid to Minimum size. .Cols = 4 .Rows = 10 .Width = .ColWidth(1) * .Cols + FlexGridBoderSize * 2 .Height = .RowHeight(1) * .Rows + FlexGridBoderSize * 2 End With End Sub

Private Sub MSChart1_MouseDown(Button As Integer, Shift As Integer, _  X As Single, Y As Single) If Button = vbRightButton Then Framing.Top = Y + MSChart1.Top + ChartBoderSize Framing.Left = X + MSChart1.Left + ChartBoderSize End If End Sub

Private Sub MSChart1_MouseUp(Button As Integer, Shift As Integer, _  X As Single, Y As Single) If Button = vbRightButton Then Framing.Bottom = Y + MSChart1.Top + ChartBoderSize Framing.Right = X + MSChart1.Left + ChartBoderSize End If

If Abs(Framing.Top - Framing.Bottom) > MINFrameSize And _ Abs(Framing.Left - Framing.Right) > MINFrameSize Then Framer1.Top = Framing.Top Framer1.Left = Framing.Left Framer1.Height = Abs(Framing.Top - Framing.Bottom) Framer1.Width = Abs(Framing.Left - Framing.Right) Framer1.ZOrder 0  ' Place on top Framer1.Visible = True End If End Sub

Private Sub MSFlexGrid1_MouseDown(Button As Integer, Shift As Integer, _  x As Single, y As Single) If Button = vbRightButton Then Framing.Top = y + MSFlexGrid1.Top + FlexGridBoderSize Framing.Left = x + MSFlexGrid1.Left + FlexGridBoderSize End If End Sub

Private Sub MSFlexGrid1_MouseUp(Button As Integer, Shift As Integer, _  x As Single, y As Single) If Button = vbRightButton Then Framing.Bottom = y + MSFlexGrid1.Top + FlexGridBoderSize Framing.Right = x + MSFlexGrid1.Left + FlexGridBoderSize End If

If Abs(Framing.Top - Framing.Bottom) > MINFrameSize And _ Abs(Framing.Left - Framing.Right) > MINFrameSize Then Framer1.Top = Framing.Top Framer1.Left = Framing.Left Framer1.Height = Abs(Framing.Top - Framing.Bottom) Framer1.Width = Abs(Framing.Left - Framing.Right) Framer1.ZOrder 0  ' Place on top Framer1.Visible = True End If End Sub  On the File menu, choose Add Project, and then add a new ActiveX Control project. In the Properties window, set the Appearance to 0 - Flat, the BackStyle to 0 - Transparent, and the BorderStyle to 1 - Fixed Single. Add an array of four Line controls as follows: <ol style="list-style-type: lower-alpha;"> Double-click the Line control in the toolbox and it appears on the UserControl.</li> In the Properties window, set the BorderWidth to 5, and the BorderColor to red (from the Palette tab.)</li> Click on the Line and copy and paste the control. Click Yes on the dialog box that pops up asking to create a control array.</li> Paste it two more times.</li></ol> </li>  Insert the following code into the General Declarations section of the UserControl: Private Sub UserControl_Resize Dim Adjustment As Integer  ' To properly position Lines within edges

Adjustment = 40 ' Top Line Line1(0).X1 = 0 Line1(0).Y1 = 0 Line1(0).X2 = UserControl.Width Line1(0).Y2 = 0 ' Right Line Line1(1).X1 = UserControl.Width - Adjustment Line1(1).Y1 = 0 Line1(1).X2 = UserControl.Width - Adjustment Line1(1).Y2 = UserControl.Height ' Bottom Line Line1(2).X1 = 0 Line1(2).Y1 = UserControl.Height - Adjustment Line1(2).X2 = UserControl.Width Line1(2).Y2 = UserControl.Height - Adjustment ' Left Line Line1(3).X1 = 0 Line1(3).Y1 = 0 Line1(3).X2 = 0 Line1(3).Y2 = UserControl.Height End Sub </li> In the Properties window, rename UserControl1 to Framer, and then close the UserControl design and code windows.</li> Add a Framer UserControl, Framer1, to Form1 and set the Visible property to False.</li> Run the project and use the mouse to select an area to &quot;frame.&quot; Where you first alternate-click the mouse is the starting point and where you release the button is the ending point to define the rectangular frame. When you release the mouse button, the red frame appears.

You can redraw the Framer anywhere in either the MSFlexGrid or MSChart control. Note also that you can click through the Framer and affect the control beneath it.</li></ol>

<div class="references_section">