3

I am working on two Windows 10 UWP Store apps that both contain a ListView. My problem is that when I resize the Page and make it smaller, the ListView does not change size. Thus a part of the ListView becomes inaccessible to the user. In order to research this I made a very simple app and only changed the XAML code.

This is how the XAML code looks like:

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Height="600" Width="340"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,0">
    <ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>
    </ListView>

</Grid>

How to replicate:

  • Create a Windows 10 Store app
  • Alter the MainPage as shown above
  • Run the program
  • Resize the window height to make it lower than the ListView
  • Try to scroll down to Line 20

Expected behaviour:

The ListView should be resized

Line 20 should be accessible

Actual behaviour:

The ListView is not resized

Line 20 cannot be accessed

I have done similar programs in Windows API:s prior to UWP, and thought this should be easy, but after reading the MSDN documentations for days and checking forums without success I realize there must be some new philosophies behind UWP that escapes my understanding. It is probably something easy I have missed. Any Ideas?

2 Answers 2

1

You have specified height and width for the page which makes the page size constant. I have removed the page width and height attributes. It works now. And regarding the scroll-viewer, you don't need a scroll-viewer to scroll through the items of the list-view.

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,0">
    <ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>
    </ListView>

</Grid>
2
  • Ah, the size for the Page was the problem. Thank you!
    – Hobbe51
    Jan 5, 2016 at 15:09
  • How do I mark your answer as the correct answer and give you credit for your help (I'm new to stackoverflow).
    – Hobbe51
    Jan 5, 2016 at 15:10
0

The only solution I can think is wrapping ScrollViewer outside ListView. Or remove Height="600" attribute on ListView.

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ListView x:Name="listView" Margin="0,0,0,0" HorizontalAlignment="Stretch" Height="600" VerticalAlignment="Stretch" Width="340" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>    
    </ListView>
</ScrollViewer>
6
  • Thanks for your answer. I tried both those suggestions, but it still has the same problem.
    – Hobbe51
    Jan 5, 2016 at 13:14
  • What problem do you encounter ? Jan 5, 2016 at 13:16
  • When I resize the window, the Page, the ListView does not change size. If the window is smaller than the ListView, parts of the ListView cannot be seen. I need the ListView to be the same size as the Page at all times.
    – Hobbe51
    Jan 5, 2016 at 13:32
  • Try remove ScrollViewer control, and remove Height and Width attribute in listView from my answer. Jan 5, 2016 at 13:55
  • Then if I do that, I'm back to square zero. Anyway, I found something called 'VerticalContentAlignment' witch sounded interesting, but after a lot of fiddeling still no cigar.
    – Hobbe51
    Jan 5, 2016 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.