Question

我正在制作条形图，我希望每个条形图有两个单独的渐变。首先，我想要一个渐变从上到下的纯红色到透明的红色。我想画一个从右到左，黑色到不透明的渐变的顶部。

所以 - 在左下角我们应该有;

左下角 - Alpha 0
右下角 - Alpha 0
左上角 - Alpha 255颜色红色
右上角 - Alpha 255颜色黑色

所以实际上我想采用纯色，从左到右渐变添加到黑色然后取出它的输出并添加从上到下的渐变到透明度。

所有这一切，我希望它只需一支刷子，这甚至可能吗？

Answer 1

是。使用VisualBrush，其Visual是Border中的Rectangle，以组合其他两个画笔。

这样的事情：

<LinearGradientBrush x:Key="UnderBrush" EndPoint="0,1"> 
  <GradientStop Color="#FFFF0000" Offset="0" /> 
  <GradientStop Color="#00FF0000" Offset="1" /> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="OverBrush" EndPoint="1,0"> 
  <GradientStop Color="#00000000" Offset="0" /> 
  <GradientStop Color="#FF000000" Offset="1" /> 
</LinearGradientBrush> 

<VisualBrush x:Key="CombinedBrush">
  <VisualBrush.Visual>
    <Border Background="{StaticResource UnderBrush}">
      <Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
    </Border>
  </VisualBrush.Visual>
</VisualBrush>

CombinedBrush可用于绘制条形图，您将获得所描述的效果。

Silverlight版

由于Silverlight没有VisualBrush，您必须在代码中构建WritableBitmap并将其与ImageBrush一起使用：

<ImageBrush x:Key="CombinedBrush">
  <my:VisualBrushSimulator.Visual>
    <Border Background="{StaticResource UnderBrush}">
      <Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
    </Border>
  </my:VisualBrushSimulator.Visual>
</ImageBrush>

以下是VisualBrushSimulator的实现方式：

public class VisualBrushSimulator : DependencyObject
{
  public Visual GetVisual(DependencyObject obj) { return (Visual)obj.GetValue(VisualProperty); }
  public void SetVisual(DependencyObject obj, Visual value) { obj.SetValue(VisualProperty, value); }
  public static readonly DependencyProperty VisualProperty = DependencyProperty.RegisterAttached("Visual", typeof(Visual), typeof(VisualBrushSimulator), new PropertyMetadata
  {
    PropertyChangedCallback = (obj, e) =>
    {
      int width=1000;
      int height=1000;
      var bitmap = new WritableBitmap(width, height);
      bitmap.Render((Visual)e.NewValue, new ScaleTransform { ScaleX = width, ScaleY = height });
      ((ImageBrush)obj).ImageSource = bitmap;
    }
  });
}

请注意，这不是真正的VisualBrush模拟，因为对Visual的更改不会影响画笔。

Answer 2

如果条形图的模板基于网格，则可以覆盖2个渐变，如下所示。我不确定我是否完全理解你想要的第二个渐变，但我认为你的意思是从左到右，透明的黑色到纯黑色。如果我误解了，很容易在下面的XAML中更改第二个渐变。

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Width="100" Height="300" >
        <Grid>
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#FFFF0000" Offset="0" />
                    <GradientStop Color="#00FF0000" Offset="1" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
        <Grid>
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#00000000" Offset="0" />
                    <GradientStop Color="#FF000000" Offset="1" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
    </Grid>
</UserControl>

将此XAML粘贴到Charles Petzold's XAML Cruncher以查看结果。

祝你好运，
Jim McCurdy
面对面软件和YinYangMoney

自定义画笔 - 我想要两个渐变链接在一起

2 个答案: