基于 int 值的动态渐变背景

本文关键字：渐变 背景 动态 int 基于 | 更新日期: 2023-09-27 18:31:13

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

例如：

  • 从 -10 到 -0.5 它应该从暗红色褪色为橙色
  • 从 -0.5 到 +0.5，它应该从橙色褪色到黄色变成石灰
  • 从 +0.5 到 +10 它应该从石灰褪色到绿色

我以前从未做过这个，绝对不知道如何解决这个问题。即使您没有为我提供完整的解决方案，也很高兴给我一个提示。

问候Johannes

基于 int 值的动态渐变背景

我猜你对这种颜色很崇敬：http://msdn.microsoft.com/en-us/library/system.drawing.color.aspx

查找此链接：有没有一种简单的方法来混合两个系统.绘图.颜色值？

它告诉您如何在两种颜色之间混合

在此之后，您可以检索画笔：从颜色转换为画笔

您可以做一些时髦的算法来告诉您优先级是否存在，并根据需要相应地添加梯度以计算每个梯度的位置，或者为每个优先级创建一个矩形区域，然后使用以下方法添加梯度。请参阅 system.windows.media.lineargradientbrush 和 WPF 画笔概述

在 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;

如果要在 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;
  }
}

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);
        }
    }

}

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

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}}" />
相关文章：