WPF 控件专题 Expander控件详解

1、Expander介绍

    Expander控件显示具有可折叠内容显示窗口的标题。是一个可以展开和折叠的控件，它包含两部分——标头和内容。

    控件不会自动提供 Expander 滚动功能；如果展开窗口的内容太大，可以包装控件中ScrollViewer的内容Expander以提供可滚动的内容。

    若要使控件Expander正常工作，请在属性设置为Down或指定Up控件时ExpandDirection不要指定HeightExpander控件。 同样，当属性设置为Left或指定Right控件时ExpandDirection，请勿指定WidthExpander控件。 

    在控件上 Expander 按展开内容显示的方向设置大小时，大小参数定义的区域将显示其周围的边框。 即使窗口折叠，此区域也会显示。 若要设置展开窗口的大小，请对控件的内容或ScrollViewer包含内容的内容Expander设置大小维度。

    可以通过设置控件上的HorizontalContentAlignment属性来VerticalContentAlignment定义内容的对齐方式Expander。 这些属性应用于标题和展开窗口的内容。

**************************************************************************************************************

2、常用属性介绍

    FontFamily：字体系列；    FontSize：字体大小；    FontStretch：字体在屏幕上紧缩或加宽的程度；FontWeight：字体粗细；
    
    Background：背景；    BorderBrush：边框颜色；    BorderThickness：边框宽度；    Foreground：前景色；
    
    Width/Height：宽度/高度；    Name：元素标识名称；    IsEnabled：使能，是否可用；    Margin：外边距；
    
    Opacity：透明度；    Visibility：可见性；    IsVisible：是否可见；    
    
    LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。    RenderTransform：元素的呈现位置的转换信息；
    
    RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
    
    HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。
    
    HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。
    
    Content：获取或设置 ContentControl 的内容；
    
    ContentStringFormat：获取或设置一个撰写字符串，该字符串指定如果 Content 属性显示为字符串，应如何设置该属性的格式；
    
    ExpandDirection：Expander 内容窗口的打开方向；
    
    FlowDirection：文本和其他用户界面 (UI) 元素在控制其布局的任何父元素内流动的方向；
    
    Header：每个控件的标题所用的数据。

    IsExpanded：Expander 内容窗口是否可见。

**************************************************************************************************************

3、具体示例代码

<WrapPanel Margin="10">
	<Expander Name="myExpander" Background="#555a64"  HorizontalAlignment="Left" Header="李白《秋风词 》"  ExpandDirection="Down" 
			  IsExpanded="True" Width="200" VerticalAlignment="Top" Foreground="#dddddd" FontSize="14" FontFamily="幼圆">
		<TextBlock TextWrapping="Wrap" Margin="10 10">
			秋风清，秋月明，落叶聚还散，寒鸦栖复惊，相思相见知何日，此时此夜难为情。
			入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极，早知如此绊人心，还如当初不相识。
			—— 李白《秋风词 》
		TextBlock>
	Expander>
 
	<Expander ExpandDirection="Right" Width="200" Margin="10 0" FontSize="14" FontFamily="华文细黑">
		<Expander.Header>
			<TextBlock Text="李白     秋风词 " FontWeight="Bold" TextWrapping="Wrap" Width="20"/>
		Expander.Header>
		<Expander.Content>
			<TextBlock TextWrapping="Wrap" >秋风清，秋月明，落叶聚还散，寒鸦栖复惊，相思相见知何日，此时此夜难为情。
			入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极，早知如此绊人心，还如当初不相识。
			—— 李白《秋风词 》
			TextBlock>
		Expander.Content>
	Expander>
WrapPanel>

**************************************************************************************************************

4、效果图

**************************************************************************************************************

5、总结和扩展

    ExpandDirection有四种选择：Down、Up、Left、Right；

    FlowDirection：通过该属性设置，控件内元素的流向，如下图：对第二个Expander示例设置FlowDirection="RightToLeft"。

**************************************************************************************************************