silverlight - Silverlight/XAML 设计问题 - 水平对齐（停靠？）

Question

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

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

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

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

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