WPF 控件专题 BulletDecorator控件详解

1、BulletDecorator介绍

    BulletDecorator 表示一个布局控件，该控件将项目符号与另一个可视对象对齐。

   只能包含一个Child。

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

2、常用属性介绍

    Background：背景；

    Width/Height：宽度/高度；    Name：元素标识名称；    IsEnabled：使能，是否可用；    Margin：外边距；

    Opacity：透明度；    Visibility：可见性；    IsVisible：是否可见；    FlowDirection：其子元素的流动方向；

    LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。    RenderTransform：元素的呈现位置的转换信息；
    
    RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
    
    HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。

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

3、具体示例

<WrapPanel>
	<BulletDecorator  Margin="10" VerticalAlignment="Center" Background="YellowGreen">
		<BulletDecorator.Bullet>
			<Image Source="rose.png"/>
		</BulletDecorator.Bullet>
		<TextBlock Width="100" TextWrapping="Wrap" HorizontalAlignment="Left" Foreground ="Purple">
			秋风清，秋月明，落叶聚还散，寒鸦栖复惊，相思相见知何日，此时此夜难为情。
			入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极，早知如此绊人心，还如当初不相识。
			—— 李白《秋风词 》
		</TextBlock>
	</BulletDecorator>

	<BulletDecorator  Margin="10" VerticalAlignment="Center" Background="YellowGreen" FlowDirection="RightToLeft">
		<BulletDecorator.Bullet>
			<Image Source="rose.png"/>
		</BulletDecorator.Bullet>
		<TextBlock Width="100" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground ="Purple">
			秋风清，秋月明，落叶聚还散，寒鸦栖复惊，相思相见知何日，此时此夜难为情。
			入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极，早知如此绊人心，还如当初不相识。
			—— 李白《秋风词 》
		</TextBlock>
	</BulletDecorator>

	<StackPanel>
	<!--使用TextBlock控件，不能居中对齐，即使设置VerticalAlignment也是无效果的，原因：MSDN上有对这个的解释，
		如果子控件为TextBlock时，Bullet将与其上端对齐，也就是Top，哪些是居中，它也始终保持与基线对齐-->
		<BulletDecorator HorizontalAlignment="Center"  VerticalAlignment="Center"  FlowDirection="RightToLeft" Margin="10">
			<BulletDecorator.Bullet>
				<Rectangle  RadiusX="2" RadiusY="2" Stroke="Black" StrokeThickness="1" Height="18" Width="18" Fill="YellowGreen">
				</Rectangle>
			</BulletDecorator.Bullet>
			<TextBlock FontSize="12" VerticalAlignment="Center">秋风清，秋月明</TextBlock>
		</BulletDecorator>
		<BulletDecorator HorizontalAlignment="Center"  VerticalAlignment="Center" FlowDirection="LeftToRight" Margin="10">
			<BulletDecorator.Bullet>
				<Rectangle  RadiusX="2" RadiusY="2" Stroke="Black" StrokeThickness="1" Height="18" Width="18" Fill="YellowGreen">
				</Rectangle>
			</BulletDecorator.Bullet>
			<Label FontSize="12"  Foreground="#dddddd">秋风清，秋月明</Label>
		</BulletDecorator>
	</StackPanel>
</WrapPanel>

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

4、效果图

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

5、总结和扩展

    BulletDecorator简单来说就是用来控制项目布局的，其布局方式分为：从左往右（默认）、从右往左；是通过FlowDirection属性来设置的；

    建议使用Lable替代TextBlock控件进行文本的显示。

    BulletDecorator只能添加一个子元素，可以配合WrapPanel、StackPanel等控件一起使用，进行布局。

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