背水一戰 Windows 10 (46) - 控件（ScrollViewer 基礎）: ScrollViewer, ScrollBar, ScrollContentPresenter

[源碼下載]

背水一戰 Windows 10 (46) - 控件（ScrollViewer 基礎）: ScrollViewer, ScrollBar, ScrollContentPresenter

作者：webabcd


介紹
背水一戰 Windows 10 之 控件（ScrollViewer 基礎）

• ScrollViewer
• ScrollBar
• ScrollContentPresenter

示例
1、ScrollViewer 的基本應用
Controls/ScrollViewerDemo/ScrollViewerDemo.xaml

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.ScrollViewerDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
    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="10 0 10 10">

            <StackPanel Orientation="Horizontal" Margin="5">
                <!--
                    ScrollViewer - 滾動視圖控件
                        Content - 滾動視圖內的內容（[ContentProperty(Name = "Content")]）
                        IsDeferredScrollingEnabled - 是否啟用延遲滾動，在滾動內容過多時，啟用延遲混動可以改善性能，默認值為 false
                        HorizontalScrollMode - 水平滾動模式
                            Disabled - 禁用
                            Enabled - 啟用
                            Auto - 同 Enabled
                        VerticalScrollMode - 垂直滾動模式
                            Disabled - 禁用
                            Enabled - 啟用
                            Auto - 同 Enabled
                        HorizontalScrollBarVisibility - 水平滾動條的可見性
                            Auto - 自動。內容顯示得下就隱藏滾動條，內容顯示不下就顯示滾動條
                            Visible - 顯示滾動條
                            Hidden - 隱藏滾動條
                            Disabled - 隱藏滾動條，並將 HorizontalScrollMode 強制設置為 Disabled
                        VerticalScrollBarVisibility - 垂直滾動條的可見性
                            Auto - 自動。內容顯示得下就隱藏滾動條，內容顯示不下就顯示滾動條
                            Visible - 顯示滾動條
                            Hidden - 隱藏滾動條
                            Disabled - 隱藏滾動條，並將 VerticalScrollMode 強制設置為 Disabled
            
                        ViewChanging - 在視圖即將發生變化（滾動或縮放等）時觸發的事件
                        ViewChanged - 在視圖已經發生變化（滾動或縮放等）后觸發的事件
                        DirectManipulationStarted - 觸摸環境下操作（滾動或縮放等）即將開始時觸發的事件
                        DirectManipulationCompleted - 觸摸環境下操作（滾動或縮放等）已經完成后觸發的事件
                -->
                <ScrollViewer Name="scrollViewer" Width="400" Height="400" HorizontalAlignment="Left"
                              IsDeferredScrollingEnabled="False"
                              HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                              HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                              
                              ViewChanging="scrollViewer_ViewChanging"
                              ViewChanged="scrollViewer_ViewChanged"
                              DirectManipulationStarted="scrollViewer_DirectManipulationStarted"
                              DirectManipulationCompleted="scrollViewer_DirectManipulationCompleted">
                    <ScrollViewer.Content>
                        <Image Source="/Assets/StoreLogo.png" Width="1000" Margin="5" />
                    </ScrollViewer.Content>
                </ScrollViewer>

                <!--
                    ScrollViewer - 滾動視圖控件
                        TopHeader - 顯示在上端的內容，垂直滾動時不動
                        LeftHeader - 顯示在左端的內容，水平滾動時不動
                        TopLeftHeader - 顯示在左上端的內容，垂直滾動和水平滾動時均不動
                
                        注：如果要使用 TopHeader, LeftHeader, TopLeftHeader 則 ScrollViewer.Content 中的內容必須是 HorizontalAlignment="Left" VerticalAlignment="Top"
                -->
                <ScrollViewer Width="400" Height="400" HorizontalAlignment="Left" Margin="20 0 0 0" 
                              HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                              HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                    <ScrollViewer.Content>
                        <Image Source="/Assets/StoreLogo.png" Width="1000" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" />
                    </ScrollViewer.Content>
                    <ScrollViewer.TopHeader>
                        <TextBlock Text="TopHeader" />
                    </ScrollViewer.TopHeader>
                    <ScrollViewer.LeftHeader>
                        <TextBlock Text="LeftHeader" />
                    </ScrollViewer.LeftHeader>
                    <ScrollViewer.TopLeftHeader>
                        <TextBlock Text="TopLeftHeader" />
                    </ScrollViewer.TopLeftHeader>
                </ScrollViewer>
            </StackPanel>

            <!--使 ScrollViewer 里的內容滾動到相對於 ScrollViewer 居中的位置-->
            <Button Name="btnChangeView" Content="居中" Margin="5" Click="btnChangeView_Click" />

            <TextBlock Name="lblMsg" Margin="5" />

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

Controls/ScrollViewerDemo/ScrollViewerDemo.xaml.cs

/*
 * ScrollViewer - 滾動視圖控件（繼承自 ContentControl, 請參見 /Controls/BaseControl/ContentControlDemo/）
 *     ComputedHorizontalScrollBarVisibility - 當前水平滾動條的可見性（Visible, Collapsed）
 *     ComputedVerticalScrollBarVisibility - 當前垂直滾動條的可見性（Visible, Collapsed）
 *     ExtentWidth - ScrollViewer 內的內容的寬
 *     ExtentHeight - ScrollViewer 內的內容的高
 *     ViewportWidth - 可視區的寬
 *     ViewportHeight - 可視區的高
 *     HorizontalOffset - 滾動內容的水平方向的偏移量
 *     VerticalOffset - 滾動內容的垂直方向的偏移量
 *     ScrollableWidth - 水平滾動區域的大小（即 HorizontalOffset 的最大值，也就是 ExtentWidth - ViewportWidth）
 *     ScrollableHeight - 垂直滾動區域的大小（即 VerticalOffset 的最大值，也就是 ExtentHeight - ViewportHeight）
 *     
 *     bool ChangeView(double? horizontalOffset, double? verticalOffset, float? zoomFactor, bool disableAnimation) - 改變內容的顯示
 *         用於取代如下這些已經棄用的方法 ScrollToHorizontalOffset(double offset), ScrollToVerticalOffset(double offset), ZoomToFactor(float factor)
 *         
 *     另外還有一堆對應的附加屬性和靜態方法，內嵌 ScrollViewer 的控件一般均支持，不再詳述。簡單示例可參見：/Controls/CollectionControl/ListViewBaseDemo/ListViewBaseDemo1.xaml
 * 
 * 
 * 本例用於演示 ScrollViewer 的基本用法
 */

using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.ScrollViewerDemo
{
    public sealed partial class ScrollViewerDemo : Page
    {
        public ScrollViewerDemo()
        {
            this.InitializeComponent();
        }

        private void scrollViewer_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
        {
            Debug.WriteLine("scrollViewer_ViewChanging");
        }

        private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
        {
            Debug.WriteLine("scrollViewer_ViewChanged");

            lblMsg.Text = "ComputedHorizontalScrollBarVisibility: " + scrollViewer.ComputedHorizontalScrollBarVisibility;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ComputedVerticalScrollBarVisibility: " + scrollViewer.ComputedVerticalScrollBarVisibility;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ExtentWidth: " + scrollViewer.ExtentWidth;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ExtentHeight: " + scrollViewer.ExtentHeight;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ViewportWidth: " + scrollViewer.ViewportWidth;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ViewportHeight: " + scrollViewer.ViewportHeight;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "HorizontalOffset: " + scrollViewer.HorizontalOffset;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "VerticalOffset: " + scrollViewer.VerticalOffset;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ScrollableWidth: " + scrollViewer.ScrollableWidth;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ScrollableHeight: " + scrollViewer.ScrollableHeight;
            lblMsg.Text += Environment.NewLine;

            // 在操作中返回 true, 操作結束返回 false
            lblMsg.Text += "ScrollViewerViewChangedEventArgs.IsIntermediate: " + e.IsIntermediate;
        }

        private void scrollViewer_DirectManipulationCompleted(object sender, object e)
        {
            Debug.WriteLine("scrollViewer_DirectManipulationCompleted");
        }

        private void scrollViewer_DirectManipulationStarted(object sender, object e)
        {
            Debug.WriteLine("scrollViewer_DirectManipulationStarted");
        }

        private void btnChangeView_Click(object sender, RoutedEventArgs e)
        {
            scrollViewer.ChangeView(scrollViewer.ScrollableWidth / 2, scrollViewer.ScrollableHeight / 2, null, false);
        }
    }
}

2、ScrollBar 的示例
Controls/ScrollViewerDemo/ScrollBarDemo.xaml

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.ScrollBarDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
    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="10 0 10 10">

            <ScrollViewer Name="scrollViewer" Width="400" Height="200" Margin="5" HorizontalAlignment="Left">
                <Image Source="/Assets/StoreLogo.png" Width="1000" />
            </ScrollViewer>

            <TextBlock Name="lblMsg" Margin="5" />
            
        </StackPanel>
    </Grid>
</Page>

Controls/ScrollViewerDemo/ScrollBarDemo.xaml.cs

/*
 * ScrollBar - 滾動條控件（繼承自 RangeBase, 請參見 /Controls/ProgressControl/RangeBaseDemo.xaml）
 * 
 * 本例通過訪問 ScrollViewer 內的名為 VerticalScrollBar 的 ScrollBar 控件，來簡要說明 ScrollBar 控件
 */

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

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

            this.Loaded += ScrollBarDemo_Loaded;
        }

        private 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 的示例
Controls/ScrollViewerDemo/ScrollContentPresenterDemo.xaml

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.ScrollContentPresenterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ScrollViewerDemo"
    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="10 0 10 10">

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

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

Controls/ScrollViewerDemo/ScrollContentPresenterDemo.xaml.cs

/*
 * ScrollContentPresenter - ScrollViewer 的內容呈現器，其用來呈現 ScrollViewer 的 Content（繼承自 ContentPresenter, 請參見 /Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml）
 *     類似的有 ContentPresenter, ItemsPresenter 等
 */

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows10.Common;

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

            this.Loaded += ScrollContentPresenterDemo_Loaded;
        }

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

            scrollContentPresenter.BorderBrush = new SolidColorBrush(Colors.Red);
            scrollContentPresenter.BorderThickness = new Thickness(4);
        }
    }
}

OK
[源碼下載]