Windows Phone 8.1中ScrollViewer（一）

来源：互联网发布：中国m1m2数据走势图编辑：程序博客网时间：2024/06/05 14:53

开篇之前：

推荐王磊老师的Windows 8.1关于ScrollViewer的讲解的博客

链接：重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础

ScrollViewer的作用就是当内容超出了设定的范围的时候，出现滚动条用来滚动查看超出的内容

要想在ScrollViewer里面写东西，OK，你可以直接写个<TextBlock>标签，但是当写第二个<TextBlock>的时候就会报

错了，说是多次设置Content值

所以要用布局控件Grid，StackPanel之类的标签直接写

综上，你可以：

也可以：

第一种写法默认就已经添加到Content里面了。Content里面就是ScrollViewer的内容了。

首先，ScrollViewer重要的属性和方法

a.HorizontalScrollMode 和 VerticalScrollMode 属性

用来设置水平和垂直滚动条的行为方式，即是否可以滚动。值有三种选项(Enalbled,Disabled,Auto)

b.HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 属性

用来设置水平和垂直滚动条是否可见。值为True或者False

c.ViewChanged 方法

表示滚动触发的事件

有了ViewChanged方法，然后我们可以在后台随时监控前台ScrollViewer的行动了

怎么监视呢？如下：ScrollViewer的另一些重要属性

a.ComputedHorizontalScrollBarVisibility 和 ComputedVerticalScrollBarVisibility

判断水平和垂直滚动条的可见性

b.ExtentWidth 和 ExtentHeight

判断ScrollViewer内的内容的宽和高，如我下面代码中设置的宽和高都是500

e.ViewportWidth 和 ViewportHeight

判断可视区的宽和高

f.ScrollableWidth 和 ScrollableHeight

判断可滚动区域的水平和垂直方向的大小，你会发现它的是就是拿（ExtentWidth - ViewportWidth）和

（ ExtentHeight - ViewportHeight ）的结果。可以从我下面的结果中看到ScrollabelWidth一直是100

g.HorizontalOffset 和 VerticalOffset

判断滚动内容的水平和垂直方向的偏移量，它的范围就是【0，f】,f 就指的是上面 f 代表的值

方法：

我们也可以动态指定ScrollViewer滚动到哪里

Windows 8.1中是用ScrollToHorizontalOffset()和ScrollToVerticalOffset()这两个方法，当然仍然可以在Windows

Phone 8.1中使用，但是方法已经过期了

最新的WP8.1中类似功能的方法是ChangeView()方法，参数就是上面两个值，最后一个是zoomfactor，默认为1即可

好了，理论我就学了这么多，下面直接贴代码了：

这里由于空间有限，我就主要写了水平滚动条的，垂直滚动条跟它是一样一样的

XAML：

<Page    x:Class="TestUnion.ScrollViewerTest"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestUnion"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="50*"/>            <RowDefinition Height="50*"/>        </Grid.RowDefinitions>        <ScrollViewer x:Name="scrollViewer" IsDeferredScrollingEnabled="True"                      HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"                      HorizontalScrollBarVisibility="Visible"                      VerticalScrollBarVisibility="Visible"                      ViewChanged="scrollViewer_ViewChanged">            <ScrollViewer.Content>                <StackPanel Height="500" Width="500">                    <StackPanel.Background>                        <ImageBrush ImageSource="Assets/3.jpg" />                    </StackPanel.Background>                    <TextBox Header="用户名：" />                    <PasswordBox Header="密码：" />                    <PasswordBox Header="确认密码："/>                    <Button x:Name="btn" Content="滚动到指定的水平或垂直偏移位置(这里选居中)" Click="btn_Click"/>                </StackPanel>            </ScrollViewer.Content>        </ScrollViewer>        <StackPanel Grid.Row="1" Orientation="Vertical">            <StackPanel Orientation="Horizontal">                <TextBox x:Name="horVisibility" PlaceholderText="判断水平滚动条可见性" Header="ComputedHorizontalScrollBarVisibility" Width="300" Margin="10,10,0,0" />            </StackPanel>            <StackPanel Orientation="Horizontal">                <TextBox x:Name="verVisibility" PlaceholderText="判断垂直滚动条可见性" Header="ComputedVerticalScrollBarVisibility" Width="300" Margin="10,10,0,0" />            </StackPanel>            <StackPanel Orientation="Horizontal">                <!--这边当然也存在-->                <!--ExtentHeight-ScrollViewer内的内容的高-->                <!--ViewportHeight-可视区的高-->                <TextBox x:Name="extentWidth" PlaceholderText="ScrollViewer内的内容的宽" Header="ExtentWidth" Width="255" Margin="10,10,0,0" />                <TextBox x:Name="viewportWidth" PlaceholderText="可视区的宽" Header="ViewportWidth " Width="120" Margin="10,10,0,0" />            </StackPanel>            <StackPanel Orientation="Horizontal">                <!--这边当然也存在-->                <!--VerticalOffset-滚动内容的垂直方向的偏移量-->                <!--ScrollableHeight-可滚动区域的垂直方向的大小-->                <TextBox x:Name="horizontalOffset" PlaceholderText="滚动内容水平偏移量" Header="HorizontalOffset" Width="195" Margin="10,10,0,0" />                <TextBox x:Name="scrollableWidth" PlaceholderText="可滚动区域水平大小" Header="ScrollableWidth" Width="195" Margin="10,10,0,0" />            </StackPanel>        </StackPanel>    </Grid></Page>

.cs：

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.InteropServices.WindowsRuntime;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Data;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Navigation;// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍namespace TestUnion{    /// <summary>    /// 可用于自身或导航至 Frame 内部的空白页。    /// </summary>    public sealed partial class ScrollViewerTest : Page    {        public ScrollViewerTest()        {            this.InitializeComponent();        }        /// <summary>        /// 在此页将要在 Frame 中显示时进行调用。        /// </summary>        /// <param name="e">描述如何访问此页的事件数据。        /// 此参数通常用于配置页。</param>        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }        private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)        {            //ComputedHorizontalScrollBarVisibility - 当前水平滚动条的可见性            horVisibility.Text = scrollViewer.ComputedHorizontalScrollBarVisibility.ToString();            //ComputedVerticalScrollBarVisibility - 当前垂直滚动条的可见性            verVisibility.Text = scrollViewer.ComputedVerticalScrollBarVisibility.ToString();            //ExtentWidth - ScrollViewer 内的内容的宽            extentWidth.Text = scrollViewer.ExtentWidth.ToString();            //ViewportWidth - 可视区的宽            viewportWidth.Text = scrollViewer.ViewportWidth.ToString();            //HorizontalOffset - 滚动内容的水平方向的偏移量            horizontalOffset.Text = scrollViewer.HorizontalOffset.ToString();            //ScrollableWidth - 可滚动区域的水平方向的大小            scrollableWidth.Text = scrollViewer.ScrollableWidth.ToString();        }        private void btn_Click(object sender, RoutedEventArgs e)        {            //让ScrollView里面的内容居中            scrollViewer.ChangeView(scrollViewer.ScrollableWidth / 2, scrollViewer.ScrollableHeight / 2,1);            //这边ScrollToHorizontalOffset()和ScrollToVerticalOffset()函数已经过期了(但是仍然是可以用的)，现在改用上面的ChangeView()函数            //ChangeView()函数第一个和第二个参数分别是水平滚动的偏移量和垂直滚动的偏移量，第三个是zoomfactor，默认值是1,好像是关于缩放的，这里设为1就行了            //scrollViewer.ScrollToHorizontalOffset(scrollViewer.ScrollableWidth / 2);            //scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight / 2);        }    }}

运行截图：

初始：

左滑：

点击按钮让其居中：

0 0