<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>

/* * 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);        }    }}

<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>

/* * 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();        }    }}

<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>

/* * 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);        }    }}