CODEWITHSUNDEEP
xamllistviewwindows-phone-8.1
Luke Vo
Luke Vo

Reputation: 20778

ListView is not Scrollable

I have the following ListView in my xaml layout:

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

    <StackPanel Grid.Row="0">
        <TextBlock Text="{StaticResource AppName}" Style="{StaticResource TitleTextBlockStyle}"/>
    </StackPanel>

    <StackPanel Grid.Row="1">
        <ListView x:Name="lstStatus">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="12">
                        <Image Source="ms-appx:///Assets/Logo.png" Margin="12" Width="150" Height="150"></Image>

                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Path='Fullname'}" Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"></TextBlock>
                            <TextBlock Text="{Binding Path='FormattedCreationTime'}" TextWrapping="WrapWholeWords"></TextBlock>

                            <TextBlock Text="{Binding Path='Text'}" Style="{StaticResource ListViewItemContentTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>

</Grid>

However, I met two problems:

I am pretty new to Windows Phone design. Please tell me where did I do wrong.

Upvotes: 0

Views: 89

Answers (1)

Igor Ralic
Igor Ralic

Reputation: 15006

The StackPanel takes as much space as it needs. As the ListView grows, the StackPanel expands to allow it to grow, hence you cannot scroll to see the items you don't see on the screen.

Put the ListView in a Grid or limit the Height of the StackPanel.

<Grid Grid.Row="1">
    <ListView x:Name="lstStatus">
    ...

Similar problem occurs in your ItemTemplate, and the fix is also similar.

<DataTemplate>
    <Grid Margin="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image ...

        <StackPanel Grid.Column="1">
            <TextBlock ....
        </StackPanel>
    </Grid>
</DataTemplate>

Upvotes: 1

Related Questions