Question

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

Answer 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，则会232.936,178.754将其移动到尽可能靠近屏幕上的（0,0）。这样可以更容易地将其包装在画布中并将其移动到屏幕上您想要的位置。

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

我希望这有帮助，

谢谢！

Answer 2

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

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

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

Answer 3

试试这个。

将Width内的Height和Canvas设置为ViewBox的{{1}}和ActualWidth ActualHeight

Border/Grid

我正在使用Silverlight 4。

Answer 4

从技术上讲，Grid不是必需的。您可以将Canvas置于根目录，但为了简单起见，我会将其保留为原样。

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

MSDN article解释如下：

您可以精确定位孩子使用a的网格元素保证金属性和对齐属性。

由于你打算只有一个项目，即Canvas，你可以简单地将它放在网格中：

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

这会导致Canvas占据Grid的所有内部区域。

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

Answer 5

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

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

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

这应该有效，我在自己的控制下做同样的事。

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

Answer 6

我试图回复@barcrab，我试图使用ActualWidth，但它没有工作。所以对于其他人来说，这是ActualWidth无效的解决方法。

Binding to ActualWidth does not work

生锈

网格，视图框和画布

6 个答案:

享受！

谢谢！