如何在XAML/Silverlight的右上角布局控件？

Question

我正在完成基于Silverlight 4的PivotViewer控件设计我的第一个Silverlight应用程序的过程.我在根据我的设计在顶部组织栏时遇到问题:

Pivot UI http://www.richard-slater.co.uk/wp-content/uploads/2010/08/PivotUI.png

我找到了左对齐徽标和标题的方法,这是一种将按钮与各种面板组合对齐的方法,但是它有两个主要问题.

1. XAML看起来非常难看,嵌套面板似乎有效,但似乎不是很好的做法.
2. 我似乎无法找到一种方法来处理窗口调整大小而不剪切或重叠.

我使用以下代码获得了最佳结果:

<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
    <Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
    <TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
    <Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</StackPanel>

我打算将一些属性移动到样式中,但它仍然感觉很乱.

上面的代码也可以在小窗口中产生以下结果:

alt text http://www.richard-slater.co.uk/wp-content/uploads/2010/08/EVEMonPivotOverLay.png

有没有更好的办法？

Answer 1

如果您不喜欢嵌套面板,Grid可能是更好的选择.使用您的四个元素,有一个五列网格,如下所示:

<Grid HorizontalAlignment="Stretch">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
    <Image x:Name="LogoImage" 
           Height="50" 
           Width="50" 
           Source="/EVEMonPivot;component/EVEMonLogoBlue.png" 
           Grid.Column="0" />
    <TextBlock x:Name="TitleText" 
               Height="50" 
               Text="EVEMon Pivot" 
               FontSize="40" 
               Grid.Column="1" 
               Grid.Row="0" 
               VerticalAlignment="Center" 
               FontWeight="Bold" 
               Padding="10,0,0,0" />
    <Button x:Name="StackExButton" 
            Grid.Column="4" 
            Style="{StaticResource NavButton}" 
            Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" 
            Grid.Column="5" 
            Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</Grid>

这会将四列设置为自动调整大小,因此它们会根据UI元素的大小进行调整,中间列的颜色为星号,因此它会填充它们之间的其余空间.