重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基礎

[源碼下載]

重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基礎

作者：webabcd


介紹
重新想象 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);
        }
    }
}

2、ScrollBar 的基本應用
ScrollViewer/ScrollBarDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ScrollViewer.ScrollBarDemo"
    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" FontSize="14.667" HorizontalAlignment="Left" />
            <ScrollViewer Name="scrollViewer" Width="400" Height="200" HorizontalAlignment="Left">
                <Image Source="/Assets/Logo.png" Width="1000" />
            </ScrollViewer>
            
        </StackPanel>
    </Grid>
</Page>

ScrollViewer/ScrollBarDemo.xaml.cs

/*
 * ScrollBar - 滾動條控件
 * 
 * 本例通過訪問 ScrollViewer 內的名為 VerticalScrollBar 的 ScrollBar 控件，來簡要說明 ScrollBar 控件
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using XamlDemo.Common;

namespace XamlDemo.Controls.ScrollViewer
{
    public sealed partial class ScrollBarDemo : Page
    {
        public ScrollBarDemo()
        {
            this.InitializeComponent();

            this.Loaded += ScrollBarDemo_Loaded;
        }

        void ScrollBarDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 找到 ScrollViewer 內的名為 VerticalScrollBar 的 ScrollBar 控件，即 ScrollViewer 內的垂直滾動條
            var scrollBar = Helper.GetVisualChild<ScrollBar>(scrollViewer, "VerticalScrollBar");
            // ValueChanged - 當滾動條的值發生改變是所觸發的事件
            scrollBar.ValueChanged += scrollBar_ValueChanged;
        }

        void scrollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            // 顯示垂直滾動條的當前值
            lblMsg.Text = e.NewValue.ToString();
        }
    }
}

3、ScrollContentPresenter 的基本應用
ScrollViewer/ScrollContentPresenterDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ScrollViewer.ScrollContentPresenterDemo"
    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">

            <ScrollViewer Name="scrollViewer" Width="400" Height="400" Background="Blue" HorizontalAlignment="Left"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                <ScrollViewer.Content>
                    <Image Source="/Assets/Logo.png" Width="1000" />
                </ScrollViewer.Content>
            </ScrollViewer>

        </StackPanel>
    </Grid>
</Page>

ScrollViewer/ScrollContentPresenterDemo.xaml.cs

/*
 * ScrollContentPresenter - ScrollViewer 的內容呈現器（類似的有 ContentPresenter, ItemsPresenter）
 * 
 * ScrollContentPresenter 用來呈現 ScrollViewer 的 Content
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using XamlDemo.Common;

namespace XamlDemo.Controls.ScrollViewer
{
    public sealed partial class ScrollContentPresenterDemo : Page
    {
        public ScrollContentPresenterDemo()
        {
            this.InitializeComponent();

            this.Loaded += ScrollContentPresenterDemo_Loaded;
        }

        void ScrollContentPresenterDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 找到 ScrollViewer 內的名為 ScrollContentPresenter 的 ScrollContentPresenter 控件
            var scrollContentPresenter = Helper.GetVisualChild<ScrollContentPresenter>(scrollViewer, "ScrollContentPresenter");
            
            scrollContentPresenter.Margin = new Thickness(100);
        }
    }
}

OK
[源碼下載]