Windows Phone 8.1中ScrollViewer（一）

標籤：windows phone 8.1   extentwidth和extendhe   viewportwidth和viewpo   scrollablewidth和hori   scrollviewer和changev   

開篇之前：

推薦王磊老師的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);        }    }}

運行：

初始：

左滑：

點擊按鈕讓其置中：

Windows Phone 8.1中ScrollViewer（一）