開篇之前：
推薦王磊老師的Windows 8.1關于ScrollViewer的講解的部落格
連結：重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基礎
ScrollViewer的作用就是當内容超出了設定的範圍的時候，出現滾動條用來滾動檢視超出的内容
要想在ScrollViewer裡面寫東西，OK，你可以直接寫個<TextBlock>标簽，但是當寫第二個<TextBlock>的時候就會報
錯了，說是多次設定Content值
是以要用布局控件Grid，StackPanel之類的标簽直接寫
綜上，你可以：
<ScrollViewer> <Grid> .......</Grid> </ScrollView>
也可以：
<ScrollViewer> <ScrollViewer.Content> <Grid>.........</Grid> </ScrollViewer.Content> </ScrollViewer>
第一種寫法預設就已經添加到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);
}
}
}
運作截圖：
初始：
左滑：
點選按鈕讓其居中：