views:

689

answers:

5

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

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.

Jerry Bullard
I don't think this acheive the desired result. The Polygons remain a fixed size. As I read the question it is desired that the Polygons scale up and down so that they fit the viewport.
AnthonyWJones
+1  A: 

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>
AnthonyWJones
This does not work as the paths/polygons will just paint outside the grid, not resize the grid.
JasonRShaver
@JasonRShaver: This is quite and old answer now but I'm sure I tested it. It works fine.
AnthonyWJones
A: 

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.

Jark
tried this, it did not work.
JasonRShaver
In Silverlight, if you don't specify a column or row in the grid, it will assume that the value is 0. Also, for RowDefinitions and ColumnDefinitions of the grid, you do not need to specify these if all you're specifying is <RowDefinition Height="*" /> and <ColumnDefinition Width="*" /> respectfully, as this is what is meant by default. A grid has one row and one column by default and do not need to be specified if you only intend to have one row and one column. Hope this helps!
Scott
+3  A: 
Scott
Sorry for taking so long with the reply, I am looking not to stretch the grid, but shrink the canvas to fit the grid.
JasonRShaver
I updated my code, hopefully this is more of what you're looking for, if not, please let me know. Thanks!
Scott
A: 

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.

barcrab