Adding Scrollbar to ItemsControl

Question

I have a long list coming from my Business logic which I need to display on the UI. As the list is long, I tried adding Scrollviewer but I am unable to scroll.

please find the XAML code below

<Grid Margin="0,32,0,0">
                                                <TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
                                                <Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
                                                    <Button.Background>
                                                        <ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
                                                    </Button.Background>
                                                </Button>
                                            </Grid>
                                            <TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
                                            <StackPanel  Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
                                                <ScrollViewer VerticalScrollBarVisibility="Auto">
                                                    <ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
                                                        <ItemsControl.ItemTemplate>


                                                            <DataTemplate>

                                                                <StackPanel Margin="0,32,0,0">

                                                                    <Grid>
                                                                        <Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
                                                                        <TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
                                                                        <TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
                                                                    </Grid>
                                                                    <TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />

                                                                </StackPanel>

                                                            </DataTemplate>
                                                        </ItemsControl.ItemTemplate>

                                                    </ItemsControl>
                                                </ScrollViewer>
                                            </StackPanel>

StepUp · Answer 1 · 2016-03-15T08:37:03.477

0

Put it into a ScrollViewer.

<ScrollViewer>
        <StackPanel >

        </StackPanel>
</ScrollViewer>

edited Mar 15 '16 at 08:37

answered Mar 15 '16 at 07:51

StepUp

36,391
15
88
148

@Apoorv feel free to ask any question. If you feel that my reply helps to you, you can mark my reply as an answer or answer of Mark Feldman. It will simplify the future search of other people. Please, see it http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – StepUp Mar 16 '16 at 06:19

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

As @StepUp points out you can just wrap it with a ScrollViewer but I believe this breaks virtualization. That's outside the scope of this question of course but it's something to keep in mind. If performance is likely to become an issue then I'd suggest implementing this as shown in the answer to this question.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 15 '16 at 11:10

Mark Feldman

15,731
3
31
58

score 0 · Accepted Answer · answered Apr 05 '16 at 10:13

The scrollviewer needed a Height to be set

<Grid Margin="0,32,0,0">
                                                <TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
                                                <Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
                                                    <Button.Background>
                                                        <ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
                                                    </Button.Background>
                                                </Button>
                                            </Grid>
                                            <TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
                                            <StackPanel  Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
                                                <ScrollViewer VerticalScrollBarVisibility="Auto" Height="350">
                                                    <ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
                                                        <ItemsControl.ItemTemplate>


                                                            <DataTemplate>

                                                                <StackPanel Margin="0,32,0,0">

                                                                    <Grid>
                                                                        <Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
                                                                        <TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
                                                                        <TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
                                                                    </Grid>
                                                                    <TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />

                                                                </StackPanel>

                                                            </DataTemplate>
                                                        </ItemsControl.ItemTemplate>

                                                    </ItemsControl>
                                                </ScrollViewer>
                                            </StackPanel>

Adding Scrollbar to ItemsControl

3 Answers3