将滚动条添加到 ItemsControl

Question

我有一长串来自我的业务逻辑的列表，我需要在 UI 上显示。由于列表很长，我尝试添加 Scrollviewer 但无法滚动。

请在下面找到 XAML 代码

<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>

Answer 1

将其放入 ScrollViewer.

<ScrollViewer>
        <StackPanel >

        </StackPanel>
</ScrollViewer>

Answer 2

正如@StepUp 指出的那样，您可以用 ScrollViewer 包装它，但我相信这会破坏虚拟化。这当然超出了这个问题的范围，但要记住这一点。如果性能可能成为一个问题，那么我建议按照 the answer to this question.

中所示的方式实现它

Answer 3

滚动查看器需要设置高度

<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>

将滚动条添加到 ItemsControl

Adding Scrollbar to ItemsControl

data-binding

wpf

xa