Silverlight Border - Am I stupid?

Answer 1

Definitely not stupid. This can be very confusing. I find it helps when thinking about layout in WPF/Silverlight to think top down from the root of the control hierarchy instead of bottom up.

It becomes obvious when you think about the stack panel's job. It stacks up its child elements and sets their widths to its width. It is therefore overriding your border's width of Auto. The Canvas you later wrapped around it does not try to rearrange its children at all, and it does not override their widths, so while its width is the width of the stack panel, the Auto on your border is now working (sized to its content, the TextBox).

Clear as mud?

Here is an article with more detail: http://msdn.microsoft.com/en-us/library/ms745058.aspx

And I highly recommend the WPF book by Chris Sells & Ian Griffiths to get up to speed on the intricacies of WPF/Silverlight layout.

Answer 2

Canvas sould be avoided unless it really makes sense for what you're trying to do. For example, Canvas normally makes sense for a game, or something where you want to drag elements around. Here it's just getting in your way.

Reasons not to use Canvas:

http://blogs.msdn.com/devdave/archive/2008/05/21/why-i-don-t-like-canvas.aspx

Answer 3

An easy way is to get rid of the Stackpanel and just use the VerticalAlignment and HorizontalAlignment to keep it at the top left. Then just set the border Width and leave the Height alone.

<Grid x:Name="LayoutRoot">

<Border Width="150" BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"> <TextBox Text="I'm Serious" Background="LightBlue" /> </Border>

</Grid>