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

原文: 重新想象 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
[源码下载]