背水一戰 Windows 10 (47) - 控制項（ScrollViewer 特性）: Chaining, Rail, Inertia, Snap, Zoom

背水一戰 Windows 10 之控制項（ScrollViewer 特性）: Chaining - 鎖鏈, Rail - 軌道, Inertia - 慣性, Snap - 對齊, Zoom - 縮放 ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（ScrollViewer 特性）

Chaining - 鎖鏈
Rail - 軌道
Inertia - 慣性
Snap - 對齊
Zoom - 縮放

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

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.Chaining"
    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 HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled">
                <StackPanel>

                    <CheckBox Name="chkIsHorizontalScrollChainingEnabled" Content="IsHorizontalScrollChainingEnabled" IsChecked="True" Margin="5" />
                    <CheckBox Name="chkIsVerticalScrollChainingEnabled" Content="IsVerticalScrollChainingEnabled" IsChecked="True" Margin="5" />

                    <TextBlock Text="我是參照物" Margin="5" />
                    
                    <!--
                        Chaining: 鎖鏈，在觸摸模式下，滾動本 ScrollViewer 如果超出了邊界，則滾動其父 ScrollViewer
                            本例的測試方法：在觸摸模式下，滾動 ScrollViewer 內的內容直至超出邊界，超出邊界後不要停下來繼續滾動，通過“我是參照物”觀察父 ScrollViewer 是否也被滾動
                    
                        IsHorizontalScrollChainingEnabled - 是否啟用水平方向上的 Chaining，預設值為 true
                        IsVerticalScrollChainingEnabled - 是否啟用垂直方向上的 Chaining，預設值為 true
                    -->

                    <ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="5" HorizontalAlignment="Left" 
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          IsHorizontalScrollChainingEnabled="{Binding IsChecked, ElementName=chkIsHorizontalScrollChainingEnabled}"
                          IsVerticalScrollChainingEnabled="{Binding IsChecked, ElementName=chkIsVerticalScrollChainingEnabled}">
                        <Image Source="/Assets/StoreLogo.png" Width="1000" />
                    </ScrollViewer>

                </StackPanel>
            </ScrollViewer>

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

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

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.Rail"
    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">

            <CheckBox Name="chkIsHorizontalRailEnabled" Content="IsHorizontalRailEnabled" IsChecked="True" Margin="5" />
            <CheckBox Name="chkIsVerticalRailEnabled" Content="IsVerticalRailEnabled" IsChecked="True" Margin="5" />
            
            <!--
                Rail: 軌道，在觸摸模式下，假設沿水平方向滾動，則由於軌道的作用，在鬆手前只能延水平方向滾動（即使手指有垂直方向的滾動也無用）
                
                IsHorizontalRailEnabled - 是否啟用水平方向上的軌道，預設值為 true
                IsVerticalRailEnabled - 是否啟用垂直方向上的軌道，預設值為 true
            -->

            <ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="5" HorizontalAlignment="Left"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          IsHorizontalRailEnabled="{Binding IsChecked, ElementName=chkIsHorizontalRailEnabled}" 
                          IsVerticalRailEnabled="{Binding IsChecked, ElementName=chkIsVerticalRailEnabled}">
                <Image Source="/Assets/StoreLogo.png" Width="1000" />
            </ScrollViewer>

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

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

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.Inertia"
    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">

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

            <!--
                Inertia: 慣性，在觸摸模式下，用一個加速度滾動內容，鬆手後內容會具有慣性滾動效果
                
                IsScrollInertiaEnabled - 是否啟用慣性效果，預設值為 true
            -->

            <ScrollViewer Name="scrollViewer" Width="400" Height="400" Margin="5" HorizontalAlignment="Left"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          IsScrollInertiaEnabled="{Binding IsChecked, ElementName=chkIsScrollInertiaEnabled}">
                <Image Source="/Assets/StoreLogo.png" Width="1000" />
            </ScrollViewer>

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

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

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.Snap"
    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 的 HorizontalSnapPointsType-->
            <ComboBox Name="comboBox" SelectedIndex="0" SelectionChanged="comboBox_SelectionChanged" HorizontalAlignment="Left" Margin="5">
                <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="5"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                <StackPanel Orientation="Horizontal">
                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/StoreLogo.png" />
                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/StoreLogo.png" />
                    <Image Width="350" Height="200" Stretch="Fill" Source="/Assets/StoreLogo.png" />
                    <Image Width="450" Height="200" Stretch="Fill" Source="/Assets/StoreLogo.png" />
                    <Image Width="400" Height="200" Stretch="Fill" Source="/Assets/StoreLogo.png" />

                    <TextBox Width="400" Height="200" FontSize="24" Text="message1" Name="txtMsg1"  />
                    <TextBox Width="400" Height="200" FontSize="24" Text="message2" Name="txtMsg2"  />
                    <TextBox Width="400" Height="200" FontSize="24" Text="message3" Name="txtMsg3"  />
                </StackPanel>
            </ScrollViewer>

            <!--用於演示通過程式定位到 ScrollViewer 內的指定元素-->
            <Button Name="btnScroll" Content="滾動到 txtMsg2" Click="btnScroll_Click" Margin="5" />

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

Controls/ScrollViewerDemo/Snap.xaml.cs

/*
 * Snap: 對齊，在觸摸模式下，如果 ScrollViewer 有多個元素，在滾動結束後會定位到其中某一個具體的元素，這就叫對齊
 * 
 * HorizontalSnapPointsType - 水平方向上的對齊行為，Windows.UI.Xaml.Controls.SnapPointsType枚舉
 *     SnapPointsType.None - 不需要對齊，預設值
 *     SnapPointsType.Optional - 看情況，如果離某個元素很近則對齊此元素
 *     SnapPointsType.Mandatory - 強制對齊，必須對齊到某一元素
 *     SnapPointsType.OptionalSingle - 僅對 Zoom 對齊有用（參看 /Controls/ScrollViewerDemo/Zoom.xaml）
 *     SnapPointsType.MandatorySingle - 僅對 Zoom 對齊有用（參看 /Controls/ScrollViewerDemo/Zoom.xaml）
 * 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 Windows10.Controls.ScrollViewerDemo
{
    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(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 2:
                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.Mandatory;
                        break;
                    default:
                        scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;
                        break;
                }
            }
        }

        private void btnScroll_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // 當 BringIntoViewOnFocusChange 為 true 時，如果 txtMsg2 獲得焦點，則 ScrollViewer 會自動滾動到 txtMsg2
            txtMsg2.Focus(Windows.UI.Xaml.FocusState.Programmatic);
        }
    }
}

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

<Page
    x:Class="Windows10.Controls.ScrollViewerDemo.Zoom"
    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">

            <Button Name="bntZoom" Click="bntZoom_Click" Content="放大/縮小到 0.5 倍" Margin="5" />
            
            <!--
                Zoom - 放大/縮小
            
                ZoomMode - 是否啟用“放大/縮小”功能（Disabled, Enabled），預設值為 Enabled
                MaxZoomFactor - 內容放大的最大倍數，預設值 10
                MinZoomFactor - 內容放大的最小倍數，預設值 0.1
            -->
            
            <ScrollViewer Name="scrollViewer" Width="400" Height="400" HorizontalAlignment="Left" Margin="5"
                          ZoomMode="Enabled" MaxZoomFactor="2" MinZoomFactor="0.5">
                <Image Source="/Assets/StoreLogo.png" Width="400" Height="400" />
            </ScrollViewer>

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

Controls/ScrollViewerDemo/Zoom.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

            this.Loaded += Zoom_Loaded;
        }

        private 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 bntZoom_Click(object sender, RoutedEventArgs e)
        {
            scrollViewer.ChangeView(null, null, 0.5f);
        }
    }
}

OK
[源碼下載]