Search content within the blog

Friday, December 2, 2011

Expander control in WPF

An Expander control provides a way to provide content in an expandable area that resembles a window and includes a header.

The Content and Header of an Expander can also contain complex content, such as RadioButton and Image objects.


Setting the Direction of the Expanding Content Area

You can set the content area of an Expander control to expand in one of four directions (Down, Up, Left, or Right) by using the ExpandDirection property. When the content area is collapsed, only the Expander Header and its toggle button appear. A Button control that displays a directional arrow is used as a toggle button to expand or collapse the content area. When expanded, the Expander tries to display all of its content in a window-like area.

Creating Scrollable Content

When you place an Expander control in a ScrollViewer, set the ScrollViewer dimension property that corresponds to the direction in which the Expander content opens to the size of the Expander content area. For example, if you set the ExpandDirection property on the Expander to Down (the content area opens down), set the Height property on the ScrollViewer control to the required height for the content area. If you instead set the height dimension on the content itself, ScrollViewer does not recognize this setting and therefore, does not provide scrollable content.

The following example shows how to create an Expander control that has complex content and that contains a ScrollViewer control.

XAML

<Window x:Class="Practises.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Expander Width="200" HorizontalContentAlignment="Stretch">
<Expander.Header>
<TextBlock Margin="20,0,0,0">My Expander</TextBlock>
</Expander.Header>
<Expander.Content>
<ScrollViewer Height="180">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</TextBlock>
</ScrollViewer>
</Expander.Content>
</Expander>
</Grid>
</Window>



No comments:

Post a Comment