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

Question

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

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

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

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

那我该怎么做呢？

---

==EDIT==

我尝试了 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 进行测试。

Answer 2

下面的代码应该适合您。您只需要将内容放在名为 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>

Answer 3

感谢大家的回复，他们帮助我找到了各个页面下方的错误。为了在页面之间有漂亮的翻页过渡，我使用了从 WP7 示例之一复制的样式。这种样式设置 PhoneApplicationFrame 的模板的方式是 VerticalAlignemnt 和 Horizo​​ntalAlignment，（我相信）默认设置为 Stretch，被覆盖，因此我的页面没有按照人们通常期望的方式布置，因为这个特殊的 PhoneApplicationFrame模板。

因此，我所有头痛的原因都隐藏在所有其他抽象层之下。我依靠它只为我提供视觉上吸引人的页面过渡，而不是弄乱应用程序的任何其他方面，但随后我进行了比我更喜欢的更深入的研究，并注意到我需要将垂直/水平对齐设置为 Stretch在几个地方立即为我解决了所有问题。

干杯:-)