Silverlight 4 正确设置 ScrollViewer让它更好的支持鼠标滚轮

先看一段Xaml代码：

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer>
        <StackPanel Name="stackPanel1">
            <Button Content="Button 1" Width="150" />
            <Button Content="Button 2" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 3" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 4" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 5" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 6" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 7" Width="150" Margin="0,20,0,0" />
        </StackPanel>
    </ScrollViewer>
</Grid>

 

运行后会发现混动鼠标滚轮时，页面不能正常滚动，只有在“Button 1”等按钮文字上面，滚轮才生效。

 

解决方法：

增加ScrollViewer Background="Transparent"属性

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer  Background="Transparent">
        <StackPanel Name="stackPanel1">
            <Button Content="Button 1" Width="150" />
            <Button Content="Button 2" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 3" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 4" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 5" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 6" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 7" Width="150" Margin="0,20,0,0" />
        </StackPanel>
    </ScrollViewer>
</Grid>

 

鼠标在在ScrollViewer 元素内任意位置，滚动滚轮，一切正常！

问题解决！