Windows 8 Store Apps學習(9) ScrollViewer控制項基礎

介紹

重新想象 Windows 8 Store Apps 之 ScrollViewer

示範 ScrollViewer 的基本應用

示範 ScrollBar 的基本應用

示範 ScrollContentPresenter 的基本應用

樣本

1、 ScrollViewer 的基本應用

ScrollViewer/Demo.xaml

<Page    x:Class="XamlDemo.Controls.ScrollViewer.Demo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.ScrollViewer"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">                            <TextBlock Name="lblMsg" />                <!--                ScrollViewer - 滾動視圖控制項                    Content - 滾動視圖內的內容                    IsDeferredScrollingEnabled - 是否啟用延遲滾動，在滾動內容過多時，啟用延遲混動可以改善效能，預設值為 false                    HorizontalScrollMode - 水平捲軸的行為方式，Windows.UI.Xaml.Controls.ScrollMode枚舉（Disabled, Enabled, Auto）                    VerticalScrollMode - 垂直捲軸的行為方式                    HorizontalScrollBarVisibility - 水平捲軸的可見度，Windows.UI.Xaml.Controls.ScrollBarVisibility枚舉（Disabled, Auto, Hidden, Visible）                    VerticalScrollBarVisibility - 垂直捲軸的可見度                    ViewChanged - 發生滾動時所觸發的事件            -->            <ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="0 10 0 0" HorizontalAlignment="Left"                          IsDeferredScrollingEnabled="False"                          ViewChanged="scrollViewer_ViewChanged_1"                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">                <ScrollViewer.Content>                    <Image Source="/Assets/Logo.png" Width="1000" />                </ScrollViewer.Content>            </ScrollViewer>                            <StackPanel Orientation="Horizontal">                <!--使 ScrollViewer 裡的內容滾動到相對於 ScrollViewer 置中-->                <Button Content="置中" Click="Button_Click_1" />            </StackPanel>                       </StackPanel>    </Grid></Page>

ScrollViewer/Demo.xaml.cs

/* * ScrollViewer - 滾動視圖控制項 *  * 本例用於示範 ScrollViewer 的基本用法 */    using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;    namespace XamlDemo.Controls.ScrollViewer{    public sealed partial class Demo : Page    {        public Demo()        {            this.InitializeComponent();        }            private void scrollViewer_ViewChanged_1(object sender, ScrollViewerViewChangedEventArgs e)        {            lblMsg.Text = "";                /*             * ScrollViewer - 滾動視圖控制項             *     ComputedHorizontalScrollBarVisibility - 當前水平捲軸的可見度，比如當 HorizontalScrollBarVisibility 設定為 Auton 時，可以通過 ComputedHorizontalScrollBarVisibility 來判斷當前水平捲軸是否可見             *     ComputedVerticalScrollBarVisibility - 當前垂直捲軸的可見度             *     ExtentWidth - ScrollViewer 內的內容的寬             *     ExtentHeight - ScrollViewer 內的內容的高             *     ViewportWidth - 可視區的寬             *     ViewportHeight - 可視區的高             *     HorizontalOffset - 滾動內容的水平方向的位移量             *     VerticalOffset - 滾動內容的垂直方向的位移量             *     ScrollableWidth - 可捲動區域的水平方向的大小             *     ScrollableHeight - 可捲動區域的垂直方向的大小             *                  *     ScrollToHorizontalOffset() - 滾動到指定的水平位移位置             *     ScrollToVerticalOffset() - 滾動到指定的垂直位移位置             */                lblMsg.Text += "ComputedHorizontalScrollBarVisibility: " + scrollViewer.ComputedHorizontalScrollBarVisibility;            lblMsg.Text += "\r\n";            lblMsg.Text += "ComputedVerticalScrollBarVisibility: " + scrollViewer.ComputedVerticalScrollBarVisibility;            lblMsg.Text += "\r\n";            lblMsg.Text += "ExtentWidth: " + scrollViewer.ExtentWidth;            lblMsg.Text += "\r\n";            lblMsg.Text += "ExtentHeight: " + scrollViewer.ExtentHeight;            lblMsg.Text += "\r\n";            lblMsg.Text += "ViewportWidth: " + scrollViewer.ViewportWidth;            lblMsg.Text += "\r\n";            lblMsg.Text += "ViewportHeight: " + scrollViewer.ViewportHeight;            lblMsg.Text += "\r\n";            lblMsg.Text += "HorizontalOffset: " + scrollViewer.HorizontalOffset;            lblMsg.Text += "\r\n";            lblMsg.Text += "VerticalOffset: " + scrollViewer.VerticalOffset;            lblMsg.Text += "\r\n";            lblMsg.Text += "ScrollableWidth: " + scrollViewer.ScrollableWidth;            lblMsg.Text += "\r\n";            lblMsg.Text += "ScrollableHeight: " + scrollViewer.ScrollableHeight;            lblMsg.Text += "\r\n";        }            private void Button_Click_1(object sender, RoutedEventArgs e)        {            scrollViewer.ScrollToHorizontalOffset(scrollViewer.ScrollableWidth / 2);            scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight / 2);        }    }}