滚动视图ScrollViewer

25-Windows10应用控件-滚动视图ScrollViewer

滚动视图 ScrollViewer 是一个可以水平滚动或者垂直滚动的视图容器，这个容器通常包含其他的可视化元素，可以通过滚动的方式进行浏览查看。

有时候应用程序中展示的内容会超过设备屏幕的范围，比如一个很长的表单，就可以使用 ScrollViewer 控件滚动的方式来展示出来。

语法

<ScrollViewer.../>Code language: HTML, XML (xml)

或者

<ScrollViewer...>内容</ScrollViewer>Code language: HTML, XML (xml)

ScrollViewer 控件是针对大内容控件的布局控件。

由于该控件内仅支持一个子控件，所以多数情况下，ScrollViewer 控件都会和 StackPanel、Canvas 及 Grid 相互配合使用。如果遇到内容较长的子控件，ScrollViewer 就会产生滚动条。

配置 ScrollViewer 控件的是 HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 属性分别控制垂直和水平的 ScrollBar 控件出现的条件，用于设置 ScrollViewer 控件是水平滚动还是垂直滚动。

此外 HorizontalOffset 和 VerticalOffset 分别表示滚动内容的水平偏移量和垂直偏移量，通常用于判断当前滚动条的位置。

ScrollableHeight 和 ScrollableWidth 属性分别表示 ScrollViewer 控件可滚动区域的垂直大小的值和水平大小的值。ViewportHeight 和 ViewportWidth 属性分别表示控件包含可见内容的垂直大小值和水平大小的值。一般情况下，可滚动区域的大小会比可见内容的大小要大，否则滚动的意义就不大了。

练一练

显示一副图片，图片外面使用 ScrollViewer 控件：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer
        Height="400"
        Width="400"
        VerticalScrollBarVisibility="Auto"
        HorizontalScrollBarVisibility="Auto">
        <Image
            x:Name="image"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Source="Assets/d439b6003af33a87b47bc335cc5c10385343b58f.jpg"
            Height="491"
            Width="458"/>
    </ScrollViewer>
</Grid>Code language: HTML, XML (xml)