How to auto-shifting Panel control in a form?
Last Update: August 30, 2018
To understand the auto-shifting technique, consider the following design:
- In the form design canvas, add the following Panel controls:
- Add relative Panel control and set its ID property to "RelativePanel1" and set its Layout property to "Relative". This is a relative panel in the form that will contain absolute panels. Note: it is not recommended to add controls directly to the relative panel.
- Add absolute Panel control inside the relative panel and set its ID property to "AbsolutePanel1" and set its Layout property to "Absolute".
- Add the controls you want inside "AbsolutePanel1" panel.
- Add absolute Panel control inside the relative panel and set its ID property to "AbsolutePanel2" and set its Layout property to "Absolute".
- Add the controls you want inside "AbsolutePanel2 panel.
- Before and outside the relative Panel control, add a DropDownList control and set its ID property to "DropDownList1"and change its Data Source property to "Unmapped" and set its items as follows:
AbsolutePanel1
AbsolutePanel2
- Add the following rule on the "AbsolutePanel1" control to make the "AbsolutePanel1" visible when choosing "AbsolutePanel1" value from the dropdown list.
In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.

- Change the Rule Name as desired.
- Change the Rule Type to Formatting.
- Change the Event Type OnChange.
- In the Condition section in the Rule Manager, add the following code:
getValue(DropDownList1) == "AbsolutePanel1"; - Click on the Save button to save the rule.
- Add the following rule on the "AbsolutePanel2" control to make the "AbsolutePanel2" visible when choosing "AbsolutePanel2" value from the dropdown list.
In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open
- Change the Rule Name as desired.
- Change the Rule Type to Formatting.
- Change the Event Type OnChange.
- In the Condition section in the Rule Manager, add the following code:
getValue(DropDownList1) == "AbsolutePanel2"; - Click on the Save button to save the rule.
- Test the form by clicking on Preview button in the View ribbon. You should see the following:
- When choosing the "AbsolutePanel1" from the dropdown list, the AbsolutePanel1 will be shown.
- When choosing the "AbsolutePanel2" from the dropdown list, the AbsolutePanel2 will be shown and the AbsolutePanel2 will be shifted up.