Morfik’s Accordion Widget provides multiple panels for organising user controls, with just one panel being displayed at any given time.
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:
|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:
|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.
|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:
|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.
|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:
|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:
|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.
|Figure 8: Putting a Photo of a Jacket in Accordion|