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 of app with first grid row height set to 300 px. Note that items are still visible, but they are not clickable (or selectable):
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.