5

好的，我有Grid一个网络浏览器的“自动调整大小”。在那里我Canvas画了一个形状。我想要的是让画布“拉伸”以填充页面。我尝试使用ViewboxSilverlight 3 10/09 Toolkit 中的一个，但它似乎并没有填满网格中的所有空间，只有在我给它一个精确的像素数时才有效。

有没有人有任何想法？

示例 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>
4

5 回答 5

7

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

<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 网格，无论浏览器大小如何，它都会填充 Web 浏览器的高度和宽度，如下所示（我的是浅绿色）：

绿色网格 http://img192.imageshack.us/img192/7308/greengrid.jpg

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

绿色网格 - 蓝色画布 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>

上面的代码结果如下：

自动调整大小的网格 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)，因此，我们能够更轻松地在屏幕上定位多边形。

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

瘦身结果 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) 的位置。这使得将其包裹在画布中并将其准确地移动到屏幕上您想要的位置变得更加容易。 

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

我希望这有帮助，

谢谢！

于 2009-11-06T23:12:09.077 回答
1

尝试这个。

将内部的Widthand设置Height为a的and 。CanvasViewBoxActualWidthActualHeightBorder/Grid

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

我正在使用 Silverlight 4。

于 2010-09-02T00:42:10.510 回答
1

ACanvas期望得到固定的大小。对于您的方案，它的容器类型错误。尽管它的名字有时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>
于 2009-10-31T17:25:31.200 回答
0

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

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

MSDN 文章对此进行了如下解释：

您可以通过结合使用 Margin 属性和对齐属性来精确定位 Grid 的子元素。

由于您打算只有一个项目，即画布，您可以像这样简单地将它放在网格中：

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

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

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

于 2009-10-31T16:59:11.737 回答
0

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

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

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

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

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

于 2009-11-02T12:15:08.270 回答