重新想象 Windows 8 Store Apps (10)

zj2092

　　[源码下载]




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






















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

















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
















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








HorizontalSnapPointsType = SnapPointsType.None
HorizontalSnapPointsType = SnapPointsType.Optional
HorizontalSnapPointsType = SnapPointsType.Mandatory


















　　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














　　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
[源码下载]