CODEWITHSUNDEEP
listviewuwpwindow-resize
Hobbe51
Hobbe51

Reputation: 53

How to resize a UWP ListView to fit Page after resizing Page?

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:

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?

Upvotes: 3

Views: 1938

Answers (2)

Razor
Razor

Reputation: 689

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>

Upvotes: 1

Ask Too Much
Ask Too Much

Reputation: 637

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>

Upvotes: 0

Related Questions