如何快速地为控件添加条纹背景(striped background)

想必诸位会有一个为各种控件绘制一个条纹背景的情况出现,然而实际上并不需要请美工切一张 .png 给你然后扔到 Background 里,而是可以通过 LinearGradientBrush 在 XAML 里完成所需要的一切。

你可能对此表示怀疑,因为看上去 LinearGradientBrush 的中文应该是 “线性渐变画刷”而不是什么条纹, 而且大家通常的用法也是这种:

图片来自 MSDN
这是渐变的对不对呀?根本不是美工的那种效果,是

化学的……

先举个例子,假设你想给一个矩形的背景设置为45°倾斜的条纹

(不准说不是45°的)

只需要这样设置:

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">  
    <GradientStop Offset="0" Color="DarkRed"/>
    <GradientStop Offset="0.5" Color="DarkRed"/>
    <GradientStop Offset="0.5" Color="Black"/>
    <GradientStop Offset="1" Color="Black"/>

    <LinearGradientBrush.RelativeTransform>
        <ScaleTransform ScaleX="0.01" ScaleY="0.01"/>
    </LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>

有些有趣的事情需要注意:

  • 两个 GradientStop 的偏移量都是0.5,这样一来就从 0 到 1 分割为了两种颜色,如果你想添加第三种颜色,则可以插入一个从 0.33 到 0.66 的 GradientStop
  • SpreadMethod 的值为 Repeat,即可得到重复绘制的图形
  • GradientBrush 的 RelativeTransform 属性允许我们改变条纹的诸多特效。在此例中我只控制了宽度,你可以添加 RotateTransform 来调整方向并用 TransformGroup 将二者包含起来,由于二维直线集合的图像并不复杂,使用 MatrixTransform 进行矩阵变换并不十分合适,详情请参阅 MSDN

With all this knowledge, who doesn’t want to paint the town ;-)

引用自原文: Pixel-In-Gene

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章