Silverlight/XAML设计问题 - 水平对齐（对接？）

Question

我有一个关于使用什么XAML来实现我的设计的问题。我目前在屏幕上有一个图像区域，宽度可以变化。在图片上方，我有两个工具栏，每个工具栏都有多个按钮。其中一个我想漂浮/停靠在图像的左边缘，另一个我想漂浮/停靠在右边缘。当然，随着图像变大，右侧的工具箱应保持停靠在右侧边缘。这怎么能实现？

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

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

任何XAML代码示例和简要说明将不胜感激。我是小白。

Answer 1

使用两行两列的网格（列宽设置为自动）。图像将跨越第二行的两列。网格的大小与其内容相同，随着网格的增长（因为图像已经增长），右对齐的工具栏将会移动以保持与图像的对齐。下面是XAML为例，在工具栏放置和图像的使用矩形：

<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> 

更改矩形的名为“图像”的宽度才能看到效果。

希望这有助于...

克里斯