silverlight - 网格、 View 框和 Canvas

Question

好的，我有一个 Grid哪个“自动调整大小”到网络浏览器。在那里我有一个 Canvas上面绘制的形状。我想要的是让 Canvas “拉伸(stretch)”以填充页面。我尝试使用 Viewbox来自 Silverlight 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>

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 内容。请注意，我将 Canvas 的背景设置为 LightBlue，以便您可以准确地看到 Canvas 的位置(水平和垂直拉伸(stretch) - 填充屏幕)。

您可以在此处 checkout 演示项目的工作副本:

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

享受!
谢谢，

斯科特

编辑:

如果我理解正确，您有一个 Silverlight 网格，无论浏览器大小如何，它都会填充 Web 浏览器的高度和宽度，如下所示(我的是浅绿色):

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

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

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

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

如果这是真的，您希望将代码更改为:

<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

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

例如，如果您有一个多边形，它是一个 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)。这使得将其包裹在 Canvas 中并将其准确地移动到屏幕上您想要的位置变得更加容易。

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

我希望这有帮助，

谢谢!