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>

score 7 · Answer 1 · edited Feb 08 '12 at 22:20

I think what you're looking for is something like this:

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

This is the Page.xaml content. Please note that I set the background of the canvas to be LightBlue so that you can see exactly where the canvas goes (Stretches horizontally and vertically - Fills the screen).

You can checkout a working copy of the demo project here:

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

Enjoy!

Thanks,

Scott

EDIT:

If I understand you correctly, you have a Silverlight grid, which fills the web browsers height and width no matter what size the browser is, something like this (mine is light green):

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

Now you want to add two polygon shapes to the grid inside a canvas, but you want the grid now to be the same size as the canvas? If that is true, you want the grid (light green) to not be shown because it gets resized to the canvas' size (light blue), like this:

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

Also, I notice in your sample code above, that you're canvas has as set height and width, is this the height and width that you're wanting for the grid? Except you're not wanting to have the grid's height and width set statically, correct?

If this is true, you're wanting to change the code to be like this:

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

The above code results in this:

Auto-Sized Grid http://img192.imageshack.us/img192/9665/gridfitscanvas.jpg

Please note that the points of the polygons that you're specifying are in relation to the container (in your case the canvas). Thus, the points are low on the screen but not consistent on different window sizes.

If you have a polygon for example which is a square which is 10 pixels high, and 10 pixels wide, you could specify it like so:

<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="10,10 10,0 0,0 0,10" />

Notice that the points are as close to the top left (0,0) as possible, thus, we are able to position the polygon more easily on the screen.

For your question, I think what you're looking for is two polygons which are at the bottom of your browser and which stay in the center. When the screen resizes, they are moved, but remain consistent with each other. Meaning, they will always appear to be in the same position no matter the screen size. Like so:

Skinny Result http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy.jpg

Fat Result http://img9.imageshack.us/img9/3306/greengridwithpolygonsco.jpg

Here is my code (Also updated in the above Google project) which shows the auto positioning polygons. Please note that the polygons have new points, they are the original point minus the minimum value plus 1.5 (half the stroke thickness). So if the value were 420.576,870.950 originally, it became 232.936,178.754 to move it as close to (0,0) on the screen as possible. This makes it much easier to wrap it in a canvas and move it to exactly where you want it on the screen.

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

I hope this helps,

Thanks!

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, Nov 29 '09 at 05:37
I updated my code, hopefully this is more of what you're looking for, if not, please let me know. Thanks! — Scott, Nov 30 '09 at 16:42

score 1 · Answer 2 · edited Feb 08 '12 at 22:19

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>

This does not work as the paths/polygons will just paint outside the grid, not resize the grid. — JasonRShaver, Nov 29 '09 at 05:36
@JasonRShaver: This is quite and old answer now but I'm sure I tested it. It works fine. — AnthonyWJones, Nov 29 '09 at 08:40

score 1 · Answer 3 · edited Jul 05 '13 at 00:08

1

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.

edited Jul 05 '13 at 00:08

Dave Clemmer

3,741
12
49
72

answered Sep 02 '10 at 00:42

barcrab

199
2
12

score 0 · Answer 4 · edited Jul 05 '13 at 00:11

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.

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, Oct 31 '09 at 17:30

Jark · Answer 5 · 2009-11-02T12:20:31.677

0

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.

edited Nov 02 '09 at 12:20

answered Nov 02 '09 at 12:15

Jark

3
2

1

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 and 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 Nov 06 '09 at 23:17

A grid, a Viewbox, and a Canvas

5 Answers5

Enjoy!

Thanks!