Custom Brush - я хочу, чтобы два градиента связывали их вместе

Question

Я делаю гистограмму и хочу два отдельных градиента для каждого бара. Сначала я хочу, чтобы градиент перешел сверху вниз от сплошного красного до прозрачного красного. Я хочу закрасить поверх этого градиент, идущий справа налево, от черного к непрозрачному.

Итак - в левом нижнем углу мы должны иметь;

• Внизу слева - Альфа 0
• Внизу справа - Альфа 0
• Верхний левый - Альфа 255 Цвет Красный
• Вверху справа - Альфа 255 Цвет Черный

Таким образом, в действительности я хочу получить сплошной цвет, добавить градиент слева направо к черному, затем взять его результат и добавить градиент сверху вниз к прозрачности.

Все это, и я хочу, чтобы это было одной кистью, это вообще возможно?

Answer 1

Да. Используйте VisualBrush, Visual которого представляет собой прямоугольник внутри границы, чтобы объединить две другие кисти.

Примерно так:

<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 в XAML Cruncher Чарльза Петцольда , чтобы увидеть результаты.

Удачи,
Джим МакКарди
Face to Face Software и YinYangMoney