Morfik’s Accordion Widget provides multiple panels for organising user controls, with just one panel being displayed at any given time.


package-view.png
package-down.png


A Quick Walkthrough

To use the Morfik Accordion package simply add the package to the project with the “Used Packages” command on the Project Ribbon:


security-fig1.png
Figure 1: Used Packages Command


Alternatively you can simply drag the package file onto the application main client area. Once added, the Accordion Widget will appear on the Home Ribbon when the form designer is active:


selecting-a-widget.png
Figure 2: Selecting a Widget


This widget is now ready to use – there is no need for additional coding.


Using the Accordion Widget

To start using the widget you have to place it on the form. After that you can right click the widget to access the popup menu, which then allows you to add or remove a panel, or select the active panel. As previously mentioned, only one panel is displayed at a time.


using-accordion-widget.png
Figure 3: Accordion Widget


Note: You can switch between tabs simply by clicking on them.

Depending on your requirements, Accordion Widget's tabs can be organized in either a vertical or horizontal direction. This can be done by using Vertical property. Also you can configure each tab individually, and change its individual properties and appearance.

The screen shot below shows two Accordion widgets, one with the Vertical property set to True, and the other with the Vertical property set to False:


horizontal-vertical.png
Figure 4: Vertical and Horizontal Placement of Accordion Widget


At run time you can switch the active tab programmatically using the NextTab and PreviousTab methods.

There are a number of properties available at run time:

TabCount – advises the number of tabs.

ActiveIndex – gets or sets the index of the active tab within an Accordion control.

ActiveTab - gets or sets the index of the active tab within an Accordion control.

OnActiveChanged - events can be handled so you are notified when the active tab is changed at runtime.


Example – Making a project with the Accordion Package

The demo project provided with this package uses two instances of the Accordion widget. One of them is used to display information about fashion items, and the other one is used to display FAQ.


example-ready.png
Figure 5: Accordion Widget in Action


Let's have a look at how the first Accordion control was set up.

First of all we place the widget on the form, and uncheck its Vertical property. Then we set the size of the widget and its tabs.

Now you have to change the appearance of the accordion components. To do this select the ‘EditParts’ button on the ribbon:


example-customize.png
Figure 6: Customizing Accordion Widget


This allows you to customize the look of different widget components.

In this demo project we have changed the color of the buttons and containers to White and removed the Gradient and Corners effects. Now the widget looks like this:


example-vertical.png
Figure 7: Setting Accordion Widget


The next step is to place all the user interface elements we need on the tabs. In our example we place an Image, in this case a photo of a jacket, a Text Label for its description and so on.


example-jacket.png
Figure 8: Putting a Photo of a Jacket in Accordion

See Also

Back to top