Search code examples
c#xamlwindows-store-appsmicrosoft-metro

Vertical scroll in list view metro app


I have a list view and I want it to scroll vertically.

I have the following code.

<Grid Grid.Row="0">
                    <StackPanel Orientation="Vertical" VerticalAlignment="Top" Width="300" Margin="4,-27,0,0" HorizontalAlignment="Left">
                        <TextBlock x:Name="lbProbability" Text="Probability" Style="{StaticResource ContentTitleTextBlockStyle1}"/>
                        <StackPanel Orientation="Horizontal" Background="#FF362B61" Width="300"  Height="55" Margin="0,10,0,0" HorizontalAlignment="Left">
                            <AppBarButton Margin="0,-8,0,-10" Width="50" Icon="Favorite" IsCompact="True"/>
                            <!--<AppBarButton x:Name="btnAddActivity1" Margin="0,-10,0,-10" IsCompact="True" Icon="Bullets" Margin="-50,-20,0,-20" Width="70" Height="70"/>-->
                            <!--<Image Source="Assets/add.png" Width="30" Height="30" Margin="10,0,0,0" />-->
                            <TextBlock Text="Obectives" Style="{StaticResource ContentTitleTextBlockStyle1}"  Margin="10,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Width="300" Height="122">
                            <ListView x:Name="lsvObjectives" IsItemClickEnabled="True" SelectionMode="Multiple" CanDragItems="True" AllowDrop="True" ItemsSource="{Binding Source={StaticResource cvs1}}" DragItemsStarting="lsvObjectives_DragItemsStarting" ScrollViewer.VerticalScrollBarVisibility="Visible"  >
                                <ListView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                                    </ItemsPanelTemplate>
                                </ListView.ItemsPanel>
                                <ListView.ItemContainerStyle>
                                    <Style TargetType="ListViewItem">
                                        <Setter Property="Padding" Value="0"/>
                                        <Setter Property="Margin" Value="-7"/>
                                    </Style>
                                </ListView.ItemContainerStyle>
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical" Margin="0,0,0,0" HorizontalAlignment="Center" >
                                            <StackPanel Orientation="Horizontal" Width="310" Height="33" Background="#FFE9D5F0" HorizontalAlignment="Left">
                                                <StackPanel Width="210" VerticalAlignment="Center" Margin="10,5,0,0">
                                                    <TextBlock Text="{Binding Name}" Style="{StaticResource ContentTextBlockStyle}" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                                </StackPanel>
                                                <StackPanel Width="60" Margin="15,0,0,0" VerticalAlignment="Center">
                                                    <TextBlock Text="{Binding Week}" Style="{StaticResource ContentTextBlockStyle}" Foreground="#FFAE1654" />
                                                </StackPanel>
                                            </StackPanel>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </StackPanel>
                </Grid> 

I have binded the values from my cs code. I am unable to scroll vertically the scroller appears but it doesn't function. I cant find my mistake can someone please help me with this.

Any kind of help is appreciated.


Solution

  • It's because your ListView control inside the StackPanel, Remove the StackPanel and that should work, here's the edited code:

    <Grid Grid.Row="0">
                        <StackPanel Orientation="Vertical" VerticalAlignment="Top" Width="300" Margin="4,-27,0,0" HorizontalAlignment="Left">
                            <TextBlock x:Name="lbProbability" Text="Probability" Style="{StaticResource ContentTitleTextBlockStyle1}"/>
                            <StackPanel Orientation="Horizontal" Background="#FF362B61" Width="300"  Height="55" Margin="0,10,0,0" HorizontalAlignment="Left">
                                <AppBarButton Margin="0,-8,0,-10" Width="50" Icon="Favorite" IsCompact="True"/>
                                <!--<AppBarButton x:Name="btnAddActivity1" Margin="0,-10,0,-10" IsCompact="True" Icon="Bullets" Margin="-50,-20,0,-20" Width="70" Height="70"/>-->
                                <!--<Image Source="Assets/add.png" Width="30" Height="30" Margin="10,0,0,0" />-->
                                <TextBlock Text="Obectives" Style="{StaticResource ContentTitleTextBlockStyle1}"  Margin="10,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </StackPanel>
    
                                <ListView Width="300" Height="122" x:Name="lsvObjectives" IsItemClickEnabled="True" SelectionMode="Multiple" CanDragItems="True" AllowDrop="True" ItemsSource="{Binding Source={StaticResource cvs1}}" DragItemsStarting="lsvObjectives_DragItemsStarting" ScrollViewer.VerticalScrollBarVisibility="Visible"  >
                                    <ListView.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                                        </ItemsPanelTemplate>
                                    </ListView.ItemsPanel>
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="Margin" Value="-7"/>
                                        </Style>
                                    </ListView.ItemContainerStyle>
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Vertical" Margin="0,0,0,0" HorizontalAlignment="Center" >
                                                <StackPanel Orientation="Horizontal" Width="310" Height="33" Background="#FFE9D5F0" HorizontalAlignment="Left">
                                                    <StackPanel Width="210" VerticalAlignment="Center" Margin="10,5,0,0">
                                                        <TextBlock Text="{Binding Name}" Style="{StaticResource ContentTextBlockStyle}" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                                    </StackPanel>
                                                    <StackPanel Width="60" Margin="15,0,0,0" VerticalAlignment="Center">
                                                        <TextBlock Text="{Binding Week}" Style="{StaticResource ContentTextBlockStyle}" Foreground="#FFAE1654" />
                                                    </StackPanel>
                                                </StackPanel>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
    
                        </StackPanel>
                    </Grid>