重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

原文: 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

[源码下载]

重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

作者：webabcd


介绍
重新想象 Windows 8 Store Apps 之 ScrollViewer

• Chaining - 锁链
• Rail - 轨道
• Inertia - 惯性
• Snap - 对齐
• Zoom - 缩放

示例
1、演示 ScrollViewer 的 Chaining 特性
ScrollViewer/Chaining.xaml

<Page

    x:Class="XamlDemo.Controls.ScrollViewer.Chaining"

    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>

                <StackPanel>



                    <TextBlock Text="我是参照物" FontSize="14.667" />



                    <!--

                        Chaining: 锁链，在触摸模式下，滚动本 ScrollViewer 如果超出了边界，则滚动其父 ScrollViewer

                            本例的测试方法：在触摸模式下，滚动 ScrollViewer 内的内容直至超出边界，超出边界后不要停下来继续滚动，通过“我是参照物”观察父 ScrollViewer 是否也被滚动

                    

                        IsHorizontalScrollChainingEnabled - 是否启用水平方向上的 Chaining，默认值为 true

                        IsVerticalScrollChainingEnabled - 是否启用垂直方向上的 Chaining，默认值为 true

                    -->

                    

                    <ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="0 10 0 0" HorizontalAlignment="Left" 

                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"

                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"

                          IsHorizontalScrollChainingEnabled="{Binding IsChecked, ElementName=chkIsHorizontalScrollChainingEnabled}"

                          IsVerticalScrollChainingEnabled="{Binding IsChecked, ElementName=chkIsVerticalScrollChainingEnabled}">

                        <Image Source="/Assets/Logo.png" Width="1000" />

                    </ScrollViewer>



                    <StackPanel Orientation="Horizontal">

                        <CheckBox Name="chkIsHorizontalScrollChainingEnabled" Content="IsHorizontalScrollChainingEnabled" IsChecked="True" Margin="10 0 0 0" />

                        <CheckBox Name="chkIsVerticalScrollChainingEnabled" Content="IsVerticalScrollChainingEnabled" IsChecked="True" Margin="10 0 0 0" />

                    </StackPanel>



                </StackPanel>

            </ScrollViewer>



        </StackPanel>

    </Grid>

</Page>

2、演示 ScrollViewer 的 Rail 特性
ScrollViewer/Rail.xaml

<Page

    x:Class="XamlDemo.Controls.ScrollViewer.Rail"

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



            <!--

                Rail: 轨道，在触摸模式下，假设沿水平方向滚动，则由于轨道的作用，在松手前只能延水平方向滚动（即使手指有垂直方向的滚动也无用）

                

                IsHorizontalRailEnabled - 是否启用水平方向上的轨道，默认值为 true

                IsVerticalRailEnabled - 是否启用垂直方向上的轨道，默认值为 true

            -->

            

            <ScrollViewer Name="scrollViewer2" Width="400" Height="400" Margin="0 10 0 0" HorizontalAlignment="Left"

                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"

                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"

                          IsHorizontalRailEnabled="{Binding IsChecked, ElementName=chkIsHorizontalRailEnabled}" 

                          IsVerticalRailEnabled="{Binding IsChecked, ElementName=chkIsVerticalRailEnabled}">

                <Image Source="/Assets/Logo.png" Width="1000" />

            </ScrollViewer>



            <StackPanel Orientation="Horizontal">

                <CheckBox Name="chkIsHorizontalRailEnabled" Content="IsHorizontalRailEnabled" IsChecked="True" />

                <CheckBox Name="chkIsVerticalRailEnabled" Content="IsVerticalRailEnabled" IsChecked="True" Margin="10 0 0 0" />

            </StackPanel>



        </StackPanel>

    </Grid>

</Page>

3、演示 ScrollViewer 的 Inertia 特性
ScrollViewer/Inertia.xaml

<Page

    x:Class="XamlDemo.Controls.ScrollViewer.Inertia"

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



            <!--

                Inertia: 惯性，在触摸模式下，用一个加速度滚动内容，松手后内容会具有惯性滚动效果

                

                IsScrollInertiaEnabled - 是否启用惯性效果，默认值为 true

            -->



            <ScrollViewer Name="scrollViewer2" Width="400" Height="400" Margin="0 10 0 0" HorizontalAlignment="Left"

                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"

                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"

                          IsScrollInertiaEnabled="{Binding IsChecked, ElementName=chkIsScrollInertiaEnabled}">

                <Image Source="/Assets/Logo.png" Width="1000" />

            </ScrollViewer>



            <StackPanel Orientation="Horizontal">

                <CheckBox Name="chkIsScrollInertiaEnabled" Content="IsScrollInertiaEnabled" IsChecked="True" />

            </StackPanel>



        </StackPanel>

    </Grid>

</Page>

4、演示 ScrollViewer 的 Snap 特性
ScrollViewer/Snap.xaml

<Page

    x:Class="XamlDemo.Controls.ScrollViewer.Snap"

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

            <ComboBox Name="comboBox" SelectedIndex="0" SelectionChanged="ComboBox_SelectionChanged_1" HorizontalAlignment="Left">

                <ComboBoxItem>HorizontalSnapPointsType = SnapPointsType.None</ComboBoxItem>

                <ComboBoxItem>HorizontalSnapPointsType = SnapPointsType.Optional</ComboBoxItem>

                <ComboBoxItem>HorizontalSnapPointsType = SnapPointsType.Mandatory</ComboBoxItem>

            </ComboBox>



            <ScrollViewer x:Name="scrollViewer" Width="400" Height="200" HorizontalAlignment="Left" Margin="0 10 0 0"

                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"

                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">

                <StackPanel Orientation="Horizontal">

                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/Logo.png" />

                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/NineGrid/Demo.png" />

                    <Image Width="350" Height="200" Stretch="Fill" Source="/Assets/Logo.png" />

                    <Image Width="450" Height="200" Stretch="Fill" Source="/Assets/NineGrid/Demo.png" />

                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/Logo.png" />



                    <TextBox Width="400" Height="200" FontSize="26.67" Text="message" Name="txtMsg"  />

                    <TextBox Width="400" Height="200" FontSize="26.67" Text="message2" Name="txtMsg2"  />

                    <TextBox Width="400" Height="200" FontSize="26.67" Text="message3" Name="txtMsg3"  />

                </StackPanel>

            </ScrollViewer>



            <!--用于演示通过程序定位到 ScrollViewer 内的指定元素-->

            <Button Content="滚动到 txtMsg2" Click="Button_Click_1" Margin="0 10 0 0" />



        </StackPanel>

    </Grid>

</Page>

ScrollViewer/Snap.xaml.cs

/*

 * Snap: 对齐，在触摸模式下，如果 ScrollViewer 有多个元素，在滚动结束后会定位到其中某一个具体的元素，这就叫对齐

 * 

 * HorizontalSnapPointsType - 水平方向上的对齐行为，Windows.UI.Xaml.Controls.SnapPointsType枚举

 *     SnapPointsType.None - 不需要对齐，默认值

 *     SnapPointsType.Optional - 看情况，如果离某个元素很近则对齐此元素

 *     SnapPointsType.Mandatory - 强制对齐，必须对齐到某一元素

 *     SnapPointsType.OptionalSingle - 仅对 Zoom 对齐有用

 *     SnapPointsType.MandatorySingle - 仅对 Zoom 对齐有用

 * VerticalSnapPointsType - 垂直方向上的对齐行为

 * 

 * 

 * HorizontalSnapPointsAlignment - 水平方向上的对齐方式，Windows.UI.Xaml.Controls.Primitives.SnapPointsAlignment枚举

 *     SnapPointsAlignment.Near - 元素的左侧对齐 ScrollViewer 的左侧边界，默认值

 *     SnapPointsAlignment.Center - 元素的中心点对齐 ScrollViewer 的中心点

 *     SnapPointsAlignment.Far - 元素的右侧对齐 ScrollViewer 的右侧边界

 * VerticalSnapPointsAlignment - 垂直方向上的对齐方式

 * 

 * 

 * BringIntoViewOnFocusChange - ScrollViewer 内的某元素获得焦点后，是否需要定位到此元素，默认值为 true

 */



using Windows.UI.Xaml.Controls;



namespace XamlDemo.Controls.ScrollViewer

{

    public sealed partial class Snap : Page

    {

        public Snap()

        {

            this.InitializeComponent();



            this.Loaded += Snap_Loaded;

        }



        void Snap_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)

        {  

            scrollViewer.HorizontalSnapPointsAlignment = Windows.UI.Xaml.Controls.Primitives.SnapPointsAlignment.Near;

            scrollViewer.BringIntoViewOnFocusChange = true;

        }



        private void ComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

        {

            if (scrollViewer != null && comboBox != null)

            {

                switch (comboBox.SelectedIndex)

                {

                    case 0:

                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;

                        break;

                    case 1: 

                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.Optional;

                        break;

                    case 3:

                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.Mandatory;

                        break;

                    default:

                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;

                        break;

                }

            }

        }



        private void Button_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e)

        {

            // 当 BringIntoViewOnFocusChange 为 true 时，如果 txtMsg2 获得焦点，则 ScrollViewer 会自动滚动到 txtMsg2

            txtMsg2.Focus(Windows.UI.Xaml.FocusState.Programmatic);

        }

    }

}

5、演示 ScrollViewer 的 Zoom 特性
ScrollViewer/Zoom.xaml

<Page

    x:Class="XamlDemo.Controls.ScrollViewer.Zoom"

    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:sys="using:System"

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



            <!--

                Zoom - 放大/缩小

            

                ZoomMode - 是否启用“放大/缩小”功能（Disabled, Enabled），默认值为 Enabled

                MaxZoomFactor - 内容放大的最大倍数，默认值 10

                MinZoomFactor - 内容放大的最小倍数，默认值 0.1

            -->

            <ScrollViewer Name="scrollViewer" Width="400" Height="400" HorizontalAlignment="Left" 

                          ZoomMode="Enabled" MaxZoomFactor="2" MinZoomFactor="0.5">

                <Image Source="/Assets/Logo.png" Width="400" Height="400" />

            </ScrollViewer>

            

            <Button Click="Button_Click_1" Content="放大/缩小到 0.1 倍" />



        </StackPanel>

    </Grid>

</Page>

ScrollViewer/Zoom.xaml.cs

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;



namespace XamlDemo.Controls.ScrollViewer

{

    public sealed partial class Zoom : Page

    {

        public Zoom()

        {

            this.InitializeComponent();



            this.Loaded += Zoom_Loaded;

        }



        void Zoom_Loaded(object sender, RoutedEventArgs e)

        {

            /*

             * ZoomSnapPoints - “放大/缩小”的对齐点的集合，默认是空的

             * 

             * ZoomSnapPointsType - “放大/缩小”的对齐行为

             *     SnapPointsType.None - 不需要对齐，默认值

             *     SnapPointsType.Optional - 看情况，如果离某个对齐点很近则对齐

             *     SnapPointsType.Mandatory - 强制对齐，必须对齐到某一个对齐点

             *     SnapPointsType.OptionalSingle - 同 Optional，但不能跳过对齐点

             *     SnapPointsType.MandatorySingle - 同 Mandatory，但不能跳过对齐点

             *     

             * IsZoomChainingEnabled - 是否启用 Zoom 的 Chaining

             * IsZoomInertiaEnabled - 是否启用 Zoom 的 Inertia

             * ZoomFactor - 获取当前的 Zoom 的倍数

             * 

             * ZoomToFactor() - Zoom 到指定的倍数

             */



            scrollViewer.ZoomSnapPointsType = SnapPointsType.OptionalSingle;



            scrollViewer.ZoomSnapPoints.Add(0.5f);

            scrollViewer.ZoomSnapPoints.Add(0.8f);

            scrollViewer.ZoomSnapPoints.Add(1.0f);

            scrollViewer.ZoomSnapPoints.Add(1.5f);

            scrollViewer.ZoomSnapPoints.Add(2.0f);

        }



        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            scrollViewer.ZoomToFactor(0.1f);

        }

    }

}

OK
[源码下载]