question

ApptacularApps-8305 avatar image
0 Votes"
ApptacularApps-8305 asked danielescipioni commented

How to prevent ListView inside TabViewItem from overflowing the screen

How

 <controls:TabView
     Grid.Row="1"
     x:Name="Tabs"
     TabWidthBehavior="Actual"
     CanCloseTabs="False"
     IsCloseButtonOverlay="False"
     CanDragItems="False"
     CanReorderItems="False"
     AllowDrop="False"
     SelectedTabWidth="200">
    
     <!-- Tabs -->
     <controls:TabViewItem>
         <ListView
           x:Name="List"
           Padding="16"
           IsItemClickEnabled="True"
           ItemsSource="{x:Bind listItem}">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <StackPanel>
                         <TextBlock Text="{Binding Title}" 
                     Style="{StaticResource TitleTextBlockStyle}" />
                     </StackPanel>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </controls:TabViewItem>
     <controls:TabViewItem>
         <TextBlock Padding="16">You can enable drag-and-drop and reorder the tabs too.</TextBlock>
     </controls:TabViewItem>
 </controls:TabView>



windows-uwpwindows-uwp-xaml
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Do not understand the problem, you should see a vertical scroll bar if there are more elements in ListView than the height of the screen can host. What is your current behavior and what do you want to achieve?

0 Votes 0 ·

The listview height appears to be larger than the screen + the vertical scrollbar doesn't appear at all.

0 Votes 0 ·

I made a test and my ListView scrolls correctly without any Grid around it. This is my test page:

<Page ... >
  <controls:TabView ... >
    <controls:TabViewItem  Header="Header 1">
       <ListView ... >
          [...]
       </ListView>
    </controls:TabViewItem>
    <controls:TabViewItem Header="Header 2">
      <TextBlock Padding="16">You can enable drag-and-drop and reorder the tabs too.</TextBlock>
    </controls:TabViewItem>
</controls:TabView>
</Page>


So I wonder if there is some other problem... can you add to your description the XAML that is outside controls:TabView?

Moreover: I think you should add Header property to both TabViewItem: without adding them I was unable to run my test app because I get a "System.Runtime.InteropServices.COMException"...


0 Votes 0 ·

1 Answer

mrlacey avatar image
0 Votes"
mrlacey answered ApptacularApps-8305 commented

Put a Grid inside the TabViewItem and then put the ListView inside the Grid.

The Grid will be limited to the visible space on the screen (unless you size it otherwise) and so won't expand indefinitely like the TabViewItem. It will also constrain the ListView to stop that growing to fit all its children/items.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.