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

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

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

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

我曾尝试使用第三方DockPanel布局管理器，然后将按钮停靠在其顶部，并设置按钮的

HorizontalAlignment=“Right”

，但结果与网格相同，当内容区域中的内容不足（或标题较短）时，它的大小也会缩小

那我该怎么做呢

---

==编辑==

我尝试了WPCoder的XAML，只是用真实页面（stackpanel）中的文本框替换了虚拟文本框，并将列表框放入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标记的页面在emulator中的外观：

---

下面的代码应该适合您。您只需要将内容放入名为ContentPanel的网格中。如果这不起作用，您需要发布不起作用的XAML

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneApplication1.MainPage"
    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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <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>
            <TextBlock Text="CAPTION" VerticalAlignment="Center" />
            <Button Content="Button" Grid.Column="1" />
        </Grid>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

---

这是否实现了您的目标

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

---

在默认页面/项目中使用name=“ContentPanel”在

网格中进行测试。
感谢各位的回复，他们帮助我找到了各个页面下面的bug。为了在页面之间进行良好的页面翻转转换，我使用了从WP7示例之一复制的样式。此样式为PhoneApplicationFrame设置模板时，垂直对齐和水平对齐（我相信默认设置为拉伸）被覆盖，因此由于此特殊的PhoneApplicationFrame模板，我的页面没有按照通常预期的方式进行布局

因此，我所有头痛的原因都隐藏在所有其他抽象层之下。我依赖于它只为我提供了视觉上有吸引力的页面转换，并且没有干扰应用程序的任何其他方面，但随后我进行了比我希望的更深入的研究，并注意到我需要将垂直/水平对齐设置为在多个位置延伸，这会立即为我解决所有问题

干杯：-）
对不起，我没有工作。我完全理解这里的逻辑，我也在做同样的事情。但这并不能解决问题。我如何才能强制LayoutRoot在移动应用程序页面的整个宽度上延伸？我知道你已经推断出这是一种风格（这就是我建议你下一步尝试的风格…但为时已晚。：）。我在应用程序中得到了与此标记相同的行为，然而，当我完全出于挫败而继续进行并创建了一个全新的项目，只是为了尝试您留在这里的代码时，那么。。。我发现了一个令人惊讶的事实（好吧，不那么令人惊讶，我通常都会这样认为）——它是有效的。一定是其他东西弄乱了我的页面布局。我正在使用应用程序级样式将转换应用到各个页面：等等。。。这可能会以某种方式干扰页面的布局过程。。。呜呜……呜呜。。。。。。