將滾動條添加到ItemsControl

Question

我有一個很長的列表來自我的業務邏輯，我需要在UI上顯示。由於列表很長，我嘗試添加滾動查看器，但無法滾動。

請看下面

<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中需要高度要設置

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

Answer 2

的XAML代碼把它放進ScrollViewer。

<ScrollViewer> 
     <StackPanel > 

     </StackPanel> 
</ScrollViewer> 

Answer 3

由於@StepUp指出，你可以只用一個ScrollViewer中包裹，但我相信這打破了虛擬化。這當然不在這個問題的範圍內，但應該記住。如果性能可能成爲一個問題，那麼我建議按照the answer to this question所示執行此操作。