Overlay images on top of another

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, outputHeig开发者_运维知识库ht, 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???

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

I'm not an image processing expert, but it seems like the Blit function would be useful in this case. Instead of trying to render temporaryImage, create a new WriteableBitmap with your emptyTileWatermark as its source. Use this WriteableBItmap as the Source parameter and wb as the Dest parameter and blit the two WriteableBitmaps. (The Blit function comes with WriteableBitmapEx).