Search code examples
c#xamluwp

UWP ListView takes full screen height even when limited by Height parameter (or MaxHeight or grid row height)


I am making a dictionary in UWP. I have ListView element with all words inside and search box att bottom of page – both are inside grid with two rows (ListView´s height is *, TextBox´s is 32).

Problem is, that ListView takes full page´s height, even when limited by grid row´s height. Setting Height or MaxHeight not works. Items are still visible under TextBox (or another elements). Only thing, that changed is, that ListView items are not clickable.

I tried a lot of searching, but with no result. Could you please help me to hide rest of items?

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        
        <ListView Grid.Row="0" x:Name="SlovnikListView" ItemsSource="{x:Bind DictionaryEN}" IsItemClickEnabled="True" SelectionMode="None" ItemClick="SlovnikListView_ItemClick" VerticalAlignment="Top">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Slovo">
                    <StackPanel Width="auto" Padding="5,10">
                        <TextBlock FontSize="13" Text="{x:Bind EnglishWord}"/>
                        <TextBlock FontSize="17" Text="{x:Bind CzechTranslation}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <TextBox Grid.Row="1" VerticalAlignment="Stretch" PlaceholderText="Search" Opacity="1" Height="Auto" TextAlignment="Start" VerticalContentAlignment="Center" />

    </Grid>

Screenshot with this code – one of items is behind search bar:

Screenshot with this code – one of items is behind search bar

Screenshot of app with first grid row height set to 300 px. Note that items are still visible, but they are not clickable (or selectable):

Screenshot of app with first grid row height set to 300 px. Note that items are still visible, but they are not clickable (or selectable)


Solution

  • Solved it by adding <VirtualizingStackPanel/> to my ListView.

        <ListView Grid.Row="0" x:Name="SlovnikListView" ItemsSource="{x:Bind SlovnikSerazeny}" IsItemClickEnabled="True" SelectionMode="None" ItemClick="SlovnikListView_ItemClick" VerticalAlignment="Top">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Slovo">
                    <StackPanel Width="auto" Padding="5,10">
                        <TextBlock FontSize="13" Text="{x:Bind AnglickeSlovo}"/>
                        <TextBlock FontSize="17" Text="{x:Bind CeskyPreklad}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    I have no idea what it does, but it helped with that overflow and with some weird shake when scrolling.