--- title: "Expander Overview" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "controls [WPF], Expander" - "Expander control [WPF], about Expander control" ms.assetid: 877bf425-0e54-49ec-8fd2-13a211377abb --- # Expander Overview An control provides a way to provide content in an expandable area that resembles a window and includes a header. ## Creating a Simple Expander The following example shows how to create a simple control. This example creates an that looks like the previous illustration. [!code-xaml[ExpanderExample#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderExample/CSharp/Page1.xaml#2)] The and of an can also contain complex content, such as and objects. ## Setting the Direction of the Expanding Content Area You can set the content area of an control to expand in one of four directions (, , , or ) by using the property. When the content area is collapsed, only the and its toggle button appear. A control that displays a directional arrow is used as a toggle button to expand or collapse the content area. When expanded, the tries to display all of its content in a window-like area. ## Controlling the Size of an Expander in a Panel If an control is inside a layout control that inherits from , such as , do not specify a on the when the property is set to or . Similarly, do not specify a on the when the property is set to or . When you set a size dimension on an control in the direction that the expanded content is displayed, the takes control of the area that is used by the content and displays a border around it. The border shows even when the content is collapsed. To set the size of the expanded content area, set size dimensions on the content of the , or if you want scrolling capability, on the that encloses the content. When an control is the last element in a , [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] automatically sets the dimensions to equal the remaining area of the . To prevent this default behavior, set the property on the object to `false`, or make sure that the is not the last element in a . ## Creating Scrollable Content If the content is too large for the size of the content area, you can wrap the content of an in a in order to provide scrollable content. The control does not automatically provide scrolling capability. The following illustration shows an control that contains a control. **Expander in a ScrollViewer** ![Screenshot that shows an expander with ScrollBar.](./media/expander-overview/expander-scrollbar-control.jpg) When you place an control in a , set the dimension property that corresponds to the direction in which the content opens to the size of the content area. For example, if you set the property on the to (the content area opens down), set the property on the control to the required height for the content area. If you instead set the height dimension on the content itself, does not recognize this setting and therefore, does not provide scrollable content. The following example shows how to create an control that has complex content and that contains a control. This example creates an that is like the illustration at the beginning of this section. [!code-csharp[ExpanderRichContent#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml.cs#1)] [!code-vb[ExpanderRichContent#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpanderRichContent/VisualBasic/Window1.xaml.vb#1)] [!code-xaml[ExpanderRichContent#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml#1)] ## Using the Alignment Properties You can align content by setting the and properties on the control. When you set these properties, the alignment applies to the header and also to the expanded content. ## See also - - - [How-to Topics](expander-how-to-topics.md)