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

Question

我正在根据 Silverlight 4 中的 PivotViewer 控件设计我的第一个 Silverlight 应用程序。我在按照我的设计组织顶部的栏时遇到问题：

_{（来源：richard-slater.co.uk）}

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

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>

我打算将一些属性移动到样式中，但是仍然感觉很乱。

上面的代码在小窗口中也可以导致如下：

_{（来源：richard-slater.co.uk）}

有没有更好的办法？

Answer 1

如果您不喜欢嵌套面板，网格可能是更好的选择。使用您的四个元素，有一个像这样的五列网格：

<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 元素的大小进行调整，并且中心列是星形大小，因此它会填充它们之间的其余空间。

Answer 2

虽然您可以使用星型网格列在控件之间强制设置可折叠区域，但您仍然需要考虑在没有足够空间时会发生什么（例如，600 像素显示在 400 -像素宽区域。）我认为您需要的是一个 ScrollViewer，它是一个 ContentControl，可让您确定滚动条何时出现。

在下面的标记中，我做了两件事：首先，我使用 Silverlight 工具包的 DockPanel 来隔离显示的左右部分（可以使用 Cols 0 和 Cols 的 3 列网格来完成非常相似的事情） 2 设置为“Auto”，Col 1 设置为“*”，但 DockPanel 中 Left 和 Right 的具体使用可能使意图更具可读性。）其次，整个内容被包装在一个 ScrollViewer 中，Horizo​​ntalScrollBarVisibility 设置为“自动” - 当内容太大而无法容纳时，放置一个滚动条。

<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <toolkit:DockPanel >
            <StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top"  Height="50" Margin="5">
                <TextBlock Text="Some long text" FontSize="30"/>
            </StackPanel>
            <StackPanel toolkit:DockPanel.Dock="Right"  Orientation="Horizontal" VerticalAlignment="Top"  HorizontalAlignment="Right" Height="50" Margin="5">
                <Button Content="First Button" Margin="5"/>
                <Button Content="Second Button" Margin="5"/>
            </StackPanel>
        </toolkit:DockPanel>
    </ScrollViewer>
    <TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>