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

【问题标题】：Silverlight/XAML Design Question - Horizontal Alignment (Docking?)Silverlight/XAML 设计问题 - 水平对齐（停靠？）
【发布时间】：2010-09-30 13:59:39
【问题描述】：

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

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

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

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

【问题讨论】：

标签： silverlight xaml docking

【解决方案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>

改变名为“Image”的Rectangle的宽度，看看效果。

希望这会有所帮助...

克里斯

【讨论】：