WPF Expander控件（扩展面板）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这算是我比较喜欢的一个控件，以前在Winform中也常用类似的。它包装了一块内容，通过单击一个小箭头按钮可以显示或隐藏所包含的内容。在线帮助以及Web页面经常使用这种技术，因为既可以包含大量内容，而又不会让用户面对大量的多余信息而感到无所适从。

使用 Expander控件是非常简单的——只需要在该控件内部包装希望使其能够折叠的内容，通常，每个 Expander 控件开始都是折叠的，但是可以在代码或标记中设置 IsExpanded 属性来改变这种行为。控件的折叠是非常有趣，展开于叠起自动排版，这是我非常喜欢的。下面是我编写的一个Grid面板具有4个Expander控件的例子：

（折叠效果）

（展开效果）

XAML代码：

<Window x:Class="_1022_Expander.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>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <Expander Margin="5" Padding="5" Header="面板(1)">
<TextBlock>这是第一块面板内容，TextBlock</TextBlock>
</Expander>
<Expander Grid.Column="1" Margin="5" Padding="5" Header="面板(2)" ExpandDirection="Right">
<TextBlock TextWrapping="Wrap">第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。第二块面板多内容测试。。</TextBlock>
</Expander>
<Expander Grid.Row="1" Margin="5" Padding="5" Header="面板(3)">
<DockPanel>
<Label HorizontalAlignment="Left">伸缩面板：</Label>
<TextBox>Andrew-blog</TextBox>
</DockPanel>
</Expander>
<Expander Grid.Row="1" Grid.Column="1" Header="面板(4)">
<Label>http://Andrew-blog.cnblogs.com</Label>
</Expander>
</Grid>
</Window>