CODEWITHSUNDEEP
c#xamlwindows-phone-8windows-phone
krisdyson
krisdyson

Reputation: 3255

LongListSelector inside a Pivot control - just like the Mail app

I'm currently designing an app where the main page will be a Pivot control just like the Email app on Windows Phone.

My problem is that when I set the LongListSelector's height to auto, the height becomes huge - to encompass the entire list of items. Hence when I run the app, vertical scrolling does not work. So I have to set a fixed height; however, if I do this, how can I cater for different screen sizes / orientations?

I have a layout root which is a grid whose height is auto and vertical alignment is Stretch. Inside that I have a Pivot control whose height is auto and vertical alignment is Stretch. Inside the Pivot control, I have my first Pivot Item whose height is auto and vertical alignment is Stretch. Inside the PivotItem I have my LongListSelector whose height is auto and vertical alignment is Stretch.

I expected the result of this would be that the height of the control would greedily take up the space available on the screen vertically.

Initially I'd like to just understand how to get the same layout as in the Email application, as it does appear to be possible.

Here's my code so far:

<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>

Upvotes: 0

Views: 225

Answers (1)

Pantelis
Pantelis

Reputation: 2070

Set a static height for the pivot header, bind to the page's height and use a converter to subtract the margin's and the pivot's header.

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}}">

Upvotes: 1

Related Questions