原文:重新想象 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

<Pagex: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，默認值為 trueIsVerticalScrollChainingEnabled - 是否啟用垂直方向上的 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

<Pagex: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 - 是否啟用水平方向上的軌道，默認值為 trueIsVerticalRailEnabled - 是否啟用垂直方向上的軌道，默認值為 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

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

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

<Pagex: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），默認值為 EnabledMaxZoomFactor - 內容放大的最大倍數，默認值 10MinZoomFactor - 內容放大的最小倍數，默認值 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
[源碼下載]

總結

以上是生活随笔為你收集整理的重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。