Silverlight / XAML设计问题 - 水平对齐(对接?)

时间:2010-09-30 13:59:39

标签: silverlight xaml docking

我对XAML用于实现我的设计有疑问。我目前在屏幕上有一个图像区域,宽度可以变化。在图像上方,我有两个工具栏,每个工具栏都有许多按钮。其中一个我想浮动/停靠到图像的左边缘,另一个我想浮动/停靠到右边缘。当然,随着图像变大,右侧的工具箱应保持对接到右边缘。如何实现这一目标?

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

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

非常感谢任何XAML代码示例和简要说明。我是个菜鸟。

1 个答案:

答案 0 :(得分:4)

使用包含两行和两列的网格(列宽设置为“自动”)。图像将跨越第二行的两列。网格的大小与其内容一样,随着网格的增长(因为图像已经增长),右对齐的工具栏将相应地移动以保持与图像对齐。这是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”的矩形的宽度以查看效果。

希望这会有所帮助......

克里斯