A grid, a Viewbox, and a Canvas

Question

Ok, I have a Grid which 'auto sizes' to a web browser. In there I have a canvas with shapes drawn onto it. What I want is for the canvas to 'stretch' to fill the page. I tried using a 'Viewbox' from the Silverlight 3 10/09 Toolkit but it does not seem to fill all the space in the grid and only works when I give it an exact pixel count.

Does anyone have any ideas?

Example 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

Technically, the Grid is not required. You could put the Canvas right at the root, but to keep things simple, I'll leave that as it.

Note that the Grid can 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 (HorizontalAlignment and VerticalAlignment).

An MSDN article explains this as follows:

You can precisely position child elements of a Grid by using a combination of the Margin property and alignment properties.

Since you intend to have only one item, the Canvas, you can simply place it in the grid like this:

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

This will cause the Canvas to take up all the internal area of the Grid.

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.

Answer 2

A Canvas has expecting to be given fixed size. Its the wrong type of container for your scenario. Despite its name sometime the Grid is 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:-

<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

Hey,

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:

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

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.

Answer 4

Try this.

Set the Width and Height of the Canvas inside the Viewbox to the ActualWidth and ActualHeight of a Border/Grid.

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

I'm using Silverlight 4.