Convert Windows Form OnPaint to equivalent WPF shapes

Question

I have an existing OnPaint method which draws some shapes:

    protected override void OnPaintBackground(PaintEventArgs e)
    {
        Graphics g = e.Graphics;

        g.CompositingQuality = CompositingQuality.HighQuality;

        Brush greenBrush = new SolidBrush(Color.FromArgb(73,172,113));
        Brush blueBrush = new SolidBrush(Color.FromArgb(197,232,221));
        Brush whiteBrush = new SolidBrush(Color.White);
        g.SmoothingMode = SmoothingMode.AntiAlias;
        g.TextRenderingHint = TextRenderingHint.AntiAlias; 

        Rectangle newRect = new Rectangle(ClientRectangle.X, ClientRectangle.Y,
            ClientRectangle.Width, ClientRectangle.Height);

        // Green background
        g.FillRectangle(greenBrush, newRect);

        // Blue ellipse
        int rectX = System.Convert.ToInt32(newRect.Width * .244) * -1;
        int rectY = System.Convert.ToInt32(newRect.Height * .025);
        int rectWidth = System.Convert.ToInt32(newRect.Width * 1.416);
        int rectHeight = System.Convert.ToInt32(newRect.Height * 1.685);
        g.FillEllipse(blueBrush, rectX, rectY, rectWidth, rectHeight);

        // Green ellipse
        rectX = System.Convert.ToInt32(newRect.Width * .283) * -1;
        rectY = System.Convert.ToInt32(newRect.Height * .035);
        rectWidth = System.Convert.ToInt32(newRect.Width * 1.26);
        rectHeight = System.Convert.ToInt32(newRect.Height * 1.35);
        g.FillEllipse(greenBrush, rectX, rectY, rectWidth, rectHeight);

        // Blue ellipse
        rectX = System.Convert.ToInt32(newRect.Width * .009) * -1;
        rectY = System.Convert.ToInt32(newRect.Height * .175);
        rectWidth = System.Convert.ToInt32(newRect.Width * 1.094);
        rectHeight = System.Convert.ToInt32(newRect.Height * 1.755);
        g.FillEllipse(blueBrush, rectX, rectY, rectWidth, rectHeight);

        // White ellipse
        rectX = System.Convert.ToInt32(newRect.Width * .146);
        rectY = System.Convert.ToInt32(newRect.Height * .225);
        rectWidth = System.Convert.ToInt32(newRect.Width * .928);
        rectHeight = System.Convert.ToInt32(newRect.Height * 1.545);
        g.FillEllipse(whiteBrush, rectX, rectY, rectWidth, rectHeight);

}

I have converted this to - in WPF:

<Grid>
    <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top"  >
        <Canvas Width="1680" Height="1050">
            <Rectangle    Fill="#FF49AC71" Width="1780" Height="1050" VerticalAlignment="Stretch" />
        <Ellipse  Fill="#FFC5E8DD"  Width="2379" Height="1770" Canvas.Left="-410" Canvas.Top="25"/>
            <Ellipse   Fill=  "#FF49AC71"  Width="2116" Height="1417" Canvas.Left="-475" Canvas.Top="37"/>
            <Ellipse    Fill="#FFC5E8DD"  Width="1837" Height="1842" Canvas.Left="-15" Canvas.Top="183"/>
            <Ellipse   Fill="White"  Width="1559" Height="1622" Canvas.Left="245" Canvas.Top="236"/>
        </Canvas>
    </Viewbox>

The resizing behaviour is not the same. Can someone give me a clue how I can fix this, or alternatively a better example of WPF!?

Answer 1

You want to set the Stretch property of the ViewBox to Fill.

<Viewbox Stretch="Fill">

The default value is Uniform, which will preserve the aspect ratio. See this blog entry if you want more detail on how to use the various values of Stretch.