Release Date: 9/1/2004
| Update Date: 9/1/2004
Robert Green
Microsoft Corporation
Scope of application:
Microsoft Visual Basic .NET Version 2003
Summary: This article describes Visual Basic Power Pack, which consists of a set of custom controls, providing enhanced user interface elements for client-based applications.
This page
Introduction Power Pack Control Overview Blendpanel Control UtilityToolBar Control ImageButton Control NotificationWindow Control Taskpane Control FolderViewer and FileViewer Control Conclusions
introduction
Visual Basic Power Pack consists of seven custom controls written in Visual Basic .NET 2003. These controls provide enhanced user interface elements that allow you to create a more vivid-based application-based application.
The Power Pack control includes:
• BlendPanel: Provides a form background with a shadow of a shadow. • UtilityToolbar: Toolbar, look similar to the Internet Explorer toolbar. • ImageButton: Button, display graphics on a transparent background. • NotificationWindow: Displays text and graphics in the pop-up window (often called "toast"). • TaskPane: Containers provide foldable frameworks to display form additional information. • FolderViewer: Displays the directory using a hierarchical format. • FILEVIEWER: Displays a list of files in the specified directory.
Back to top
Power Pack Control Overview
Power Pack controls can be downloaded from Visual Basic Power Pack GotdotNet Workspace. The content to download includes: the full source code of the control, this document and a simple sample application.
The Power Pack control code resides in a project called VBPowerPack. The project contains one or more files for each control. These files are located in the same directory.
All controls have resident in the VBPowerPack namespace. Various classes of the function of the control control design are located in the vbpowerpack.design namespace. For the sake of simplicity, these categories did not return these classes in a separate program, although this is feasible.
Most of the source files are some kinds of classes and classes. In addition, some modules and classes provide some help program functions and code for processing Win32 and Windows shell libraries.
To use the Power Pack control, you should open the VBPowerPack project and build it. This will create a vbpowerpack.dll file. To add a Power Pack control to your toolbox, right-click the Toolbox and select Add | Delete. On the .NET Frameworks Component tab, select Browse and select VBPowerPack.dll. Now you can use the Power Pack control like you or a custom control you created.
Power Pack includes sample applications based on SQL Server Northwind databases. The Product Form is a main form, showing product information. This form uses BlendPanel, UtilityToolbar, ImageButton, NotificationWindow, and Taskpane controls. When the user clicks "Find", call the DocBrowser Form and use the FolderViewer and FileViewer controls.
Figure 1: Example application "Product" form
Back to top
BlendPanel Controls Many user interfaces use a mixed background, such as a taskbar of Windows Media Player, or a variety of frameworks in the Tasks pane of various Office 2003 products. In these contexts, the color is grainted by a shading grain.
This gradient function is added to the form in the Blendpanel control (see file BlendPanel.vb). Blendpanel is just a panel control, does not have a Backcolor property, and has a blend property. The Blend property is an instance of the Blendfill class (defined in file blendfill.vb) to control how to draw a background. The constructor of the Blendfill class uses the Style, StartColor, and FinishColor as parameters.
When designing, select the blend attribute at the Properties window will display the Blendfilleditor UI (see file blendfilleditor.vb and blendfilleditorui.vb). The Directional Tab is used to select a shadow direction. Have the following options:
• Portrait. When you move from downward, BlendPanel darken. This is the default direction of Blendpanel. • Landscape. When you move from left to right, BlendPanel Darken. • Forward diagonal. When you move from the lower right corner to the upper left corner, Blendpanel Darry. • Backward diagonal. When you move from the lower left corner, Blendpanel Darry.
The Start Color tab is used to set the start color of the gradient. The default head color is system.drawing.systemcolors.InactiveCaption. End Color tab is used to set the end color of the gradient. The default end color is system.drawing.systemcolors.Window.
Figure 2: Setting the BlendPanel's Blend property
At runtime, you can change the appearance of the BlendPanel by setting the Blend property to a new instance of the Blendfill class and for Blend.Style, Blend.StartColor and Blend.FiniShcolor. Blend.Style, Blend.StartColor and Blend.FiniShcolor properties are read-only, so you must use the following syntax to set the BlendPanel's Blend property to change it:
Blendpanel1.blend = _
New vbpowerpack.blendfill (BlendStyle, StartColor, Finishcolor)
Blend.Style can be set to one of the following values:
• vbpowerPack.blendStyle.vertical • vbpowerPack.blendStyle.horizontal • vbpowerPack.blendStyle.ForwardDiagonal • VBPowerPack.blendStyle.BackwardDiagonal
Blend.StartColor and Blend.FiniShcolor can be set to any color.
The example "Product" form has a menu selection for a BlendPanel option. This will open a dialog that can change the direction of BlendPanel. The following code will call this option dialog and pass the current BlendStyle to it. The code then changes BlendStyle according to the selection made by the user. StartColor and Finishcolor remain the same. They are set to existing values.
'When the user selects UtilityToolbar from the Options menu
'Pop up UtilityToolbarOptions form. Dim frmoptions as new blendpaneloptions
'Pass the current style of BlendPanel to this form. 'This will be used to display the current settings.
frMoptions.blendStyle = BlendPanel1.blend.Style
IF frmoptions.showdialog = DialogResult.ok Then
'Change Blendpanel's Blend to reflect
'New configuration of users selected. StartColor and EndColor remain unchanged.
'Please note that Style, StartColor and Finishcolor properties are
'Read-only. To change any attribute, you must set
'Blendpanel's Blend.
Me.blendpanel1.blend = new _
VbpowerPack.blendFill (frmoptions.blendstyle, _
Blendpanel1.blend.startColor, Blendpanel1.blend.finishcolor
END IF
The form also includes logic to change the StartColor and FinishColor of Blendpanel based on the number of inventory. If the stock is less than 10 units, Blendpanel is red. When the user scrolls to the record of more than 10 units, the Blendpanel color is set to the original color.
IF drvproducts ("UnitsInstock") <10 THEN
Blendpanel1.blend = new _
Vbpowerpack.blendfill (Blendpanel1.blend.style, _
System.drawing.color.indianred, _
System.drawing.color.crimson)
Else
'Save Blendpanel's current StartColor to string variables.
StrcurrentStartColor = BlendPanel1.blend.StartColor.tostring
'Save BlendPanel's initial startColor into a string variable.
StroriginalStartColor = _
System.drawing.systemcolors.inactivecaption.tostring
'If the Blendpanel's gradient has changed, set it back.
'Default color.
IF not strcurrentstartcolor = Structartcolor THEN
Blendpanel1.blend = new _
Vbpowerpack.blendfill (Blendpanel1.blend.style, _
System.drawing.systemcolors.inactivecaption, _
System.drawing.systemcolors.window)
END IF
END IF
Back to top
UtilityToolbar control
All along, toolbars are accessible to common functions (such as formatting, navigation, editing, update, etc.). Power Pack provides a UtilityToolBar control (see file uTilityToolBar.vb and UtilityToolbarButtons.vb) that inherits the Toolbar control from the Windows Form. UtilityToolbar includes a prefabricated button set and an event corresponding to these buttons and imitates the appearance of the Internet Explorer toolbar. After adding UtilityToolbar to the form, you can select the Buttons property from the Properties window. This opens the custom toolbar dialog (see File UtilityToolBarcuStomizedialog.vb). This dialog box imitates similar dialogs in Internet Explorer. To compare these two dialogs, you can choose to view in Internet Explorer | Customize.
Figure 3: Add button to UtilityToolbar
Note: The default settings for Text Options is "Selective Text on the right". Therefore, when selecting "Back" and "Forward" buttons, only the "Back" button is selected. Many early users of Power Pack have thought this is a defect. In fact, it is a design, and is a way of working in Internet Explorer.
Important properties of UtilityToolbar include:
• Buttons: Set up the toolbar buttons for UtilityToolbar. • iConOptions: Control how to display icons and images. Can be set to any of the following:
• vbpowerPack.utilityToolBariconOptions.Largeicons • vbpowerPack.utilityToolBariconOptions.smallicons (default) • ShowText: Controls whether the text is displayed in the relative position of the design of each toolbar button, and the specific location of the display. You can set it to one of the following values:
• VbPowerPack.UtilityToolBarShowText.ShowTextLabels • VbPowerPack.UtilityToolBarShowText.ShowSelectiveLabels (default value) • VbPowerPack.UtilityToolBarShowText.ShowNoLabels • Appearance: The appearance of the control UtilityToolbar, it can be set to any of the following values:
• ToolbaRaPpearance.FLAT • ToolbaRaPpearance.Normal (default)
Note: If you use UtilityToolbar and BlendPanel in the same form, you need to learn how to set up UTILITYTOOLBAR's APPEARANCE to FLAT. To view the behavior, add BlendPanel first and set the Dock property to Fill. Then add UtilityToolBar to the form. UtilityToolBar is immediately included in the Blendpanel. Once the form is run, you will see the rest of the screen in UtilityToolbar. There are two ways to avoid this problem. The first, set UtilityToolbar's APPEARANCE to NORMAL. Second, first add UtilityToolBar to the form and add BlendPanel.
UtilityToolBar has an event associated with each button it contains. For example, selecting the Backpressed button will trigger your backpressed event. The UtilityToolbar of the "Product" sample form includes "back", "forward" and "save" buttons. The code used to switch back and forth in the product is included in the code of the Backpressed and the ForwardPressed event.
"Product" form has a menu selection of a UtilityToolBar option. It will pop up a dialog box allows you to change the UtilityToolbar's appearance, icon options, and text options. The following code will call the Options dialog and pass the current settings of the APPEARANCE, ICONOPTIONS, and Text to it. The code will then change these settings according to the selection made by the user.
'When the user selects UtilityToolbar from the Options menu
'Pop up UtilityToolbarOptions form.
Dim frmoptions as new utilitytoolbaroptions
'Put UtilityToolbar's Appearance, IconOptions, and
'ShowText Current settings are passed to the form. This will be used to display
'Current settings.
FRMOPTIONS.UTILITYTOOLBARAPPEARANCE = UtilityToolbar1.Appearance
FRMOPTIONS.UTILITYTOOLBARICONS = UtilityToolbar1.iconOptions
frMoptions.utilityToolbartext = UtilityToolbar1.ShowText
IF frmoptions.showdialog = DialogResult.ok Then
'Change Appearance, IconOptions, and ShowText settings so that
'Reflect the choice made by the user.
UtilityToolbar1.appearance = frmoptions.utilitytoolbarappearance
UtilityToolbar1.ShowText = frmoptions.utilitytoolbartext
UtilityToolbar1.iconOptions = frmoptions.utilitytoolbaricons
END IF
Another way to achieve this is to use the UtilityToolbar's showcustomizedialog method. This will pop up a dialog and the same dialog box used by creating UtilityToolbar.
UtilityToolbar1.ShowCustomizedIng ()
The Product Form does not allow changes to the interrupted product. Therefore, the form contains the code to set the enabled property of the UTILITYTOOLBAR "Save" button to false to deal with the product interrupt. In addition, you can also specify whether the "Save" button appears instead of enabling or disable it.
The way to add buttons to the UtilityToolbar can be identical to the way to add buttons to the Windows Form Toolbar.
Dim NewButton as new vbpowerpack.utilitytoolbarbutton
UtilityToolbar1.Buttons.Add (NewButton)
NewButton.Text = "Click ME"
Note: As written, UtilityToolbar supports fixed number of images, so the imagelist property is not displayed. This means that although you can add buttons to the UtilityToolbar, it is not possible to assign images.
Back to top
ImageButton control adds an image to the Button control. It is a very simple matter. The image also appears in the rectangular button as the text, it is still like a normal button. ImageButton Control (see file imagebutton.vb) is a background transparent and displays buttons for hidden images. Therefore, the user can only be image. ImageButton inherits from Control and is the same as a normal button in all aspects. ImageButton implements iButtonControl, so it can be set to AcceptButton or CancelButton on the form.
ImageButton is available than the Button control. Its important properties include:
• NormalImage: The image displayed when ImageButton is in normal state. • HoverImage: The image displayed when the mouse is over ImageButton. • PressedImage: The image displayed when you click ImageButton and press the mouse button. • DISABEDIMAGE: The image displayed when ImageButton is disabled. If you do not specify DISABLEDIMAGE, NormalImage's color is slightly, it looks like it is disabled. • SIZEMODE: Determine how to adjust the button size based on the size of the image and the displayed text. Can be set to any of the following:
• vbPowerPack.ImageButtonsizeMode.autosize (default) • vbpowerPack.imageButtonsizeMode.stretchimage • ShowFocusRect: Determines whether imagebutton will display the dotted rectangle after the image is obtained. If ImageButton is not focus, the rectangle does not appear.
"Product" Sample Form contains two imagebutton, each displaying text on the right. As with expected, the code running when the button is clicked in the Click method of each button.
Figure 4: ImageButton in "Product" Sample Form
Back to top
NOTIFICATIONWINDOW control
The notification window (sometimes called "toast") is used in an application such as Windows Messenger, which can display information to the user in a visual manner. Typically, these windows appear up and down in the Windows taskbar status area.
You can add such notifications to the solution using the NotificationWindow control (References for NOTIFICATIONWINDOW.VB). NOTIFICATIONWindow is a boundless form that provides the correct look through BlendPanel. This window adjusts its own position according to the location of the Windows taskbar.
At design, NotificationWindow is a non-visual component that resides in the component tray.
NOTIFICATIONWINDOW includes:
• DEFAULTTEXT: The text of the default display in the window. • DefaultTimeout: After the default time period (milliseconds), the window disappears. • ShowStyle: Determines the way the window appears. You can set it to one of the following values:
• vbPowerPack.NotificationsHOWStyle.slide: Windows Slide the Windows Tasklet. It's the default value. • vbpowerpack.notificationShowstyle.fade: The window gradually disappears. • vbpowerpack.notificationShowStyle.Immediately: There is no effect when the window appears. • Blend: NOTIFICATIONWindow includes a BlendPanel, you can use BlendFill (see the description of this article) to control color and gradient. • Bottomimage: Used to add images to the bottom of the window. • CORNERIMAGE: Used to add images to the top left of the window. • TextishyperLink: Controls whether text in the window is displayed as hyperlink tab. When running, use the Notify method to make the window appear. NOTIFY methods have several overloads, you can use them to replace window properties. For example, using the current value of each attribute to display NotificationWindow:
Notify ()
Show specific text, but still use the current value of other properties:
Notify ("Some Text")
Display a particular text for five seconds, but still use the current value of other properties:
Notify ("Some Text", 5000)
In addition, NOTIFY has an alternative, which allows for a value for all window properties.
In the "Product" sample form, the purpose of NotificationWindow has two. First, inform the user that there is printing problem. Second, pointing out that a project has been interrupted.
'If the currently displayed product has been interrupted,
'Display the notification window to warn the user.
If DRVPRODUCTS ("discontinued" = true kil
'This is the image to be displayed in the notification window.
IMG = image.fromfile ("c: /vbpowerpacksample/wgcuStomerDetails.ico")
With NotificationWindow1
'Display images at the top left of the notification window.
.CornerImage = img.getthumbnailimage (32, 32, Nothing, Nothing)
'Slide the notification window from the bottom of the screen.
.Showstyle = vbpowerPack.notificationShotyle.slide
End with
'Display the notification window with the specified text.
FRMNOTIFICATION = NOTIFICATIONWINDOW1.NOTIFY ("this item is discontinued")
END IF
Figure 5: Display information to users using the notification window
NOTIFICATIONWindow disappears when the timeout or user clicks it. In the Product Form, the above notice will time out after three seconds, but is limited to the interrupted product. If the user moves to another record, the window should be turned off. The Notify method returns a reference to the notification window (it is a form). Thus, the example form includes the following code line, the function is to close the form after the user leaves the current record, if the form is present, that is, NOTIFICATIONWindow visible) is turned off.
IF not isnothing (frmNotification) Then frmNotification.close ()
Back to top
Taskpane control
Excellent user interface design is organized and displayed in the most effective way. The key information should be located at the front end and the relevant information should be located on one side. It is useful to allow users to display or hide relevant information as needed. Windows Explorer has this type of UI, the left side contains a framework like system tasks, files, and folder tasks, other locations, and details. These frames can be folded or expanded, and thereby hide or displays relevant information. Power Pack provides a TaskPane control (Reference TaskPane.vb), you can use it to create a similar UI in the solution. TaskPane is a container for TaskFrame (Reference TaskFrame.vb). TaskFrame is a panel with a title bar with a button. Click the title bar or button to expand or fold the taskframe.
Taskpane is a container control. When you add it to your form, you will see an empty rectangle. Use the taskframes attribute in the Properties window to access the TaskFrame Collection Editor (Reference Taskframedesigner.vb). You can then use this dialog to add TaskPanes to TaskFrame.
Most of the properties set when using Taskpane are related to each TaskFrame. The important properties of TaskFrame include:
• Image: Specifies the image to be displayed in the title bar. • Text: Specifies the title you want to display in the title bar. • Backcolor: Specifies the background color to use in the TaskFrame area under the title bar. • CAPTIONBLEND: The title bar includes BlendPanel, you can use Blendfill to control color and gradient. • CAPTIONHIGHLIGHTCOLOR: Specifies the title color displayed when the mouse is hovering on the title bar. • CollapseButtonVisible: Determines if the title bar displays the fold button. If not, the user cannot fold or expand TaskFrame. • ISEXPANDED: Control and / or points out whether to expand TaskFrame. Changing this value will fold or expand the taskframe. • CornerStyle: Control how to draw the corner of the title bar at the top of each TaskFrame. The default setting is the style that uses the operating system to determine. You can set it to one of the following values:
• vbpowerpack.taskframecornerNerstyle.Rounded • vbpowerPack.taskframecornerstyle.squared • vbpowerPack.taskframecornerstyle.systemDefault: Tracks the style used by the operating system, which is the default.
TaskPane's collapseall method folds all of its TaskFrame, which can expand all of them. However, there is no corresponding method to fold or expand each frame, respectively. However, you can change the taskframe's ISExpanded attribute to expand or fold it.
If Taskpane1.TaskFrames (0) .isexpanded = False Then
Taskpane1.taskframes (0) .isexpanded = true
END IF
You can use TaskPane's FramecolLapsed and FrameExpanded events to respond to associated operations. Use e.taskframe to determine which frame is folded or expanded.
If E. TaskFrame.Name = "tskfrmordersummary" the
...
The "product" sample form has a TaskPane on the right side. There are also two TaskFrames, a display product vendor information, a display product order history. Order history is only generated when TaskFrame is expanded. The user does not generate a subscription history when scrolling between the products. Figure 6: Displaying other product information in Taskpane
Back to top
FolderViewer and FileViewer controls
Visual Studio .NET 2003 comes with FolderBrowserDialog and OpenFileDialog controls. They are used to browse and select folders and files, respectively. These two controls are very easy to use, but they belong to the Mode dialog. Both cannot be used together. You can select a folder in OpenFileDialog, but it is impossible to view the folder list and file list. In addition, these system dialogs cannot be customized and cannot meet specific solution requirements.
Visual Basic Power Pack offers FolderViewer (Reference File FolderViewer.vb) and FileViewer (Reference File FileViewer.vb) control. They share a lot of features along with FolderBrowserDialog and OpenFileDialog. FolderViewer Based on the TreeView control, FileViewer is based on a listView control.
The important properties of FolderViewer include:
• RootPath: Determines the top-level folder displayed in FolderViewer. The default is empty, and the FolderViewer will display "Desktop" as the top node. • CurrentFolder: Returns the user selected folder.
The important properties of FileViewer include:
• PATH: Determine or returns a directory being being viewed or selected. The default is "My Computer". • Pattern: Used to filter the displayed file type. • View: Control file display mode. You can set it to one of the following values:
• View.list • View.lageicon (default) • View.smallicon • Sortby: It is used to sort files displayed in FileViewer. You can set it to one of the following values:
• VbPowerPack.FileViewerSortBy.Name (default value) • VbPowerPack.FileViewerSortBy.Size • VbPowerPack.FileViewerSortBy.Type • VbPowerPack.FileViewerSortBy.ModifiedTime • VbPowerPack.FileViewerSortBy.None • Files: return to display a collection of files in FileViewer. • SELECTEDFILES: Returns a collection of files selected by the user.
The "Look" button of the "Product" sample form can call the Document Browser form. The form contains FolderViewer and FileViewer. FolderViewer's rootpath is set in the form's LOAD method. When the user selects a node in the FolderViewer, the FileViewer's Path property will be set to this directory, and the system will update the fileviewer to display files in the directory.
Figure 7: Example application "Document Browser" form
Note: Sometimes, you cannot set the FileViewer's PATH to the directory selected in the FolderViewer. For example, if FileViewer's path value is equal to FolderViewer's CurrentDirectory, select "My Computer" in FolderViewer will result in an exception. When you choose "My Computer", the Folderviewer's CurrentFolder contains a GUID. FileViewer cannot display it and will lead to exceptions after writing. After that, you can set the FileViewer's Path as a string "My Computer". 'Save the current path to the string variable.
FilePath = fileviewer1.path
Try
'Change FileViewer to find the directory to set it to
'The selected directory in FolderViewer.
FileViewer1.path = folderviewer1.currentfolder
Catch exception
'Warning users by displaying the notification window.
'Specify the image to be displayed in the notification window.
IMG = image.fromfile ("c: /vbpowerpacksample/wgcuStomerDetails.ico")
'The image will appear on the upper left of the notification window.
NotificationWindow1.CornerImage = img.getthumbnailimage (32, 32, _
Nothing, Nothing)
'Display the notification window with the specified text.
FRMNOTIFICATION = NOTIFICATIONWINDOW1.NOTIFY ("Sorry, you cannot view this folder")
'Reset the FileViewer path to the previous value.
FileViewer1.path = filepath
END TRY
When the user double-click the file displayed in the FileViewer, the file will open in the corresponding program.
'Creating a process class instance for running the application.
Proc = New Process
'Save the name of the selected file to the string variable.
Filename = fileviewer1.selectedfiles (0) .name
'Informing the process which file is used.
Proc.startinfo.filename = fileviewer1.path & "/" & filename
'Notification Process Using the Operation System Interpreter Command Launched
'Process.
Proc.startinfo.uShellexecute = true
Try
'Startup process.
Proc.start ()
Catch exception
'If an error occurs when the process is started, the notification window is displayed.
'Warning users.
'This is the image to be displayed in the notification window.
IMG = image.fromfile ("c: /vbpowerpacksample/wgcuStomerDetails.ico")
'The image will appear on the upper left of the notification window.
NotificationWindow1.CornerImage = img.getthumbnailimage (32, 32, _
Nothing, Nothing)
'Display the notification window with the specified text.
FRMNOTIFICATION = NOTIFICATIONWINDOW1.NOTIFY ("COULDN't Open" & _
Filename)
END TRY
By entering the mode in the text box and selecting the Mode button, the user can filter the files in the fileviewer. Reset button can clear the mode to display all files. FileViewer1.pattern = txtPattern.Text
In addition, the Document Browser form allows users to switch between various FileViewer views while sorting files.
Back to top
in conclusion
Visual Basic Power Pack provides a set of custom controls that you can use to add additional elements that add more visual results in a client-based application. These controls are very easy to use when designing, or when running. In addition, since the control is provided with the source code, you can extend or change its behavior when appropriate.
Welcome to the Visual Basic Power Pack workspace in GotdotNet, the URL is: http://www.gotdotNet.com/community/workspaces/Workspace.aspx? ID = 167542E0-E435-4585-AE4F-C111FE60ED58 (English). Here, you can discuss the control problem and get the update file and the latest version in time. Also, if you like, you can also contribute your own strength on updates and new versions.
