WPF Expander控件(扩展面板)
2013-09-14 16:28 Andrew.Wangxu 阅读(5544) 评论(0) 编辑 收藏 举报这算是我比较喜欢的一个控件,以前在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>
源码下载:https://files.cnblogs.com/andrew-blog/1022_Expander.rar
开发工具:VS2012