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

时间:2014-06-25 07:42:32

标签: c# xaml windows-phone-8 windows-phone

我目前正在设计一个应用程序,主页面将成为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>

1 个答案:

答案 0 :(得分: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}}">