silverlight - 可能没有内容的网格中的右对齐按钮 - 拉伸(stretch)网格以始终填充页面

Question

我对此失去了耐心。我正在开发 Windows Phone 7 应用程序，但我不知道要使用什么布局管理器来实现以下目标:

基本上，当我使用 Grid 作为布局根时，我无法使网格拉伸(stretch)到手机应用程序页面的大小。当主要内容区域已满时，一切都很好，按钮位于我想要的位置。但是，如果页面内容非常短，网格的宽度只能容纳其内容，然后按钮(我非常希望将其保持在屏幕的右边缘附近)从右边缘移开。

如果我替换网格并为布局根使用垂直方向的堆栈面板，按钮位于我想要的位置，但内容区域能够超出底部边缘。因此，当我将一个充满项目的列表框放入主要内容区域时，它不会调整其高度以完全显示在 View 中，但该列表框中的大部分项目只是呈现在显示区域的底部边缘下方。

我尝试使用第三方 DockPanel 布局管理器，然后将按钮停靠在它的顶部并设置按钮的 Horizo​​ntalAlignment="Right" 但结果与网格相同，当内容区域中没有足够的内容(或标题很短)时，它也会缩小大小。

那我该怎么做呢？

---

==编辑==

我尝试了 WPCoder 的 XAML，只是我用真实页面(堆栈面板)中的内容替换了虚拟文本框，并将列表框放入 ContentPanel 网格中。我注意到我之前的内容和 WPCoder 的建议非常相似。这是我当前的 XAML，页面仍然没有增长以适应页面的宽度，我得到的结果与之前的结果相同:

<phone:PhoneApplicationPage 
    x:Name="categoriesPage"
    x:Class="CatalogueBrowser.CategoriesPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
    xmlns:ctrls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
                <TextBlock Text="Browsing:" 
                       Margin="10,10" 
                       Style="{StaticResource PhoneTextTitle3Style}" />
                <TextBlock x:Name="ListTitle" 
                       Text="{Binding DisplayName}" 
                       Margin="0,10" 
                       Style="{StaticResource PhoneTextTitle3Style}" />
            </StackPanel>
            <Button Grid.Column="1"
                    x:Name="btnRefineSearch" 
                    Content="Refine Search" 
                    Style="{StaticResource buttonBarStyle}" 
                    FontSize="14" />
        </Grid>

        <Grid x:Name="ContentPanel" Grid.Row="1">
            <ListBox x:Name="CategoryList" 
                     ItemsSource="{Binding Categories}" 
                     Style="{StaticResource CatalogueList}" 
                     SelectionChanged="CategoryList_SelectionChanged"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

这是带有上述 XAML 标记的页面在模拟器中的样子:

Answer 1

这是否实现了您所追求的目标？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" Grid.Row="0" />
    <Button Content="Search" Grid.Column="1" Grid.Row="0" />
    <ScrollViewer Grid.Row="1" Grid.ColumnSpan="2"></ScrollViewer>
</Grid>

在默认页面/项目中使用名为 ="ContentPanel"的 Grid 进行测试。