# Getting Started Overview

This tutorial will walk you through creating a Web page that contains a **RadSplitter** control. It shows how to:

* Add panes and split bars to the splitter, creating resizable regions.

* Set the orientation of the splitter.

* Load external content into a pane.

* Configure which panes can be collapsed.

* Specify the minimum dimensions of a pane.

* Add a sliding zone to a pane.

* Add sliding panels to a sliding zone.

* Use skins to provide a consistent look & feel.

## RadSplitter

1. Drag a **RadSplitter** control from the toolbox onto your Web page. It's [Smart Tag](https://www.telerik.com/products/aspnet-ajax/documentation/controls/splitter/design-time) should appear automatically:

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/461a799d28f843d12eb246ebe73c84ad/radsplittersmarttag.png)

2. In the **Skin** drop-down list, select the "WebBlue" skin:

   ![Select Skin](https://www.telerik.com/products/aspnet-ajax/documentation/assets/529e0b2cf656f74dc007faadedd48f71/splitter-selectskin.png)

3. Right-click the **RadSplitter** control to display its context menu, and choose Properties:

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/44310c164db9ca5f5e8693df4567e3c7/splitter-chooseproperties.png)

4. In properties pane for the splitter, locate the **LiveResize** property, and set it to **True**. This causes the panes of the splitter to display their content even during resize operations. Locate the **Orientation** property and set it to "Horizontal". This causes the panes of the splitter to stack on top of each other:

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/199bd14465e1b2b0c55573ad43a06604/radsplitterproperties.png)

5. Drag a **RadPane** control from the toolbox onto the surface of the splitter:

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/49895d5c610bcbcca050e45e427e5f09/splitter-addapane.png)

6. In the properties pane, set the **ContentUrl** property to "[https://www.telerik.com](https://www.telerik.com/)". This tells the pane to load its content from an external source (the Telerik Web site) :

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/068cc2a2fc14891b166b61cd200ac17b/splitter-contenturl.png)

7. Drag a **RadSplitBar** from the toolbox onto the **RadSplitter** control, below the **RadPane**. Using the properties pane, set its **CollapseMode** property to "Forward". This gives the split bar the ability to collapse the first **RadPane**, but not the one that follows it.

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c146f352e4b216f0737529aa4133965a/splitter-collapsemode.png)

8. Drag a second **RadPane** from the toolbox onto the **RadSplitter** control, below the **RadSplitBar**.

9. Set its **Height** property to "25px", its **MinHeight** property to 25 and its **Scrolling** property to "None". The **Height** property sets its initial height to 25 pixels. The **MinHeight** property ensures that this pane cannot be resized any smaller. The **Scrolling** property prevents the pane from displaying scroll bars.

   ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/87d2824c97e34e18949f2c7c3c335931/splitter-radpane2properties.png)

10. Drag a **RadSlidingZone** control from the toolbox onto the surface of **RadPane2**. Set its **SlideDirection** property to "Top". This specifies that sliding panes inside the sliding zone expand upward.

11. Drag a **RadSlidingPane** from the toolbox onto the surface of the sliding zone. Set the following properties:
    * Set **TabView** to "TextOnly". This specifies that the tab for the sliding panel displays the title but no image.
    * Set **Title** to "Colors". This is the title that appears on the tab for the sliding panel.
    * Set **Height** to 105.
    * Set **EnableResize** to **False**. This prevents the sliding panel from being resized when it is expanded.

12. Drag a **RadColorPicker** control from the toolbox onto the surface of the sliding panel, to give it some content to display.

13. Drag another **RadSlidingPane** from the toolbox onto the surface of the sliding zone. Set the following properties:
    * Set **TabView** to "TextOnly".
    * Set **Title** to "Calendar".
    * Set **Height** to "180".

14. Drag a **RadCalendar** control from the toolbox onto the surface of the **RadSlidingPane** you just added. Set its **Skin** property to "WebBlue", so that it matches the splitter controls.

15. Run the application. The **RadSplitter** control appears, showing the two panes you added. The top pane shows content from an external source. The lower pane shows the **RadSlidingZone**, with tabs for the two **RadSlidingPane** controls:

    ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/2e2b8ed71b85f14478ef2106a5f8a789/splitter-gettingstarted1.png)

16. Note that the split bar has a little arrow in the center, click on this arrow to collapse the first pane. The arrow changes direction.

    ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/68cb7058af39af2eb4cd7845ca5cba4c/splitter-collapsedpane.png)

17. Click on the arrow to restore the first pane.

18. Drag on the split bar. Note that it doesn't let you make the second pane any smaller, but you can resize in an upward direction, and then down again.

    ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/7738de5e753b438e0563c4536c60dba1/splitter-gettingstarted3.png)

19. Hover the mouse over the tabs in the **RadSlidingZone**, and see the sliding panels appear and disappear:

    ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/11c60213482d05690e628f5f171e578d/splitter-gettingstarted2.png)

20. Note the controls on the upper right corner of the sliding panel. You can use these to pin the panel in place or make it collapse. The "Calendar" panel has a bar at the top that you can drag on to resize the panel, while the "Colors" panel has no such capability:

    ![](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c673434a9300856a64ce85edc6e83bae/splitter-gettingstarted4.png)