2013-10-15 60 views
2

请考虑以下LinearGadientBrush,'A'。通常,如果将该笔刷指定为矩形的背景,则无论大小如何,都会使用整个渐变填充整个区域。 (见B)。是否有可能只渲染一个GradientBrush的百分比?

我们试图说'对于这个特定的控件,只能使用刷子的第一个xx%来填充',所以我们可以实现基于百分比的渐变填充,如'C'。

enter image description here

注:我们知道我们将负责展示其百分比,因为没有办法让系统自动计算什么的百分比表示。

我们目前正在做这件事的方式显示在'D'中。我们以100%的大小定义一个矩形(所以填充为100%),然后将其放置在另一个控件中并左对齐。然后,我们将外部控件的ClipsToBounds设置为true,并将其宽度设置为内矩形宽度的所需百分比。 (见D)这种方法很有效,但在视觉树中添加了额外的元素,如果可能的话,我们试图消除这些元素。

回答

1

使用LinearGradientBrush的EndPoint属性。在你的情况下,如果你设置EndPoint="2,0"你应该得到你想要的结果。

如果您需要做更动态的事情,您可以将点对象绑定到EndPoint属性。如果将该值设置为1,0,则它将显示100%的梯度,或者2,0显示梯度的前50%。

StartPoint允许您在渐变的另一侧做同样的事情。

+0

关闭,但这里有一个问题。由于StartPoint和EndPoint是笔刷本身的属性,因此每个渲染值需要一个笔刷实例。尽管如此,它还是不适合你的信息,因为它引导了我刚刚发布的使用MappingMode达到同样效果的答案。 – MarqueIV

1

找到它。这是画笔的MappingMode。如果将其设置为绝对值,则它以实际坐标呈现,而不是以控件本身的百分比呈现,这意味着如果“完整”宽度为240单位,则将终点设置为240.(请注意,GradientStop偏移始终在StartPoint和EndPoint之间的距离的百分比。)

下面是你需要一个刷子,每个'宽度'的控制你想渲染,这意味着如果你有10个条形图在200单位宽和六个更多在150个单位宽,你需要两个刷子,每个宽度一个。

下面是从MSDN的例子...

<!-- The MappingMode property is set to "Absolute" which specifies that the coordinate 
    system used for the StartPoint and EndPoint properties is not relative to the 
    Brush output area. Values are interpreted directly in local space. --> 

<!-- Create a brush that is absolutely 200 units wide --> 
<LinearGradientBrush MappingMode="Absolute" 
    StartPoint="0,0" EndPoint="200,0"> 

    <GradientStop Color="Yellow" Offset="0" /> 
    <GradientStop Color="Red"  Offset="0.25" /> 
    <GradientStop Color="Blue"  Offset="0.75" /> 
    <GradientStop Color="LimeGreen" Offset="1" /> 

</LinearGradientBrush> 
相关问题