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

发布于 2024-09-25 17:17:36 字数 1166 浏览 5 评论 0原文

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

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

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

任何 XAML 代码示例和简短解释将不胜感激。我是个菜鸟。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坏尐絯℡ 2024-10-02 17:17:36

使用两行两列的网格（列宽设置为自动）。图像将跨越第二行的两列。网格的大小适合其内容，并且随着网格的增长（因为图像已经增长），右对齐的工具栏将相应地移动以保持与图像对齐。下面是 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”的矩形的宽度以查看效果。

希望这有帮助......

克里斯

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

回复收藏 0 原文

~没有更多了~