Question

我对此失去了耐心。我正在使用Windows Phone 7应用程序，我无法弄清楚要使用什么布局管理器来实现以下目的：

An sketch of the desired page layout

基本上，当我使用Grid作为布局根时，我无法使网格延伸到手机应用程序页面的大小。当主要内容区域已满时，一切都很顺利，按钮位于我想要的位置。但是，如果页面内容非常短，网格只能容纳其内容，然后按钮（我不顾一切地靠近屏幕的右边缘）远离右边缘。

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

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

那我该怎么做？

== EDIT ==

我尝试了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标记的页面在模拟器中的样子：

alt text

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>

使用默认页面/项目中的name =“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和HorizontalAlignment（我相信）默认设置为Stretch被覆盖，因此我的页面没有像人们通常期望的那样布局，因为这个特殊的PhoneApplicationFrame模板。

因此，我所有头痛的原因是在所有其他抽象层下面低位躺着。我依靠它只为我提供视觉上有吸引力的页面过渡，而不是弄乱应用程序的任何其他方面，但后来我采取了比我更喜欢的更深的外观，并注意到我需要设置垂直/水平对齐拉伸在几个地方立即为我解决了所有问题。

干杯： - ）

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

3 个答案: