Pivot 控件中的 LongListSelector - 就像邮件应用程序一样

Question

我目前正在设计一个应用程序，其中主页将是一个 Pivot 控件，就像 Windows Phone 上的电子邮件应用程序一样。

我的问题是，当我将 LongListSelector 的高度设置为自动时，高度会变得很大 - 包含整个项目列表。因此，当我运行应用程序时，垂直滚动不起作用。所以我必须设置一个固定的高度；但是，如果我这样做，我该如何满足不同的屏幕尺寸/方向？

我有一个布局根，它是一个高度为自动且垂直对齐为拉伸的网格。 在里面我有一个 Pivot 控件，它的高度是自动的，垂直对齐是拉伸的。 在 Pivot 控件中，我有我的第一个 Pivot Item，它的高度是自动的，垂直对齐是 Stretch。 在 PivotItem 内，我有我的 LongListSelector，它的高度是自动的，垂直对齐是 Stretch。

我预计这样做的结果是控件的高度会贪婪地垂直占用屏幕上的可用空间。

最初我只是想了解如何获得与电子邮件应用程序中相同的布局，因为它似乎是可能的。

到目前为止，这是我的代码：

<Grid x:Name="LayoutRoot" d:DataContext="{StaticResource Locator}">

    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <phone:Pivot Title="Application name" Style="{StaticResource PivotStyle}" Padding="0,0,0,0"
        TitleTemplate="{StaticResource PivotTitleDataTemplate}" FontFamily="Portable User Interface">

        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontSize="40" Margin="0,10,0,0" FontFamily="Portable User Interface"></TextBlock>
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>


        <phone:PivotItem Header="Upcoming" Margin="0,20,0,0" VerticalContentAlignment="Top" HorizontalContentAlignment="Stretch" >

            <phone:LongListSelector 
                LayoutMode="List"
                HorizontalAlignment="Stretch"                  
                VerticalAlignment="Stretch" 
                DataContext="{Binding EventList, Mode=OneWay}" 
                ItemsSource="{Binding List}" 
                Style="{StaticResource LLSFloatingScrollbarStyle}"
                ItemTemplate="{StaticResource DataTemplate1}" 
                VerticalContentAlignment="Top" 
                HorizontalContentAlignment="Left" 
                Margin="0"/>

        </phone:PivotItem>

        <phone:PivotItem Header="Login">
            <TextBlock HorizontalAlignment="Left" Margin="0" TextWrapping="Wrap" Text="Please type in your username and password" VerticalAlignment="Top"/>
        </phone:PivotItem>
    </phone:Pivot>

</Grid>

Answer 1

为枢轴标题设置静态高度，绑定到页面高度并使用转换器减去边距和枢轴标题。

c#

public class PhonePageToLLSConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
        CultureInfo culture)
    {
        var pageHeight = (double)value;
        return layoutHeight - (TotalMargins + PivotHeaderHeight);
    }
}

xaml

<phone:PhoneApplicationPage x:Name="PhonePage" ...>

<phone:LongListSelector Height="{Binding ElementName=PhonePage, Path=ActualHeight, 
    Converter={StaticResource PhonePageToLLSConverter}}">