Home > Mobile >  UWP ListView with no scrolling
UWP ListView with no scrolling

Time:10-07

For some reason, scrolling simply doesn't work on this ListView, and I really don't know why. The items display properly, just the list isn't scrollable. Using grids isn't viable (from what I know, anyway) since the items that are set to appear are pulled from a web source (don't know how many there will be, nor am I very willing to use hacky methods to get a scrollable list).

<Page
    x:Class="Hello_World.News_Feed"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <ListView x:Name="NewsFeedList" x:FieldModifier="public"
                Padding="15,15,15,15" 
                FontFamily="Segoe UI Variable Display"
                SelectionMode="None" 
                VerticalAlignment="Top"
                Margin="10,0,0,0">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Margin" Value="0, 10, 0, 10"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Frame
                        BorderThickness="1"
                        Padding="10,10,10,10"
                        CornerRadius="5"
                        Height="Auto">

                    <Frame.BorderBrush>
                        <SolidColorBrush Color="Gray" Opacity="0.2" />
                    </Frame.BorderBrush>
                    <Frame.Background>
                        <SolidColorBrush Color="Gray" Opacity="0.05" />
                    </Frame.Background>

                    <Grid>
                        <Grid Padding="0,5,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Margin="3,3,0,0" CornerRadius="100" Height="50" Width="50" VerticalAlignment="Top">
                                <Border.Background>
                                    <ImageBrush Stretch="Fill" ImageSource="{Binding AuthorPicture}"/>
                                </Border.Background>
                            </Border>
                            <TextBlock x:Name="Author" Margin="15,5,0,0" Height="Auto" Grid.Column="1" FontSize="17" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Author}" TextWrapping="WrapWholeWords">
                                <TextBlock.Foreground>
                                    <SolidColorBrush>#353535</SolidColorBrush>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <TextBlock x:Name="Time" Margin="15,28,0,0" Height="Auto" Grid.Column="1" FontSize="15" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Time}" TextWrapping="WrapWholeWords">
                                <TextBlock.Foreground>
                                    <SolidColorBrush>#656565</SolidColorBrush>
                                </TextBlock.Foreground>
                            </TextBlock>
                        </Grid>
                        <Grid Padding="10,5,10,10">
                            <TextBlock x:Name="Heading" Margin="0,70,0,0" Height="Auto" Grid.Column="1" FontSize="18" FontFamily="Segoe UI Variable Text" FontWeight="Semibold" Text="{Binding Title}" TextWrapping="WrapWholeWords"/>
                            <TextBlock x:Name="Body" Margin="0,100,0,0" Height="Auto" Grid.Column="1" FontFamily="Segoe UI Variable Text" FontWeight="Normal" Text="{Binding Body}" TextWrapping="WrapWholeWords"/>
                        </Grid>
                    </Grid>
                </Frame>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Page>

Even after conducting some research online, I couldn't find a solution to this annoying issue. Any ideas?

CodePudding user response:

After conducting more tests, I finally found that it was the automatic height of the frame which I call NavigateTo on which causes this issue. Manually setting the height fixes the problem, but the problem with is I want the size to be dynamic but also know when content stops fitting on the screen. What could I do about that?

Edit: Fixed this - realised the frame was under a StackPanel (forgot that they break auto height/width).

  • Related