XAML Listview scrolling

Question

I have a small problem with scrolling on listview control.

I am trying to turn the scrolling option on when the list on the listview hits the bottom edge of the device. Right now the listview appears on the popup control in my app, I tried settings like binding the height of the listview to the mainpage grid, which didn't work.

Here is the link to the screenshot. The bottom list that is actually the listview control.

Screenshot

Here is the XAML that has listview and the other controls on a popup control:

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>

Please advise!

Answer 1

I think the problem comes from you not setting the proper height to your listview. You said you tried giving it the height of your Mainpage when your listview is in a popup ?

If the listview is in the popup you need to give it the height of the popup. If not, it will be too big and you wont be able to access the last elements.

Also I notice that your listview is part of a row. Let's say that your popup has a height of 1200 and the 4 first rows of your stackpanel total a height of 600. Your listview (and consequently the last row) will need to have a height of 600 or less.

You need to figure out the exact height needed for your listview. In this case, since your row has a height of "*" I would suggest doing something like this :

<Grid x:Name = "GridListView" Grid.Row = "4">
    <StackPanel x:Name="ListView">
        <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" Height ="{Binding ElementName=GridListView, Path=ActualHeight}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                        <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                    </StackPanel>
                 </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Grid>

Pretty much make it possible for you to get the height of the grid in which the listview is (this is why you put the stackpanel in a new grid <Grid Grid.Row ="4" x:Name="GridListView"). Then set the height correspondingly Height="{Binding ElementName=GridListView, Path=ActualHeight}"

Answer 2

Your Grid Row that the ListView is in cannot determine a height.

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
    <Grid Width="{Binding ElementName=setShiftPopup, Path=Width}" Height="{Binding ElementName=setShiftPopup, Path=Height}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="2" Background="#FFE4E4E4" Width="{Binding Width, ElementName=setShiftPopup}" Height="{Binding Height, ElementName=setShiftPopup}" CornerRadius="15" BorderThickness="2">
            <Grid Margin="8.333,67.333,7.5,7.5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="160.833"/>
                    <RowDefinition Height="Auto" MinHeight="68.357"/> // Overflowing due to this set of Auto. 
                </Grid.RowDefinitions>
                <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Grid.Row="0" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" Grid.RowSpan="1" FontFamily="Global User Interface"/>
                <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                <Grid x:Name="gridFASListAndSetButtons" Grid.Row="1" Margin="0,85.5,0,-5.31" Grid.RowSpan="2">
                    <Grid.RowDefinitions>
                        <RowDefinition/> // This row does not have a set height and it cant be determined from the parent
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                    </Grid>
                    <ListView x:Name="lvFASList" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding theFasOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                               <Grid>
                                  <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                  </Grid.ColumnDefinitions>
                                  <TextBlock Grid.Column="0" x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                  <Button Grid.Column="1" x:Name="btnDeleteShift" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Grid>
        </Border>
        <Border Grid.Row="0" Width="{Binding Width, ElementName=borderMainPopup}" Height="Auto" BorderThickness="2" Margin="0,0,-2,0">
            <Border.Background>
                <SolidColorBrush Color="#FF0B6CF8"/>
            </Border.Background>
            <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
        </Border>
    </Grid>
</Popup>

Here is some simplified code that should help, Let me know if you still have problems.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> // For the header
        <RowDefinition Height="Auto"/> // Slider one
        <RowDefinition Height="Auto"/> // Slider two
        <RowDefinition Height="Auto"/> // Favs button
        <RowDefinition Height="*"/> // Listview
    </Grid.RowDefinitions>

    <StackPanel x:Name="Header" Grid.Row="0">


    </StackPanel>
    <StackPanel x:Name="SliderOne" Grid.Row="1">


    </StackPanel>
    <StackPanel x:Name="SliderTwo" Grid.Row="2">


    </StackPanel>

    <StackPanel x:Name="Favbutton" Grid.Row="3">


    </StackPanel>

    <StackPanel x:Name="ListView" Grid.Row="3">
        // Your ListView
    </StackPanel>

</Grid>

Grids can be put inside each StackPanel or you can swap the StackPanels for grids. This xaml will give you a layout similar to the picture below, The height of each blue cell in the picture will be determined by the accumulative height of the content in each blue StackPanel i.e "Header", "SliderOne", "SliderTwo" and "Favbutton".

StackPanel "ListView" will Fill the remaining space.

Update

@Sumchans Okay I have tired to replicate your problem and it seems that a Popup is not in the same visual tree (someone might be able to correct me on this). You will need to somehow set the height of the 'Popup' to something other than Auto to achieve your desired result.

One way in doing this is by binding the height to your most outer element. Most likely a grid, see below.

<Grid x:Name="MyMostOuterControl" >


... <!-- The rest of you controls -->


<Popup x:Name="setShiftPopup" Width="350" Height="{Binding ActualHeight, ElementName=MyMostOuterControl}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>
</Grid>