网格、视图框和画布
好的，我有一个可以根据网络浏览器“自动调整大小”的 Grid 。在那里我有一个 Canvas ，上面绘制了形状。我想要的是画布“拉伸”以填充页面。我尝试使用 Silverlight 3 10/09 Toolkit 中的 Viewbox，但它似乎并没有填充网格中的所有空间，并且只有在我给它一个精确的像素计数时才起作用。
有人有什么想法吗？
XAML 示例：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<toolkit:Viewbox Stretch="Fill">
<Canvas Width="617.589" Height="876.934">
<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " />
<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " />
</Canvas>
</toolkit:Viewbox>
</Grid>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我认为您正在寻找的是这样的：
这是Page.xaml 内容。请注意，我将画布的背景设置为浅蓝色，以便您可以准确地看到画布的走向（水平和垂直拉伸 - 填充屏幕）。
您可以在此处查看演示项目的工作副本：
http://code .google.com/p/silverlight-canvas-layout-fill/
享受！
Thanks,
Scott
编辑：
如果我理解正确的话，你有一个 Silverlight 网格，无论浏览器大小如何，它都会填充 Web 浏览器的高度和宽度，如下所示（我的是浅绿色）：
绿色网格 http://img192.imageshack.us/img192/7308/greengrid.jpg
现在您想要将两个多边形形状添加到画布内的网格中，但您现在希望网格与画布大小相同？如果这是真的，您希望不显示网格（浅绿色），因为它会调整为画布大小（浅蓝色），如下所示：
绿色网格 - 蓝色画布 http://img4.imageshack.us/img4/1107/greengridwithpolygons.jpg
另外，我在上面的示例代码中注意到，您的画布具有设置的高度和宽度，这是您想要的网格的高度和宽度吗？除非您不想静态设置网格的高度和宽度，对吗？
如果这是真的，您需要将代码更改为如下所示：
上面的代码结果如下：
自动调整大小的网格 http://img192.imageshack.us/img192/9665/gridfitscanvas.jpg
请注意，您指定的多边形点与容器相关（在你的情况下是画布）。因此，这些点在屏幕上较低，但在不同的窗口尺寸上不一致。
例如，如果您有一个多边形，它是一个 10 像素高、10 像素宽的正方形，您可以这样指定它：
请注意，这些点尽可能靠近左上角 (0,0)，因此，我们能够更轻松地在屏幕上定位多边形。
对于您的问题，我认为您正在寻找的是位于浏览器底部且位于中心的两个多边形。当屏幕大小调整时，它们会移动，但彼此保持一致。这意味着，无论屏幕尺寸如何，它们总是显示在相同的位置。像这样：
瘦结果 http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy .jpg
胖结果 http://img9.imageshack.us/img9/ 3306/greengridwithpolygonsco.jpg
这是我的代码（也在上面的 Google 项目中进行了更新），它显示了自动定位多边形。请注意，多边形有新点，它们是原始点减去最小值加上 1.5（笔划粗细的一半）。因此，如果该值最初为
420.576,870.950，则变为232.936,178.754以将其移动到屏幕上尽可能靠近 (0,0) 的位置。这使得将其包裹在画布中并将其移动到屏幕上您想要的位置变得更加容易。我希望这有帮助，
谢谢！
I think what you're looking for is something like this:
This is the Page.xaml content. Please note that I set the background of the canvas to be LightBlue so that you can see exactly where the canvas goes (Stretches horizontally and vertically - Fills the screen).
You can checkout a working copy of the demo project here:
http://code.google.com/p/silverlight-canvas-layout-fill/
Enjoy!
Thanks,
Scott
EDIT:
If I understand you correctly, you have a Silverlight grid, which fills the web browsers height and width no matter what size the browser is, something like this (mine is light green):
Green Grid http://img192.imageshack.us/img192/7308/greengrid.jpg
Now you want to add two polygon shapes to the grid inside a canvas, but you want the grid now to be the same size as the canvas? If that is true, you want the grid (light green) to not be shown because it gets resized to the canvas' size (light blue), like this:
Green Grid - Blue Canvas http://img4.imageshack.us/img4/1107/greengridwithpolygons.jpg
Also, I notice in your sample code above, that you're canvas has as set height and width, is this the height and width that you're wanting for the grid? Except you're not wanting to have the grid's height and width set statically, correct?
If this is true, you're wanting to change the code to be like this:
The above code results in this:
Auto-Sized Grid http://img192.imageshack.us/img192/9665/gridfitscanvas.jpg
Please note that the points of the polygons that you're specifying are in relation to the container (in your case the canvas). Thus, the points are low on the screen but not consistent on different window sizes.
If you have a polygon for example which is a square which is 10 pixels high, and 10 pixels wide, you could specify it like so:
Notice that the points are as close to the top left (0,0) as possible, thus, we are able to position the polygon more easily on the screen.
For your question, I think what you're looking for is two polygons which are at the bottom of your browser and which stay in the center. When the screen resizes, they are moved, but remain consistent with each other. Meaning, they will always appear to be in the same position no matter the screen size. Like so:
Skinny Result http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy.jpg
Fat Result http://img9.imageshack.us/img9/3306/greengridwithpolygonsco.jpg
Here is my code (Also updated in the above Google project) which shows the auto positioning polygons. Please note that the polygons have new points, they are the original point minus the minimum value plus 1.5 (half the stroke thickness). So if the value were
420.576,870.950originally, it became232.936,178.754to move it as close to (0,0) on the screen as possible. This makes it much easier to wrap it in a canvas and move it to exactly where you want it on the screen.I hope this helps,
Thanks!
Canvas期望指定固定大小。它的容器类型不适合您的场景。尽管它的名称有时，Grid是正确的容器，即使您不需要定义任何行或列。 （顺便说一句，没有定义的网格与具有一列宽度为 * 和一行高度为 * 的网格相同）。因此，以下标记可以实现您的目标：-
A
Canvashas expecting to be given fixed size. Its the wrong type of container for your scenario. Despite its name sometime theGridis the correct container to use even though you have no need to define any rows or columns. (BTW Grid with no defintions is the same as one with one Column with a Width of * and one Row with a Height of *).Hence the following markup achieves your goal:-
试试这个。
将
ViewBox内Canvas的Width和Height设置为ActualWidth并Border/Grid的ActualHeight。我正在使用 Silverlight 4。
Try this.
Set the
WidthandHeightof theCanvasinside theViewBoxto theActualWidthandActualHeightof aBorder/Grid.I'm using Silverlight 4.
我认为它失败了，因为您没有在网格中指定视图框的位置。
您应该将 Grid.Row="0" 和 Grid.Column="0" 添加到您的视图框声明中，例如：
这应该可行，我在自己的控制范围内做同样的事情。
编辑：如果您不希望多边形扭曲，请选择带有拉伸的“均匀”选项。
I think it's failing because you don't specify the location of your viewbox in the grid.
You should add Grid.Row="0" and Grid.Column="0" to your viewbox declaration like:
This should work, i'm doing the same within my own control.
Edit: choose the Uniform option with stretch if you don't want your polygons to distort.
从技术上讲，
Grid不是必需的。您可以将Canvas放在根目录中，但为了简单起见，我将保留它。请注意，网格可以在没有行和列的情况下使用，作为在其表面上组合和排列控件的一种方式。默认情况下，子项的大小将调整为填充网格，并调整其边距和对齐属性（
HorizontalAlignment和VerticalAlignment）。MSDN 文章对此进行了如下解释：
由于您只想拥有一个项目，即 Canvas，您可以简单地将其放置在网格中，如下所示：
这将导致
Canvas占据Grid的所有内部区域代码>.如果您没有看到画布拉伸，则您对网格大小的假设可能不正确。如果是这种情况，请将网格和画布的背景颜色设置为明显（且不同）的颜色并调整布局。
Technically, the
Gridis not required. You could put theCanvasright at the root, but to keep things simple, I'll leave that as it.Note that the
Gridcan be used without rows and columns as a way to composite and arrange controls on its surface. By default, a child will be sized to fill the grid with adjustments for its margin and alignment properties (HorizontalAlignmentandVerticalAlignment).An MSDN article explains this as follows:
Since you intend to have only one item, the Canvas, you can simply place it in the grid like this:
This will cause the
Canvasto take up all the internal area of theGrid.If you are not seeing your canvas stretched, it is likely your assumption about your grid's size is incorrect. If that is the case, set the grid and the canvas' background colors to something obvious (and different) and play with the layout.