Question

I am trying to draw a white rectangle (100 x 200) and in the middle place a smaller image (50 x 75) so that it looks similar to the back of a playing card.

With the following code, all I get are the tiles with the border around them, but no image.

        //generate temporary control to render image
        Image temporaryImage = new Image { Source = emptyTileWatermark, Width = destWidth, Height = destHeight };

        //create writeableBitmap
        WriteableBitmap wb = new WriteableBitmap(outputWidth, outputHeight);
        wb.Clear(Colors.White);

        // Closed green polyline with P1(0, 0), P2(outputWidth, 0), P3(outputWidth, outputHeight) and P4(0, outputHeight)
        var outline = new int[] { 0, 0, outputWidth, 0, outputWidth, outputHeight, 0, outputHeight, 0, 0};
        wb.DrawPolyline(outline, Colors.Black);
        wb.Invalidate();
        wb.Render(temporaryImage, new TranslateTransform { X = destX, Y = destY });
        wb.Invalidate();

I should point out that to do the .Clear(), I am using the WriteableBitmapEx project.

Any ideas???

Answer 1

Your temporaryImage hasn’t had its layout performed so when you render it it is still blank. To remedy this you are supposed to call Measure and Arrange, this isn’t always reliable but wrapping it in a Border and measuring and arranging that seemed to work.

All that being said as you are already using WriteableBitmapEx you can use its Blit method instead.

WriteableBitmap emptyTile = new WriteableBitmap(emptyTileWatermark);
//create writeableBitmap
WriteableBitmap wb = new WriteableBitmap(outputWidth, outputHeight);
wb.Clear(Colors.White);

// Closed green polyline with P1(0, 0), P2(outputWidth, 0), P3(outputWidth, outputHeight) and P4(0, outputHeight)
var outline = new int[] { 0, 0, outputWidth, 0, outputWidth, outputHeight, 0, outputHeight, 0, 0};
wb.DrawPolyline(outline, Colors.Black);
wb.Blit(new Rect(destX,destY,destWidth,destHeight),emptyTile,new Rect(0,0,emptyTileWatermark.PixelWidth,emptyTileWatermark.PixelHeight));