为什么这个XAML视图不缩放其内容？ [英] Why doesn't this XAML viewbox scale its contents?

问题描述

我是WPF / XAML的新手。



我的阅读ViewBox应该允许，例如，Canvas根据窗口的大小来缩放其内容。以下代码似乎正在做我想要的，除了ViewBox似乎没有做任何事情。椭圆保持相同的大小并保持与左下角相同的距离。



任何人都可以告诉我我做错了什么（我留下了一些头发） ？

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

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

亲切的愿望~Patrick < br $> b $ b

我尝试过的事情：



我已经忘记了所有我试过的选项。毋庸置疑，我还没有尝试过的唯一的事情就是答案。

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.

推荐答案

Viewbox 缩放 Canvas 。但是因为你已经将画布的高度和宽度限制在 mainGrid 的高度和宽度，所以它的尺寸已经合适了，并且<$ c $没有任何内容c> Viewbox 要做。



如果更改 Canvas的高度和宽度到固定值，然后在调整窗口大小时将其放大或缩小。但是，它不会拉伸以填充容器;它将保持由高度和宽度指定的宽高比。

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.

你误解了 Canvas 和 ViewBox 。你的错误是绑定 Canvas 。



逻辑思考： ViewBox 已经调整了客户区的大小。应该简单地修复 Canvas 的大小;它应该与你的图形元素的大小有关，就像你的椭圆元素一样。



例如，选择500 x 500的画布尺寸来适应它的孩子。在 ViewBox 中，您应该将单位视为相对单位，以表示相对于 Canvas 。



因此，修复的示例将是：将您的视图框元素替换为



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

<Viewbox Stretch="UniformToFill">

和你的画布

and your canvas with

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

一些有用的阅读： KISS原则 - 维基百科，免费的百科全书 [ ^ ]。

-SA

这篇关于为什么这个XAML视图不缩放其内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！