Skip to main content Skip to footer

New WinForms Components in Studio Enterprise 2006 v3

Applies To:

Studio for WinForms

Author:

John Juback

Published On:

9/19/2006

The 2006 v3 release of ComponentOne Studio Enterprise includes four new components for WinForms development using Visual Studio 2005. C1NavBar implements an Outlook-style navigation panel with a resizable button bar. C1TopicBar provides collapsible hyperlink groups similar to those used in the Windows Control Panel. C1SuperLabel offers lightweight HTML rendering without the overhead of the WebBrowser control. C1SuperTooltip uses the same rendering engine to bring rich content to tooltips for any Control or ToolStripItem.

This article illustrates the features of these new components using an application that implements customizable views of the 2006 National Football League schedule. The application is available as a source code download.

To download the source code for the application (in C#), click the following link:

[http://helpcentral.componentone.com/c1kb/upload/c1nfl2006.zip](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2006/9/c1nfl2006.zip)

You will also need to download an evaluation version of Studio Enterprise 2006 v3 (or update an earlier version) to build the source code.

Part of the Menus and Toolbars product, C1NavBar makes it easy to mimic the familiar navigaton pane of Microsoft Outlook. At design time, you can use the control's smart tag menu to add predefined Outlook buttons or specify your own custom images. For each button, you can also add optional section headers, horizontal rules, and docked panels.

As with the standard Panel and SplitContainer controls, you can drag other controls directly onto the surface of a C1NavBar control at design time. Click a button to activate the corresponding panel, then populate it with any intrinsic or third-party controls. At run time, C1NavBar displays the appropriate panel automatically whenever the user clicks a button.

For example, Calendar view uses the standard MonthCalendar control to filter the schedule grid to display matchups on or after the selected date.

Generally, when the user clicks a button, you will want to update some other part of the form. You can handle the ButtonClick event and examine the value of the SelectedButtonIndex property to determine which one was clicked, but if the user has rearranged the buttons then the index value may not be what you expect.

A better solution is to set the Tag property of each C1NavBarPanel to a unique string at design time, then use the SelectedPanel property of the C1NavBar control to determine which panel is active at run time, as the following code demonstrates:

private void c1NavBar1_ButtonClick(object sender, EventArgs e)  
{  
    // Apply the appropriate filter for each view  
    switch (c1NavBar1.SelectedPanel.Tag.ToString())  
    {  
        case "Schedule":  
        {  
            SetRowFilter("");  
            break;  
        }  
        case "Calendar":  
        {  
            SetDateFilter(monthCalendar1.SelectionStart);  
            break;  
        }  
        case "Teams":  
        {  
            SetTeamFilter(treeView1.SelectedNode);  
            break;  
        }  
    }  
}

This way, your code will still work if the user rearranges or removes buttons. Using the Tag property is also preferable to examining the Text property of the selected button, since the button captions may need to be localized.

At run time, users can customize the layout of the C1NavBar control in several different ways. The horizontal spliiter bar between the content panels and the buttons allows the height of the button stack to be adjusted. As the user drags it downward, buttons are moved from the stack to the button strip at the bottom of the control. Dragging the splitter bar upward has the opposite effect.

Clicking the dropdown arrow at the right edge of the button strip displays a popup menu with the following commands:

Show additional buttons

Moves the leftmost icon from the button strip to the bottom of the button stack.

Hide additional buttons

Moves the bottom button from the stack to the leftmost position in the button strip.

Navigation panel options...

Opens a dialog box for reordering the buttons or restoring the default order.

Add/Remove buttons

Opens a popup menu listing the available buttons. Each item has a check box that controls the visibility of the corresponding button.

The C1TopicBar control is also part of Menus and Toolbars. Unlike C1NavBar, it does not function as a container of arbitrary controls, but is useful for implementing collapsible groups of command links. In the C1NFL2006 application, the Tasks panel contains a C1TopicBar control with two pages (of type C1TopicPage), each of which contains three links (of type C1TopicLink).

At design time, you can use the control's smart tag menu to add and edit pages, and also to define the overall appearance of the control.

Clicking the Edit pages task opens the C1TopicPage Collection Editor, where you can add, remove, and reorder pages. Clicking the ellipsis button for the Links property opens the C1TopicLink Collection Editor, where you can specify individual command links and their image indexes (if you are using an image list).

At run time, when the user clicks a link, the C1TopicBar control fires the LinkClick event. The arguments for this event supply the page and link objects so your code can take the appropriate action.

ComponentOne SuperTooltip for WinForms is a new product introduced with the 2006 v3 release of Studio Enterprise. It contains two components, C1SuperLabel and C1SuperTooltip. These components are similar to the standard Label and Tooltip components, but they add lightweight yet flexible HTML rendering capabilities without the overhead of the WebBrowser control or Internet Explorer. Some of the HTML constructs supported by SuperTooltip for WinForms include:

  • Nested

    elements

  • Mixed fonts and text colors using tags

  • Preformatted text using

     tags
    
  • Paragraph alignment

  • Formatted tables, nested tables, and spanning rows and columns
  • Nested, bulleted, and numbered lists
  • Images loaded from applicaton resources
  • Cascading style sheets

The following illustration shows a C1SuperLabel control inside a C1NavBarPanel. The label displays a bulleted list in which some words are rendered in bold. Also, the label's Tooltip property is associated with a C1SuperTooltip component. When the mouse rests over the label, the tooltip balloon renders HTML content with an image, a bold title, a horizontal divider, some plain text, and a two-column table.

For the C1SuperLabel control, the Text property is set to the following string (shortened for clarity):


*   Use the **Schedule** button to view the entire schedule.

*   Use the **Calendar** button to view games on or after the selected date.

*   Use the **Teams** button to filter the schedule for a particular team.

*   Use the **Tasks** button to print and export the current schedule view.

*   Hover the mouse over this list to view additional information.


Note the use of the margin-left attribute to eliminate unnecessary white space along the left edge, and the margin-bottom attribute to increase the spacing between bullet items.

For multiline input, you can click the ellipsis button next to the Text property to open the C1SuperLabel Editor, which contains a context menu with formatting commands along with a preview window.

Similarly, when you add a C1SuperTooltip component to your form, clicking the ellipsis button next to the Tooltip property of any control opens the C1SuperTooltip Editor. You can add images, text, and separators using the controls provided, or you can switch tabs to enter raw HTML.

In the previous example, the Tooltip property for the C1SuperLabel control is set to the following string:









**ComponentOne Studio Enterprise**  







      This sample uses the following C1 controls:  




**C1NavBar**

The Outlook-style navigation panel on the left.  


**C1TopicBar**

In the Tasks panel, the Control Panel-style command links.  


**C1TrueDBGrid**

The grid display on the right, with DataView set to GroupBy.  


**C1SuperLabel**

In the Schedule panel, the bulleted list of instructions.  


**C1SuperTooltip**

This tooltip window.






Note that both C1SuperLabel and C1SuperTooltip are rather forgiving when it comes to terminating HTML tags. You can generally omit closing tags such as and .

The balloon presentation was achieved by setting the IsBalloon property of the C1SuperTooltip component to True. Since there is more than just a single line of text, the AutoPopDelay property of the tooltip was increased to 15000, so that the balloon remains visible for 15 seconds if not otherwise closed by the user.

The new WinForms components in Studio Enterprise 2006 v3 make it easy to incorporate familiar navigation and user interface elements into your desktop applications. The addition of SuperTooltip for WinForms provides an efficient, managed code alternative to hosting the WebBrowser control. As with other Studio Enterprise components, smart tags and visual designers help get you up and running quickly with minimal coding.

MESCIUS inc.

comments powered by Disqus