none
[UWP]Listview with Horizontal stack panel not scrolling windows 10 universal app RRS feed

  • Question

  • <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ChennaiTrains"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ViewModel="using:ChennaiTrains.ViewModel"
        xmlns:Model="using:ChennaiTrains.Model"
        x:Class="ChennaiTrains.MainPage"
        xmlns:c="using:ChennaiTrains.Controls"
        mc:Ignorable="d" Loaded="Page_Loaded">
    
        <Page.BottomAppBar>
            <CommandBar>
                <AppBarButton Icon="Find" Click="AppBarButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
        <Page.Background>
            <ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
        </Page.Background>
    
        <Grid>
    
           <Grid x:Name="body">
                <StackPanel>
                <Grid x:Name="titlebar">
                <StackPanel Orientation="Horizontal" Background="Transparent">
                    <Button x:Name="menu"
                                  VerticalAlignment="{x:Bind VerticalContentAlignment}"
                                  HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
                                 FontSize="30"
                                  FontFamily="Segoe MDL2 Assets"
                                  Content="&#xE700;" Click="HamburgerButton_Click"
                              Background="Transparent" Height="42" Visibility="Visible"/>
                    <TextBlock x:Name="content"
                          FontSize="25"
                         Text="Chennai Compass" Height="42" Visibility="Visible"
                        VerticalAlignment="{x:Bind VerticalContentAlignment}"
                        HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
                </StackPanel>
                </Grid>
                <SplitView x:Name="MySplitView"
            DisplayMode="Inline"
            OpenPaneLength="150"
            CompactPaneLength="50"
            IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
                    <SplitView.Pane>
    
                        <StackPanel Background="Transparent">
    
                           <!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
    
                        Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
    
                            <StackPanel Orientation="Horizontal" Background="Transparent">
    
                                <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
    
                            Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
    
                                <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Background="Transparent">
    
                                <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
    
                            Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
    
                                <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Background="Transparent">
    
                                <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
    
                            Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
    
                                <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
    
                            </StackPanel>
    
                        </StackPanel>
                    </SplitView.Pane>
                    <Grid>
                        <AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
                    PlaceholderText="Enter the starting point"
                    QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
                    SuggestionChosen="AutoSuggestBox_SuggestionChosen"
                    QuerySubmitted="AutoSuggestBox_QuerySubmitted"    
                    TextMemberPath="StationName"
                    >
                            <AutoSuggestBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="2">
                                        <TextBlock Text="{Binding StationName}" />
                                    </StackPanel>
                                </DataTemplate>
                            </AutoSuggestBox.ItemTemplate>
                            <AutoSuggestBox.DataContext>
                                <ViewModel:AutoSuggestBoxVM/>
                            </AutoSuggestBox.DataContext>
                        </AutoSuggestBox>
    
                        <AutoSuggestBox x:Name="DestinationBox"
                    QueryIcon="Find"
                    DisplayMemberPath="{Binding StationList.StationName}"
                    TextMemberPath="StationName"
                    TextChanged="DestinationBox_TextChanged"
                    SuggestionChosen="DestinationBox_SuggestionChosen"
                    PlaceholderText="Enter the destination" Margin="0,60,0,0">
                            <AutoSuggestBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="2">
                                        <TextBlock Text="{Binding StationName}" />
                                    </StackPanel>
                                </DataTemplate>
                            </AutoSuggestBox.ItemTemplate>
                            <AutoSuggestBox.DataContext>
                                <ViewModel:AutoSuggestBoxVM/>
                            </AutoSuggestBox.DataContext>
                        </AutoSuggestBox>
    
                            <Grid x:Name="resultGrid"  Margin="0,140,2,0">
    
                                <ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
       ScrollViewer.VerticalScrollMode="Enabled" >
                                  <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Margin" Value="5"/>
                                <Setter Property="Padding" Value="15"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                                <ListView.Resources>
                                    <DataTemplate x:Key="TimeTemplate">
    
    
                                                <Grid Background="Transparent">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="*"/>
                                                    </Grid.RowDefinitions>
                                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
    
                                                        <TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
                                                        <TextBlock x:Name="startAt"  Text="{Binding Time}" />
                                                        <TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="&#xE121;">
    
                                                        </TextBlock>
                                                        <TextBlock x:Name="duration" Text="{Binding Duration}"/>
                                                        <TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
                                                            <TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}"  />
                                                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                                                   Text="&#xEB4D;"
                                                                   Margin="-75,35,0,0"></TextBlock>
                                                            <TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}"  />
                                                        </StackPanel>
    
                                                </Grid>
    
    
    
                                    </DataTemplate>
                                </ListView.Resources>
                                <ListView.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock x:Name="headerText" Text="Next available Trains"/>
                                    </DataTemplate>
                                </ListView.HeaderTemplate>
                                <ListView.ItemTemplate>
                                    <StaticResource ResourceKey="TimeTemplate"/>
                                </ListView.ItemTemplate>
                                <ListView.DataContext>
                                    <Model:ResultListModel/>
                                </ListView.DataContext>
                            </ListView>
                        </Grid>
                    </Grid>
                </SplitView>
              </StackPanel>
            </Grid>
        </Grid>
    </Page>

    VAravind ---------------------------------------------------------------------------------------------------------------------------------- Please click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if a post has been useful to you. Blog

    Monday, August 31, 2015 4:39 PM

Answers

  • Hi VAravind,

    Welcome to the Developing Universal Windows apps forum!

    Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools

    I have tested your code and I can reproduce this issue in my side.

    I found that you have used ListView as following:

    <Grid x:Name="resultGrid"  Margin="0,140,2,0">
        <ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
       ScrollViewer.VerticalScrollMode="Enabled">
    ......


    In my mind it is because that in your code the ListView does not have a fixed height, in this way we can not scroll it because some of the ListViewItems are out of the screen. In order to solve this issue, please try to set a fixed height for the ListView like the folllowing:

    <Grid x:Name="resultGrid"  Margin="0,140,2,0">
        <ListView x:Name="resultsList" Height="500" ScrollViewer.VerticalScrollBarVisibility="Auto"
       ScrollViewer.VerticalScrollMode="Enabled">
    ......

    After that it works very well in my side.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Wednesday, September 2, 2015 6:25 AM
    Owner

All replies

  • Hi VAravind,

    Welcome to the Developing Universal Windows apps forum!

    Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools

    I have tested your code and I can reproduce this issue in my side.

    I found that you have used ListView as following:

    <Grid x:Name="resultGrid"  Margin="0,140,2,0">
        <ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
       ScrollViewer.VerticalScrollMode="Enabled">
    ......


    In my mind it is because that in your code the ListView does not have a fixed height, in this way we can not scroll it because some of the ListViewItems are out of the screen. In order to solve this issue, please try to set a fixed height for the ListView like the folllowing:

    <Grid x:Name="resultGrid"  Margin="0,140,2,0">
        <ListView x:Name="resultsList" Height="500" ScrollViewer.VerticalScrollBarVisibility="Auto"
       ScrollViewer.VerticalScrollMode="Enabled">
    ......

    After that it works very well in my side.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Wednesday, September 2, 2015 6:25 AM
    Owner
  • Thank you for your reply!
    Saturday, November 21, 2015 10:40 PM