How to correctly save UIControl with opacity to WriteableBitmap?

Question

I make group of rectangles with different opacity value and add these rectangles to Grid in WindowsPhone:

var grid=new Grid();
grid.Width = grid.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = grid.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = grid.Height;
var opacity = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.VerticalAlignment = VerticalAlignment.Center;
rect.HorizontalAlignment = HorizontalAlignment.Center;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
grid.Children.Add(rect);
}

I can see in grid following picture:

After I try to save this group of rectangles to WriteableBitmap and show as Image:

var img=new Image();
var wrBit = new WriteableBitmap(grid, null);
img.Source=wrBit;

And I see picture:

What happend with opacity on top and left edges? How to correctly save group of Rectangles?

Answer 1

Need to use Canvas instead Grid control for group of rectangles:

var canvas=new Canvas();
canvas.Width = canvas.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = canvas.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = canvas.Height;
var opacity = 0.0;
var rectMargin = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.Margin=new Thickness(rectMargin,rectMargin,0,0);
rectMargin += rectangleSizeStep/2;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
canvas.Children.Add(rect);
}

and save Canvas as WriteableBitmap:

var img=new Image();
var wrBit = new WriteableBitmap(canvas, null);
img.Source=wrBit;

Problem was solved!