基于int值的动态渐变背景

时间:2013-09-13 07:40:26

标签: c# wpf xaml gradient lineargradientbrush

对于订单概述我有一个包含不同优先级的多个订单的列表。它们从-10 =>到达非常高优先级+20 =>低优先级。 基于此优先级,我想要动态返回渐变画笔颜色。

例如:

  • 从-10到-0.5它应该从黑暗渐渐变成橙色
  • 从-0.5到+0.5它应该从橙色变成黄色变成石灰
  • 从+0.5到+10,它应该从石灰变为绿色

我以前从未这样做过,绝对不知道如何解决这个问题。即使你没有完整的解决方案,给我一个提示也是非常好的。

此致 约翰内斯

5 个答案:

答案 0 :(得分:1)

我猜你会对这种颜色感到反应: http://msdn.microsoft.com/en-us/library/system.drawing.color.aspx

查找此链接: Is there an easy way to blend two System.Drawing.Color values?

它告诉你如何在两种颜色之间进行混合

在此之后你可以检索画笔: convert from Color to brush

答案 1 :(得分:1)

您可以使用一些时髦的算法告诉您是否存在优先级,并根据需要相应地计算每个渐变的位置,或者为每个优先级创建一个矩形区域,然后使用以下方法添加渐变。请参阅system.windows.media.lineargradientbrushWPF Brushes Overview

在xaml

<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
       <GradientStop Color="Yellow" Offset="0.0" />
       <GradientStop Color="Red" Offset="0.25" />
       <GradientStop Color="Blue" Offset="0.75" />
       <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

然后在C#

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

答案 2 :(得分:1)

如果你想在XAML中使用画笔,可能就是你想要的DataTrigger。

使用触发器,您可以动态更改样式。在这个例子中,我正在改变矩形填充属性,基于优先级属性值:

 <Grid>
  <Grid.Resources>

    <LinearGradientBrush x:Key="HighPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="DarkRed" />
      <GradientStop Color="Orange" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="NormalPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="Orange" />
      <GradientStop Color="Yellow" Offset="0.5" />
      <GradientStop Color="Lime" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LowPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="Lime" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
  </Grid.Resources>

    <Rectangle Height="150" Width="150">
      <Rectangle.Style>
        <Style TargetType="Rectangle">
          <Style.Triggers>
            <DataTrigger Binding="{Binding Priority}" Value="0">
              <Setter Property="Fill" Value="{StaticResource LowPriorityBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Priority}" Value="1">
              <Setter Property="Fill" Value="{StaticResource NormalPriorityBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Priority}" Value="2">
              <Setter Property="Fill" Value="{StaticResource HighPriorityBrush}" />
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </Rectangle.Style>
    </Rectangle>
   </Grid>

ViewModel的Priority属性返回如下内容:

private double realPriority; // your priority
public double Priority
{
  get
  {
    if (this.realPriority < -0.5) return 0;
    if (this.realPriority > 0.5) return 2;
    return 1;
  }
}

答案 3 :(得分:1)

using System;
using System.Windows.Media;
using SDColor = System.Drawing.Color;

//Developed by امین امیری دربان
namespace APREndUser.CodeAssist
{
    public static class ColorHelper
    {
      public static SDColor ToSDColor(SWMColor color) => SDColor.FromArgb(color.A, color.R, color.G, color.B);
      public static Tuple<SDColor, SDColor> GetColorFromRYGGradient(double percentage)
        {
            var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
            var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
            var blue = 0.0;
            SDColor result1 = SDColor.FromArgb((int)red, (int)green, (int)blue);
            SDColor result2 = SDColor.FromArgb((int)green, (int)red, (int)blue);
            return new Tuple<SDColor, SDColor>(result1, result2);
        }
    }

}

答案 4 :(得分:0)

您可以创建一个转换器将数字转换为画笔:

public class NumberToBrushConverter : MarkupExtension, IValueConverter
{
    private static object instance;
    public override object ProvideValue(IServiceProvider serviceProvider) { if (instance == null) { instance = Activator.CreateInstance(GetType()); } return instance; }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double aNumber = (double)value;

        // Define your gradient colors depending on the number

        return new System.Windows.Media.LinearGradientBrush(aColor1, aColor2, 
                new System.Windows.Point(0, 0), new System.Windows.Point(1, 0));
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后在您的 XAML 绑定中使用它:

<Border Background="{Binding YourVM.Number, Converter={yournamespace:NumberToBrushConverter}}" />