1. ScrollViewer:滚动条容器,当内容超过指定的长度和宽度后,就会出现滚动条,而且可以使用鼠标中键来滚动,
简单例子如下:
<Window x:Class="ConnectScrollViewScrollingDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="" Width="">
<Grid>
<!--the normal control-->
<ScrollViewer>
<StackPanel>
<TextBlock Text=""></TextBlock>
<TextBlock Text=""></TextBlock>
<TextBlock Text=""></TextBlock>
<Label Content=""/>
<Label Content=""/>
<Label Content=""/>
<Label Content=""/>
<UserControl Content=""/>
<UserControl Content=""/>
<UserControl Content=""/>
<UserControl Content=""/>
<UserControl Content=""/>
<Button Content=""/>
<Button Content=""/>
<Button Content=""/>
<Button Content=""/>
<Button Content=""/>
<Rectangle Height="" Fill="Black"/>
<Rectangle Height="" Fill="Black"/>
<Rectangle Height="" Fill="Black"/>
<Rectangle Height="" Fill="Black"/>
<Rectangle Height="" Fill="Black"/>
<Rectangle Height="" Fill="Black"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
当在ScrollViewer中的控件是普通控件时,使用的情况一切正常
2.当ScrollViewer中包含ItemsControl时,因为ItemsControl自身也有滚动的功能,所以在未做任何处理下的例子:
<Window x:Class="ConnectScrollViewScrollingDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="" Width="">
<Grid> <!--with ListBox-->
<ScrollViewer Grid.Column="">
<StackPanel>
<ListBox Background="AliceBlue">
<ListBox.ItemsSource>
<x:Array Type="TextBox">
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
<TextBox Text=""/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
<ListBox Height="" Background="Green">
<ListBox.ItemsSource>
<x:Array Type="Rectangle">
<Rectangle Height="" Fill="Red"/>
<Rectangle Height="" Fill="Red"/>
<Rectangle Height="" Fill="Orange"/>
<Rectangle Height="" Fill="Red"/>
<Rectangle Height="" Fill="Gray"/>
<Rectangle Height="" Fill="Red"/>
<Rectangle Height="" Fill="Red"/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
细心一点,你就会发现,其实仅仅是在ListBox的元素区域中使用鼠标滚轮无效,但在两个ListBox的交界处还是有效果的,所以
我们需要做的,就是讲ListBox的滚动事件与外层的ScrollViewer的滚动关联起来,核心代码如下:
public void UseTheScrollViewerScrolling(FrameworkElement fElement)
{
fElement.PreviewMouseWheel += (sender, e) =>
{
var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
eventArg.RoutedEvent = UIElement.MouseWheelEvent;
eventArg.Source = sender;
fElement.RaiseEvent(eventArg);
};
}
代码中使用了FrameworkElement类型的参数,因为这个方法的作用是让内层的ListBox与外层的ScrollViewer关联起来,但当两者
之间还有别的元素时,这个方法的参数应该传入的是ScrollViewer的直接子元素,而不是深层的ListBox。
完整代码:MainWindow.xaml
<Window x:Class="ConnectScrollViewScrollingDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="900">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--the normal control-->
<ScrollViewer>
<StackPanel>
<TextBlock Text="123"></TextBlock>
<TextBlock Text="123"></TextBlock>
<TextBlock Text="123"></TextBlock>
<Label Content="456"/>
<Label Content="456"/>
<Label Content="456"/>
<Label Content="456"/>
<UserControl Content="789"/>
<UserControl Content="789"/>
<UserControl Content="789"/>
<UserControl Content="789"/>
<UserControl Content="789"/>
<Button Content="010"/>
<Button Content="010"/>
<Button Content="010"/>
<Button Content="010"/>
<Button Content="010"/>
<Rectangle Height="20" Fill="Black"/>
<Rectangle Height="20" Fill="Black"/>
<Rectangle Height="20" Fill="Black"/>
<Rectangle Height="20" Fill="Black"/>
<Rectangle Height="20" Fill="Black"/>
<Rectangle Height="20" Fill="Black"/>
</StackPanel>
</ScrollViewer> <!--with ListBox-->
<ScrollViewer Grid.Column="1">
<StackPanel>
<ListBox Background="AliceBlue">
<ListBox.ItemsSource>
<x:Array Type="TextBox">
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
<ListBox Height="50" Background="Green">
<ListBox.ItemsSource>
<x:Array Type="Rectangle">
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Orange"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Gray"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Red"/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
</StackPanel>
</ScrollViewer> <!--with ListBox and Grid-->
<ScrollViewer Grid.Column="2">
<Grid x:Name="grid">
<StackPanel>
<ListBox Background="AliceBlue">
<ListBox.ItemsSource>
<x:Array Type="TextBox">
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
<TextBox Text="00000"/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
<ListBox Height="50" Background="Green">
<ListBox.ItemsSource>
<x:Array Type="Rectangle">
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Orange"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Gray"/>
<Rectangle Height="20" Fill="Red"/>
<Rectangle Height="20" Fill="Red"/>
</x:Array>
</ListBox.ItemsSource>
</ListBox>
</StackPanel>
</Grid> </ScrollViewer>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; namespace ConnectScrollViewScrollingDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
UseTheScrollViewerScrolling(grid);
} public void UseTheScrollViewerScrolling(FrameworkElement fElement)
{
fElement.PreviewMouseWheel += (sender, e) =>
{
var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
eventArg.RoutedEvent = UIElement.MouseWheelEvent;
eventArg.Source = sender;
fElement.RaiseEvent(eventArg);
};
}
}
}