Silverlight/XAML Design Question - Horizontal Alignment (Docking?)

Question

I have a question regarding what XAML to use to achieve my design. I currently have an Image area on the screen, the width can vary. Above the image, I have two toolbars, each with numerous buttons. One of them I want to float/dock to the left edge of the image, and the other one I want to float/dock to the right edge. Of course, as the image gets bigger the toolbox on the right should remain docked to the right edge. How can this be achieved?

+--------------------------+                                +---------------+
|  TOOLBAR 1               |                                |  TOOLBAR 2    |
+--------------------------+                                +---------------+

+---------------------------------------------------------------------------+
|                                                                           |
|                                                                           |
|                                                                           |
|                    <----- VARIABLE-WIDTH IMAGE ----->                     |
|                                                                           |
|                                                                           |
|                                                                           |
+---------------------------------------------------------------------------+

Any XAML code samples and brief explanation would be greatly appreciated. I'm a noob.

Answer 1

Use a grid with two rows and two columns (with the column widths set to Auto). The image will span both columns on the second row. The grid with size to its content, and as the grid grows (because the image has grown), the right aligned toolbar will move to remain aligned with the image accordingly. Here's an example in XAML, using rectangles in place of the toolbars and images:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Rectangle Name="Toolbar1" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" />
    <Rectangle Name="Toolbar2" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" />
    <Rectangle Name="Image" Fill="#FFB94222" Width="500" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>

Change the width of the Rectangle named "Image" to see the effect.

Hope this helps...

Chris