WPF Container Controls - ScrollViewer, GroupBox, TabItem and Expander Control
Specialized containers are a variant of content controls but unlike content controls which can hold simple content type such as string or UIElement object, the specialized containers has larger impact and they affect the outlook of the larger portion of content visible on the screen. In this article, some important and extremely handy WPF specialized containers have been explained.
The first control that we will discuss is the ScrollViewer control that provides a scrollable space in which other elements can be placed. The ScrollViewer control directly inherits the ContentControl class, thus allowing only single element to be placed inside it. The other three important Specialized containers that inherit from HeaderedContentControl (which inherits from the ContentControl) are TabItem, Expander and GroupBox. Difference between the HeaderedContentControl and the parent ContentControl class is that the former control can hold two elements, one in the header space and the other in the content space, whereas the latter can only hold one element.
This article is for the readers having basic understanding of the WPF syntax and those who idea of the application structure of WPF. If you are totally new to WPF, I would suggest you to first read this article explaining basics of WPF. You can then comeback and continue with this tutorial. If you have prior understanding of WPF, you are already good to go.
Situation often arises where you need to add large amounts of data on limited amounts of space. In such scenarios, using WPF ScrollViewer controls is the best solution. The idea of the ScrollViewer control is that it actually wraps all the content that you want to place in a scrollable window. Though, the ScrollViewer can hold only single element like all other content controls, using a layout container can help placing multiple controls in the scrollable window. The following example demonstrates actually how a ScrollViewer control can be used to scroll through multiple controls in a Grid layout. Have a look at the first example of this article:
The Grid Layout contains 7 rows and two columns. In the first column of all the rows TextBox controls have been added and in the second columns of all the rows, button controls have been. However, the height of the top level Window control is only 180 device independent points. All the rows of the Grid cannot fit in the column, but since the Grid has been wrapped inside a ScrollViewer control, therefore a vertical scroll bar will appear that can be used to scroll and see the contents inside the output window. The output of the code in Example1 is as follows:
It can be seen from the output that a scroll bar has appeared on the right side of the window. If screen is resized to the extent that all the controls can fit into it, the scroll bar will automatically disappeared. It will reappear again if the window is shrinking back to smaller size so that all the contents can fit into it.
In Example1, by default a vertical scroll bar has appeared. If you also want a horizontal scroll bar on your window, the HorizontalScrollBarVisibility property of the ScrollViewer control can be set to True or Auto.
In this section, three of the most commonly used HeaderedContentControls i.e. GroupBox, TabItem and the Expander controls have been explained.
The HeaderedContentControl consists of a header and content. The simplest of all the HeaderedContentControls is the GroupBox control. The GroupBox control consists of a box with a header that contains a title. The second Example of this tutorial demonstrates the usage of GroupBox control. Have a look at the code in Example2.
In the output, a thin box is visible around all the button control; the title of the GroupBox is “Choose Color” which is also visible.
Another extremely important HeaderedContentControl is the TabItem control which actually represents a tab or a page in TabControl. The most important property of the TabItem class is the IsSelected property which basically tells whether the current tab is the one that is being displayed on the TabControl. To see the actual working of the TabItem, have a look at the third example of this tutorial.
The first TabItem control has a title “Choose Size”. Inside this TabItem a StackPanel has been added which contains four radio controls having different content representing the sizes. At the end a simple button control with content “Save Settings” have been added in the StackPanel.
Next another TabItem control with Header property set to “Choose Color” has been added to the TabControl. The second TabItem is slightly different from the first one. The IsSelected property of the second TabItem is set to True, which means that this TabItem will be displayed on the TabControl by default when application runs. The second TabItem also contains a StackPanel with some RadioButtons and a simple Button control. The output of the code in Example3 would look like this:
It can be seen clearly in the above figure that by default, the second tab with header “Choose Color” is displayed on the TabControl. This is due to the fact that its IsSelected property has been set to True. If no TabItem has this property set to true then by default the first TabItem will be displayed on the TabControl when the application runs.
A very interesting thing about the Header of the TabItem controls is that since Header portion can hold one child. Therefore, a StackPanel of any other Layout can be placed inside the header of a TabItem. Inside the StackPanel, as many items as you like can be placed. This is done by accessing the Header portion of TabItem by calling TabItem.Header attached property of the TabItem whose header is to be accessed. The next example of this tutorial demonstrates this concept. Have a look at the fourth example of this article:
It can be seen from the output that second TabItem’s header contains a text box and a button as mentioned in the code.
The last control in the category of the HeaderedContentControls is the the Expander control which is probably one of the most fascinating controls in the entire WPF controls library.
The basic idea of the Expander control is to wrap large amounts of data in a small portion. The user will have to click a small arrow button that will expand the underlying information. This technique is similar to webpages, where a slider window opens upon clicking a small link or arrow button. Let us see the Expander control in action with the help of an example. Have a look at the 5th example of this tutorial.
In the output of the above code, two Expander controls will be added in the form of a stack. The top element would be the Sizes element. The bottom element will be the Colors element. To the left of both these elements, a small arrow button would appear which would point downwards. This means that if this button is clicked, the control will expand downwards and display the content that it wraps. Once a control is expanded, the Button arrow would point upwards, which means that control is already expanded and clicking the button would collapse it upwards. The output of the code in Example5 is as follows:
Here, the Sizes Expander has been expanded and the Colors Expander has not yet been expanded. Clicking the button left to the Colors will expand the Colors element as well.
In the output, A button appears on the top with text Sizes below it. The arrow in the button would point to right since its direction is set to right, and if this arrow is clicked, the content expands on the right as shown in the output. For the second, Expander control, the arrow direction of the button would be towards left since it has ExpandDirection property set to left.
|All times are GMT +5.5. The time now is 11:44.|