Silverlight/XAML设计问题-水平对齐(对接?)
我有一个关于使用什么XAML来实现我的设计的问题。我目前在屏幕上有一个图像区域,宽度可以变化。在图片上方,我有两个工具栏,每个工具栏都有许多按钮。其中一个我想浮动/停靠到图像的左边缘,另一个我想浮动/停靠到图像的右边缘。当然,随着图像变大,右侧的工具箱应保持停靠在右侧边缘。如何做到这一点Silverlight/XAML设计问题-水平对齐(对接?),silverlight,xaml,docking,Silverlight,Xaml,Docking,我有一个关于使用什么XAML来实现我的设计的问题。我目前在屏幕上有一个图像区域,宽度可以变化。在图片上方,我有两个工具栏,每个工具栏都有许多按钮。其中一个我想浮动/停靠到图像的左边缘,另一个我想浮动/停靠到图像的右边缘。当然,随着图像变大,右侧的工具箱应保持停靠在右侧边缘。如何做到这一点 +--------------------------+ +---------------+ | TOOLBAR 1
+--------------------------+ +---------------+
| TOOLBAR 1 | | TOOLBAR 2 |
+--------------------------+ +---------------+
+---------------------------------------------------------------------------+
| |
| |
| |
| <----- VARIABLE-WIDTH IMAGE -----> |
| |
| |
| |
+---------------------------------------------------------------------------+
+------------------------------------+---------------+
|工具栏1 | |工具栏2|
+--------------------------+ +---------------+
+---------------------------------------------------------------------------+
| |
| |
| |
| |
| |
| |
| |
+---------------------------------------------------------------------------+
任何XAML代码示例和简要解释都将不胜感激。我是noob。使用两行两列的网格(列宽设置为自动)。图像将跨越第二行的两列。网格的大小与其内容相同,并且随着网格的增长(因为图像已增长),右对齐工具栏将相应地移动以保持与图像对齐。下面是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”的矩形的宽度以查看效果
希望这有助于
Chris使用两行两列的网格(列宽设置为自动)。图像将跨越第二行的两列。网格的大小与其内容相同,并且随着网格的增长(因为图像已增长),右对齐工具栏将相应地移动以保持与图像对齐。下面是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”的矩形的宽度以查看效果
希望这有助于
克里斯