网格、视图框和画布答案

【问题标题】：A grid, a Viewbox, and a Canvas网格、视图框和画布
【发布时间】：2013-07-05 08:11:03
【问题描述】：

好的，我有一个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>

【问题讨论】：

标签： silverlight xaml canvas grid viewbox

【解决方案1】：

我认为你正在寻找的是这样的：

<UserControl x:Class="DemoApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="White">
    <Canvas Background="LightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <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>
</Grid>

这是 Page.xaml 内容。请注意，我将画布的背景设置为 LightBlue，以便您可以准确地看到画布的位置（水平和垂直拉伸 - 填满屏幕）。

您可以在此处查看演示项目的工作副本：

http://code.google.com/p/silverlight-canvas-layout-fill/

享受吧！

谢谢，

斯科特

编辑：

如果我理解正确，你有一个 Silverlight 网格，它填充网络浏览器的高度和宽度，无论浏览器的大小是多少，像这样（我的是浅绿色）：

Green Grid http://img192.imageshack.us/img192/7308/greengrid.jpg

现在您想将两个多边形形状添加到画布内的网格中，但您希望网格现在与画布的大小相同？如果这是真的，您希望不显示网格（浅绿色），因为它会调整为画布的大小（浅蓝色），如下所示：

Green Grid - Blue Canvas http://img4.imageshack.us/img4/1107/greengridwithpolygons.jpg

另外，我注意到在您上面的示例代码中，您的画布具有设置的高度和宽度，这是您想要的网格的高度和宽度吗？除了您不想静态设置网格的高度和宽度，对吗？

如果是这样，您希望将代码更改为如下所示：

<UserControl x:Class="DemoApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Canvas Background="LightBlue" 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>
    </Grid>
</UserControl>

上面的代码结果是这样的：

Auto-Sized Grid http://img192.imageshack.us/img192/9665/gridfitscanvas.jpg

请注意，您指定的多边形的点与容器（在您的情况下为画布）相关。因此，这些点在屏幕上较低，但在不同的窗口大小上并不一致。

例如，如果您有一个多边形，它是一个 10 像素高和 10 像素宽的正方形，您可以像这样指定它：

<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="10,10 10,0 0,0 0,10" />

请注意，这些点尽可能靠近左上角 (0,0)，因此，我们能够更轻松地在屏幕上定位多边形。

对于您的问题，我认为您正在寻找的是两个多边形，它们位于浏览器的底部并且位于中心。当屏幕调整大小时，它们会移动，但彼此保持一致。这意味着，无论屏幕大小如何，它们都将始终处于相同的位置。像这样：

Skinny Result http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy.jpg

Fat Result http://img9.imageshack.us/img9/3306/greengridwithpolygonsco.jpg

这是我的代码（也在上面的 Google 项目中更新），它显示了自动定位多边形。请注意，多边形有新点，它们是原始点减去最小值加上 1.5（笔画粗细的一半）。因此，如果最初的值为420.576,870.950，则将其移动到屏幕上尽可能靠近（0,0）的位置变为232.936,178.754。这使得将其包裹在画布中并将其准确地移动到屏幕上所需的位置变得更加容易。

<UserControl x:Class="DemoApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Polygon StrokeThickness="3.0" Margin="0,0,0,50" HorizontalAlignment="Center" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="175.710, 260.522 116.086, 255.875 91.839, 256.033  67.578, 256.172 1.5, 260.522 1.5, 260.522 1.5, 1.5 1.5, 1.5 58.762, 6.038 89.627, 5.988 120.496, 5.947 175.710, 1.5 175.710, 1.5 175.710, 260.522" />
            <Polygon StrokeThickness="3.0" Margin="0,0,0,10" Stroke="#ff000000" HorizontalAlignment="Center" Fill="White" StrokeMiterLimit="1.0" Points="232.936,178.754 232.936,178.754 161.285,183.238 120.494,183.238 79.711,183.238 10.318,178.754 10.318,178.754 1.5,1.5 1.5,1.5 62.067,6.029 120.494,5.986 178.922,5.939 241.761,1.5 241.761,1.5 232.936,178.754" />
        </StackPanel>
    </Grid>
</UserControl>

希望对你有帮助，

谢谢！

【讨论】：

抱歉这么久才回复，我不打算拉伸网格，而是缩小画布以适应网格。
我更新了我的代码，希望这是您正在寻找的更多内容，如果没有，请告诉我。谢谢！

【解决方案2】：

Canvas 期望获得固定大小。对于您的方案，它的容器类型错误。尽管有时它的名称 Grid 是正确的容器，即使您不需要定义任何行或列。（顺便说一句，没有定义的网格与一列宽度为 * 一行高度为 * 的网格相同）。

因此，以下标记可以实现您的目标：-

<Grid>
    <controlsToolkit:Viewbox>
        <Grid>
            <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 "  />
        </Grid>
     </controlsToolkit:Viewbox>
</Grid>

【讨论】：

这不起作用，因为路径/多边形只会在网格外绘制，而不是调整网格大小。
@JasonRShaver：这是一个非常古老的答案，但我确定我已经测试过了。它工作正常。

【解决方案3】：

试试这个。

将ViewBox 内的Canvas 的Width 和Height 设置为Border/Grid 的ActualWidth 和ActualHeight。

<Border x:Name="border">
    <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top">
        <Canvas Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
    </Viewbox>
</Border>

我正在使用 Silverlight 4。

【讨论】：

【解决方案4】：

我认为它失败了，因为您没有在网格中指定视图框的位置。

您应该将 Grid.Row="0" 和 Grid.Column="0" 添加到您的视图框声明中，例如：

<toolkit:Viewbox Grid.Row="0" Grid.Column="0" Stretch="Fill">

这应该可行，我在自己的控制范围内做同样的事情。

编辑：如果您不希望多边形扭曲，请选择带拉伸的统一选项。

【讨论】：

在 Silverlight 中，如果不指定网格中的列或行，它将假定值为 0。另外，对于网格的 RowDefinitions 和 ColumnDefinitions，您不需要指定如果您指定的只是和，则这些是默认值。网格默认为一行一列，如果您只打算有一行一列，则不需要指定。希望这会有所帮助！

【解决方案5】：

从技术上讲，Grid 不是必需的。您可以将 Canvas 放在根目录，但为了简单起见，我将保留它。

请注意，Grid 可以在没有行和列的情况下使用，作为在其表面上组合和排列控件的一种方式。默认情况下，子元素的大小将通过调整其边距和对齐属性（HorizontalAlignment 和VerticalAlignment）来填充网格。

MSDN article 对此解释如下：

您可以精确定位孩子使用 Grid 的元素 Margin 属性的组合和对齐属性。

由于您打算只有一个项目，即画布，您可以简单地将其放置在网格中，如下所示：

<Grid>
    <Canvas Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Canvas>
</Grid>

这将导致Canvas 占用Grid 的所有内部区域。

如果您没有看到画布被拉伸，则可能是您对网格大小的假设不正确。如果是这种情况，请将网格和画布的背景颜色设置为明显（且不同）的颜色，然后使用布局。

【讨论】：

我认为这无法达到预期的效果。多边形保持固定大小。当我阅读这个问题时，希望多边形向上和向下缩放，以便它们适合视口。