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

我正在经历基于Silverlight 4中的PivotViewer控件设计第一个Silverlight应用程序的过程。我在按照我的设计组织顶部的酒吧时遇到问题：

（来源：）

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

XAML看起来真的很难看，嵌套面板似乎可以工作，但似乎不是很好的实践

我似乎找不到一种方法可以在不剪切或重叠的情况下调整窗口的大小

我通过以下代码获得了最佳结果：

<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>

EVE在线StackExchange
臭虫及；建议

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

在小窗口中，上述代码也可能导致以下情况：

（来源：）

---

有更好的方法吗？

如果您不喜欢嵌套面板，网格可能是更好的选择。对于四个元素，有如下五列网格：

<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>

EVE在线StackExchange
臭虫及；建议

---

这将四列设置为自动大小，因此它们会根据UI元素的大小进行调整，而中间的列是星形的，因此它会填充它们之间的其余空间

虽然您可以使用星形网格列来强制控件之间的可折叠区域，但当空间不足时（例如，400像素宽的区域中显示600像素），您仍然需要考虑会发生什么情况。我认为您需要的是ScrollViewer，这是一个ContentControl，用于确定滚动条何时出现

在下面的标记中，我做了两件事：首先，我使用Silverlight toolkit的DockPanel来隔离显示的左侧和右侧部分（一个非常类似的事情可以通过将Cols 0和2设置为“Auto”并将Col 1设置为“*”的3列网格来完成），但在DockPanel中使用Left和Right可能会使意图更具可读性。）第二，整个过程被包装在ScrollViewer中，水平ScrollBarVisibility设置为“Auto”-当内容太大而无法容纳时，可以设置一个滚动条

<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>

---

Hmm，其中的关键概念是HorizantalaAlignment=“Stretch”和ColumnDefinition Width=“*”，似乎是一种清晰的布局方式。谢谢你把它放在一起。有趣的是，配置最小尺寸不是更好吗？这在Silverlight中可能吗？我想知道，让应用程序在组件中滚动，或者被视图端口剪切，并且需要使用浏览器滚动条，哪个用户体验更好？谢谢你的帖子。“更好”可能有点武断——这取决于具体情况。是的，最小大小有几种“风格”。您可以在控件、容器或根控件上设置最小大小。您还可以控制Silverlight在浏览器本身中的外观，并为SL对象设置特定大小-您可以在对象标记本身中正确执行此操作-查找宽度和高度参数，而不是将其设置为%，将其设置为显式像素值。。。