Silverlight - Dynamic Layout

Question

Hello,

I have a Silverlight application that will run out of the browser. I want the layout to resize based on the size of the window. The layout is composed of a Grid. This Grid has a Canvas which hosts a Border, and other controls. The Canvas correctly resizes as the window resizes. However, the Border control seems to be a fixed size. How do I make the Border control stretch to the width of the Canvas and resize if the Window resizes? My code looks like the following:

<Grid x:Name="LayoutRoot">
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <Canvas x:Name="myCanvas" Background="Lime">
    <Border Canvas.Top="77" Border="Black" BorderThickness="2">
       <TextBlock x:Name="myTextBlock" />
    </Border>
  </Canvas>
</Grid>

Thank you for your help!

Answer 1

Assuming you are wanting the Canvas to be bound to the first Grid.Column, then you can add RowDefinitions and then move the Border to outside the Canvas, then the following code should work.

(Only tested in WPF)

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="77"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Canvas x:Name="myCanvas" Background="Lime" Grid.RowSpan="2">
    </Canvas>

    <Border Grid.Row="1" Border="Black" BorderThickness="2" VerticalAlignment="Top">
        <TextBlock x:Name="myTextBlock" Text="Happy TEXT" />
    </Border>
</Grid>

New stuff: <Grid.RowDefinitions>, Grid.RowSpan="2" to Canvas and Grid.Row="1" plus VerticalAlignment="Top" to Border. Text added for testing.