开发者

Creating a custom fill brush in XAML

How do I create the following shape in XAML?

alt text http://mtx.dk/ellipse.png

<Ellipse Height="100" Width="100">
    <Ellipse.Fill>
       ???
    </Ellipse.Fill>
</Ellipse>

LinearGradientBrush can'开发者_开发问答t be transformed in this way? RadialGradientBrush is not suitable either.

Any ideas?


You can't do it with an ellipse and the built in brushes, but it isn't difficult to write such a shape yourself.

You can draw a lot of "pie slice" shapes and apply a different linear gradient brush to each slice.

This will get you started:

class GradiantEllipse : FrameworkElement
{
    private const double N = 100;

    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
    {
        var radius = Math.Min(ActualWidth/2,ActualHeight/2);
        var center = new Point(ActualWidth/2,ActualHeight/2);
        for (int i = 0; i < N; ++i)
        {
            var startAngle = (Math.PI*2/N)*i;
            var endAngle = (Math.PI*2/N)*(i+1)+2*(Math.PI/radius)+1/(2*Math.PI+radius); // + 1px to avoid gap
            var start = new Point(Math.Cos(startAngle)*radius+center.X,
                Math.Sin(startAngle)*radius+center.Y);
            var end = new Point(Math.Cos(endAngle)*radius+center.X,
                Math.Sin(endAngle)*radius+center.Y);
            var figure = new PathFigure();
            figure.StartPoint = center;
            figure.Segments.Add(new LineSegment(start,false));
            figure.Segments.Add(new LineSegment(end,false));
            figure.IsClosed = true;
            var geo = new PathGeometry();
            geo.Figures.Add(figure);

            var gradiant = new LinearGradientBrush(
                Color.FromArgb(255, (byte)((255.0 / N) * i), (byte)((255.0 / N) * i), (byte)((255.0 / N) * i)),
                Color.FromArgb(255, (byte)((255.0 / N) * (i + 1)), (byte)((255.0 / N) * (i + 1)), (byte)((255.0 / N) * (i + 1))),
                Math.Atan2(end.Y - start.Y, end.X - start.X) * 180 / Math.PI);

            drawingContext.DrawGeometry(gradiant, null, geo);
        }
    }
}


Your best bet would be to create a DrawingBrush with some custom drawing instructions, perhaps divide the ellipse into quarters and fill each with a different RadialGradientBrush.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜