Question

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

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

我有一个布局根，它是一个网格，其高度为auto，垂直对齐为Stretch。在里面，我有一个Pivot控件，其高度是自动和垂直对齐是拉伸。在Pivot控件内部，我有第一个Pivot项目，其高度为自动，垂直对齐为Stretch。在PivotItem内部，我有我的LongListSelector，其高度为auto，垂直对齐为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}}">

数据透视控件内的LongListSelector - 就像Mail应用程序一样

1 个答案: