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

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!

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

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.