wpf - 两端固定宽度渐变的LinearGradientBrush

Question

我想使用 LinearGradientBrush 用渐变填充 Canvas 上的矩形范围。要注意的是，无论矩形有多大，我都希望渐变在矩形的两侧显示相同。

我想画的是这样的:

这是我的第一次尝试:

LinearGradientBrush brush = new LinearGradientBrush();
brush.SpreadMethod = GradientSpreadMethod.Reflect;
brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FF0000FF"), 0.0));
brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#22FFFFFF"), 0.25));
brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#22FFFFFF"), 0.75));
brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FF0000FF"), 1.00));
brush.StartPoint = new Point(0, 0);
brush.EndPoint = new Point(1, 0);

Rectangle rect = new Rectangle();            
rect.Width = 100;
rect.Height = 100;
rect.Fill = brush;
Canvas.SetLeft(rect, 50);
Canvas.SetTop(rect, 50);
MyCanvas.Children.Add(rect);

Rectangle rect2 = new Rectangle();
rect2.Width = 300;
rect2.Height = 100;
rect2.Fill = brush;
Canvas.SetLeft(rect2, 50);
Canvas.SetTop(rect2, 200);
MyCanvas.Children.Add(rect2);

不太对；矩形越大，渐变越宽:

我尝试将 MappingMode 设置为 Absolute，但这也不起作用。

LinearGradientBrush brush = new LinearGradientBrush();
brush.MappingMode = BrushMappingMode.Absolute;
brush.SpreadMethod = GradientSpreadMethod.Reflect;

brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#FF0000FF"), 0.0));
brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#22FFFFFF"), 0.25));

brush.StartPoint = new Point(0, 0);
brush.EndPoint = new Point(50, 0);   //I want the gradient to be across 50 pixels

Rectangle rect = new Rectangle();    
//Everything else is the same

这给了我一些看起来像这样的东西:

这太离谱了。 有什么建议吗？

Answer 1

实现此目的的一种方法是创建一个自定义控件。
用 Grid 上的 3 个矩形组成它；

• 1 列，50 像素宽，矩形填充线性渐变
• 1 列“内容”矩形填充剩余部分
• 1 列，50 像素宽，矩形填充线性渐变。