• WPF 控件专题 BulletDecorator控件详解


    1、BulletDecorator介绍

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

       只能包含一个Child。

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

    2、常用属性介绍

        Background:背景;

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

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

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

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

    3、具体示例

    1. <WrapPanel>
    2. <BulletDecorator Margin="10" VerticalAlignment="Center" Background="YellowGreen">
    3. <BulletDecorator.Bullet>
    4. <Image Source="rose.png"/>
    5. BulletDecorator.Bullet>
    6. <TextBlock Width="100" TextWrapping="Wrap" HorizontalAlignment="Left" Foreground ="Purple">
    7. 秋风清,秋月明,落叶聚还散,寒鸦栖复惊,相思相见知何日,此时此夜难为情。
    8. 入我相思门,知我相思苦,长相思兮长相忆,短相思兮无穷极,早知如此绊人心,还如当初不相识。
    9. —— 李白《秋风词 》
    10. TextBlock>
    11. BulletDecorator>
    12. <BulletDecorator Margin="10" VerticalAlignment="Center" Background="YellowGreen" FlowDirection="RightToLeft">
    13. <BulletDecorator.Bullet>
    14. <Image Source="rose.png"/>
    15. BulletDecorator.Bullet>
    16. <TextBlock Width="100" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground ="Purple">
    17. 秋风清,秋月明,落叶聚还散,寒鸦栖复惊,相思相见知何日,此时此夜难为情。
    18. 入我相思门,知我相思苦,长相思兮长相忆,短相思兮无穷极,早知如此绊人心,还如当初不相识。
    19. —— 李白《秋风词 》
    20. TextBlock>
    21. BulletDecorator>
    22. <StackPanel>
    23. <BulletDecorator HorizontalAlignment="Center" VerticalAlignment="Center" FlowDirection="RightToLeft" Margin="10">
    24. <BulletDecorator.Bullet>
    25. <Rectangle RadiusX="2" RadiusY="2" Stroke="Black" StrokeThickness="1" Height="18" Width="18" Fill="YellowGreen">
    26. Rectangle>
    27. BulletDecorator.Bullet>
    28. <TextBlock FontSize="12" VerticalAlignment="Center">秋风清,秋月明TextBlock>
    29. BulletDecorator>
    30. <BulletDecorator HorizontalAlignment="Center" VerticalAlignment="Center" FlowDirection="LeftToRight" Margin="10">
    31. <BulletDecorator.Bullet>
    32. <Rectangle RadiusX="2" RadiusY="2" Stroke="Black" StrokeThickness="1" Height="18" Width="18" Fill="YellowGreen">
    33. Rectangle>
    34. BulletDecorator.Bullet>
    35. <Label FontSize="12" Foreground="#dddddd">秋风清,秋月明Label>
    36. BulletDecorator>
    37. StackPanel>
    38. WrapPanel>

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

    4、效果图

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

    5、总结和扩展

        BulletDecorator简单来说就是用来控制项目布局的,其布局方式分为:从左往右(默认)、从右往左;是通过FlowDirection属性来设置的;

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

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

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

  • 相关阅读:
    使用 Python 进行测试(6)Fake it...
    在 Vue & react 中,哪些地方用到闭包?
    PyQt5 QWebEngineView网页交互
    AUTOSAR规范与ECU软件开发(实践篇)10、AUTOSAR技术展望
    光导布局设计工具
    使用 PYTORCH 进行图像风格迁移
    kafka系列(一)安装使用及基本原理
    JSON数据处理工具-在线工具箱网站tool.qqmu.com的使用指南
    Spring基础3——AOP,事务管理
    Hive企业级调优
  • 原文地址:https://blog.csdn.net/BYH371256/article/details/125460709