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
.
精彩评论