3

LinearGradientBrushを使用して、キャンバス上の長方形の範囲をグラデーションで塗りつぶしたいと思います。キャッチは、長方形がいくら大きくても、グラデーションが長方形の両側で同じように表示されるようにすることです。

私が描いているのは次のようなものです。

http://imgur.com/B5efn7c

これが私の最初の試みです：

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

正しくありません。長方形が大きいほど、グラデーションが広く表示されます。

http://imgur.com/CRnXPdV

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

これは私に次のようなものを与えます：

http://imgur.com/EBuxP7D

これはかなり離れています。助言がありますか？

4

2 に答える 2

2

これを実現する1つの方法は、を作成することcustom controlです。;
上の3つの長方形で構成します。Grid

  • 1列、幅50ピクセル、線形グラデーションで塗りつぶされた長方形
  • 残りを埋める1列の「コンテンツ」長方形
  • 1列、幅50ピクセル、線形グラデーションで塗りつぶされた長方形。
于 2013-02-19T17:16:24.200 に答える
1

長方形の背景をActualHeightにバインドし、コンバーターを使用して、その幅のパーセントを計算して目的の幅を表すことができます（絶対値を使用してピクセルを直接設定することもできます）。

class HeightToBrushComplexPropertyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double height = (double)value;
        double percent = 50.0 / height;

        LinearGradientBrush brush = new LinearGradientBrush();
        brush.StartPoint = new Point(0, 0);
        brush.EndPoint = new Point(1, 0);

        brush.MappingMode = BrushMappingMode.RelativeToBoundingBox;
        brush.SpreadMethod = GradientSpreadMethod.Pad;

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

        return brush;

    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

このコンバーターの改善点：ピクセル数と色をパラメーターとして受け入れます。

于 2013-11-14T14:50:40.973 に答える