Skip to main content
Home Forums General Silverlight Getting Started Layout questions
6 replies. Latest Post by Luhrg on May 27, 2009.
(0)
eksek
Member
1 points
14 Posts
05-26-2009 12:10 AM |
Hi
I need to create silverlight (3b) application that is stretched to whole browser window. When I put Grid inside the UserControl and define no Width or Height this happens automatically. However if I put Canvas as the root and put the Grid inside the Canvas it does not work anymore (no automatic resizing). Also it disturbs me that the VS designer makes the window as small as it can when there is no Width and Height defined (so it works differently in browser). So why Canvas and Grid behave differently in this resize matter when acting as a layout root? Is the "right" solution just to hook the size changed event and resize the root layout container (let it be grid or canvas) every time the browser is resized?
Second question, what happens to objects (for example Button) that are inside a Grid but there is no Grid.Column or Grid.Row defined for it? Is this just fine? At least absolute positioning seems to work for those objects. What i need to do is to create a "modal popup" but without the ChildWindow class. Could it work by inserting a Canvas on top of everything (with opacity so the background sees through) but still inside the layout root Grid and then adding my "Dialog" user control on top of the canvas. However, again i can't stretch those controls automatically so if the browser size changes i need resize the canvas and center the dialog user control again (since i can't have a second layer of layout manager on top of the grid?).
Thanks :)
ksleung
Contributor
5396 points
1,028 Posts
05-26-2009 12:33 AM |
Unless you know exactly what you are doing with Canvas, my advice is to stay away from it :D
Canvas behaves very differently than Grid. For most people, unless you need absolute positioning, grid is the more appropriate. Most likely you are building an application with peripheral controls (menus, navigation panels, etc) that you want to be placed on the sides (top, left, right, bottom), and have some "sandbox" where you want to place the main content and want it to be resized as the browser is resized. In such case, I would recommend a simple 3x3 grid (could be degenerated to 2x3, 2x2, 1x2, etc, depending on which of the four sides you don't need) such that the column widths are auto, *, auto, and the row heights are auto, *, auto.
Here, auto means whatever smallest width/height that is needed to accomodate the content. * means fill it up to the maximum capacity. This way, the center cell of the grid will resize accordingly to the size of the browser, whereas the peripherals are (fixed) sized based on the size of the peripheral controls. Now, you can place the canvas into the (1,1)-cell of the grid and have the child controls of the canvas to be absolute-positioned w.r.t. original of the (1,1)-cell. This approach allows you to get the benefit of auto-resizing without having to manage the relative positioning of the layout yourself.
Second question: if Grid.Column and Grid.Row are not set, they simply default to zero. To do the ChildWindow-less popup, you can add a control to the grid whose Grid.ColumnSpan = 3 and Grid.RowSpan = 3 (assuming the 3x3 grid).
Hope this helps.
05-26-2009 1:10 AM |
Thanks for your response. I actually have a 3x3 grid with * for the middle cell put I didn't think of the rowspan and columnspan properties that can resolve the problem.
I think the Canvas is a exception in the Grid layout because it can draw itself outside the cell it is in (if i put some margin and so on..)?
05-26-2009 1:16 AM |
That's right. Canvas' is not really constrained by the control it resides in. And the meaning of Width and Height are not changed by any resizing event.
Luhrg
5 points
6 Posts
05-26-2009 9:01 AM |
This was enlightening. I am using a canvas within the layout root grid because i want to have a listbox control that moves sideways (partly out of the screen) when I click an item in it. I could not achieve this at all if I placed the listbox in the grid. But canvas as you have said has issues with resizability etc.
You don't happen to have any solution for how to animate something within a grid the way I explained without using canvas (setLeft)?
05-26-2009 11:29 AM |
You can try the following approach (note: may not be the optimal approach but I know it works):
In the center (1,1) cell, you add a border control with a SizeChanged event handler. The content of the border control is a Canvas, which is where you want to put your listbox into. You can add a Clip rectangle to the Canvas. In the border SizeChanged event (which will be called whenever the browser resizes), you update the coordinates of the Clip rectangle to (0, 0, W, H), where W, H are the width and height reported by the SizeChanged event.
05-27-2009 2:51 AM |
Ah I see, that would make the canvas resize accordingly. Thanx for this workaround.
Layout questions