posts - 455, comments - 9781, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

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

Posted on 2013-03-11 08:38 webabcd 阅读(...) 评论(...) 编辑 收藏

[源码下载]


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