#1,062 – Scaling a Canvas Using a ViewBox

ViewBox is typically used to scale a panel containing other elements.  One common use of a ViewBox is to scale the contents of a Canvas panel.

We might include several elements within a Canvas that has an explicit size.


If we re-size the window, however, the canvas stays the same size.


We could have had the Canvas stretch to fill the remaining area, but its elements would still be the same size.

We can get the elements within the Canvas to scale by wrapping the Canvas in a ViewBox.

        <Label DockPanel.Dock="Top" Background="LightGray"
               Content="Stuff at top of window here"
        <Label DockPanel.Dock="Bottom" Background="AliceBlue"
               Content="Bottom stuff down here"
            <Canvas Background="Bisque" Width="200" Height="100">
                <Line X1="5" Y1="5" X2="195" Y2="95"
                <Label Canvas.Left="80" Canvas.Top="5" Content="Howdy"/>
                <Ellipse Height="30" Width="50" Stroke="Blue" StrokeThickness="2"
                            Canvas.Left="140" Canvas.Top="5"/>

Now when we resize the window, everything within the Canvas is scaled.



About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

3 Responses to #1,062 – Scaling a Canvas Using a ViewBox

  1. 👋 Looking for a way to control the shape of the ViewBox. E.g. is it possible to have a circular one, such that any zoom-in and zoom-out image manipulation stays with the circular boundary?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: