Why doesn't this XAML viewbox scale its contents?

Question

2.00/5 (1 vote)

See more:

Hi,

I'm fairly new to WPF/XAML.

My reading about the ViewBox is that is is supposed to allow, for example, a Canvas to scale its contents depending upon the size of the window. The following code seems to be doing exactly what I want except that the ViewBox doesn't seem to do anything. The ellipses stay the same size and remain the same distance from the bottom left corner.

Can anyone tell me what I am doing wrong (while I have some hair left)?

XML

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SerenocalmDataAnalysisTool"
        mc:Ignorable="d"
        Title="My App" Height="600" Width="1000">
	<DockPanel LastChildFill="True" Margin="0,0,0,0">
		<Label DockPanel.Dock="Top" Background="AliceBlue">Menu goes here</Label>
		<Label DockPanel.Dock="Bottom" Background="Azure">Status bar goes here</Label>
		<Grid x:Name="mainGrid" removed="BlanchedAlmond">
			<Viewbox>
				<Canvas Background="AntiqueWhite" Height="{Binding ElementName=mainGrid,Path=ActualHeight}"
				Width="{Binding ElementName=mainGrid,Path=ActualWidth}">
					<Ellipse Fill="Yellow" Stroke="Green" Width="150" Height="100" Canvas.Bottom="100" Canvas.Left="100">
					</Ellipse>
					<Ellipse Fill="Purple" Stroke="Green" Width="150" Height="100" Canvas.Bottom="100" Canvas.Left="300">
					</Ellipse>
				</Canvas>
			</Viewbox>
		</Grid>
	</DockPanel>
</Window>

Kind wishes ~ Patrick

What I have tried:

I've lost track of all the options I have tried. Needless to say, the only thing I haven't tried yet is whatever turns out to be the answer.

Posted 12-Apr-16 4:26am

Patrick Skelton

Updated 12-Apr-16 5:31am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-04-12T04:38:00

Solution 1

The Viewbox is scaling the Canvas. But because you've bound the height and width of the canvas to the height and width of the mainGrid, it's already the right size, and there's nothing for the Viewbox to do.

If you change the height and width of the Canvas to fixed values, then it will be scaled up or down as the window is resized. However, it won't stretch to fill the container; it will maintain the aspect-ratio specified by the height and width.

Posted 12-Apr-16 4:38am

Richard Deeming

Comments

Patrick Skelton 12-Apr-16 10:47am

That has helped, Richard. Unfortunately, what I really want is exactly what you said will not happen. Is there a way to get the Canvas to start at the maximum size of its containing element? I tried setting the Binding Mode to OneTime but my ellipses then vanish for reasons I won't pretend to understand.

Richard Deeming 12-Apr-16 10:50am

You could add Stretch="Fill" to your ViewBox, which will stretch the canvas to fill the container. That will also stretch the ellipses.

Patrick Skelton 12-Apr-16 10:59am

That is pretty much it. Excellent! My only remaining problem is setting the initial size of the Canvas. Surely there is a better way than just basing my initial guess on the set window size minus the other stuff I've already put in there?

Richard Deeming 12-Apr-16 11:01am

You just need to set the size of the canvas so that the ellipses look right. It's only used to determine the layout of its children.

Patrick Skelton 12-Apr-16 11:04am

I see (I think). Thank you for your help, Richard.

Sergey Alexandrovich Kryukov · Accepted Answer · 2016-04-12T05:31:00

You misunderstood Canvas and ViewBox. Your bug is binding of the Canvas side.

Think logically: ViewBox already adjusts the size to its client area. The size of the Canvas should simply be fixed; it should be related to the sized of your graphic element, like your ellipse elements.

For example, choose the canvas size of, say, 500 x 500, to fit its children. In a ViewBox, you should consider the units as a relative units, to express relative positions and sizes of the children relative to the Canvas.

So, the example of the fix will be: replace you view box element with

HTML

<Viewbox Stretch="UniformToFill">

and your canvas with

HTML

<Canvas Background="AntiqueWhite" Width="500" Height="500">

Some useful reading: KISS principle — Wikipedia, the free encyclopedia[^].

—SA