重新想象 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 :
scrollViewer.HorizontalSnapPointsType = SnapPointsType.None;
break;
case :
scrollViewer.HorizontalSnapPointsType = SnapPointsType.Optional;
break;
case :
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
[源码下载]
重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom的更多相关文章
- 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示
原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...
- 重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础 [源码下载] 重新想象 Windows 8 Store Apps (9) - 控件之 Sc ...
- 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree
原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...
- 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
- 重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding
原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...
- 重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView
原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...
- 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid
原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...
- 重新想象 Windows 8 Store Apps (8) - 控件之 WebView
原文:重新想象 Windows 8 Store Apps (8) - 控件之 WebView [源码下载] 重新想象 Windows 8 Store Apps (8) - 控件之 WebView 作者 ...
随机推荐
- Androidclient推断server是否开启 HttpHostException解决方式
Android推断服务器是否开启,试了非常多方法都不行(若server未开启会卡在HttpResponse那),有人说高版本号的Android程序不同意在主线程中訪问网络(主线程中能够读写网络流)有待 ...
- Swift 编程语言新手教程
今天在网上看到一篇很好的教程,分享给大家 原文地址:http://gashero.iteye.com/blog/2075324 文件夹 1 简单介绍 2 Swift入门 3 简单值 4 ...
- curl订单具体解释
为windows假设用户Cygwin模拟unix环境的话,不会有带curl命令,拥有设备,它建议使用Gow为了模拟,它已经自带curl工具,直接安装之后cmd使用环境curl命令可以,由于路径是自己主 ...
- MongoDB在实际项目
MongoDB在实际项目中的使用 MongoDB简介 MongoDB是近些年来流行起来的NoSql的代表,和传统数据库最大的区别是支持文档型数据库.当然,现在的一些数据库通过自定义复合类型,可变长 ...
- MySQL多表查询之外键、表连接、子查询、索引
MySQL多表查询之外键.表连接.子查询.索引 一.外键: 1.什么是外键 2.外键语法 3.外键的条件 4.添加外键 5.删除外键 1.什么是外键: 主键:是唯一标识一条记录,不能有重复的,不允许为 ...
- 为什么 string.find()返回值是-1
之前好像在哪里见到过这个问题,时间有点久,想不起来了,今天写字符串又碰到这个问题,书上给出的定义是当string.find()没有找到时返回的是一个非常大的值,网上有人说是-1,两种说法都对,由于整数 ...
- 定义自己的布局RelativeLayout
绘制网格线
在Android画线必须由一个载体,无论是控制,无论是布局.实际上它们是从继承View.由画线的方式自己的控制或布局的定义是最常见的. 以下是在其定义中的小样本实现RelativeLayout绘制网络 ...
- git merge,rebase和*(no branch)
上一篇:http://blog.csdn.net/xiaoputao0903/article/details/23933589,说了git的分支,相关的使用方法没说到可是仅仅要google就能搜出一大 ...
- Java使用Socket传输文件遇到的问题
1.写了一个socket传输文件的程序,发现传输过去文件有问题.找了一下午终于似乎找到了原因,记录下来警示一下: 接受文件的一端,向本地写文件之前使用Thread.sleep(time)休息一下就解决 ...
- zoj1610(线段树)
题目连接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1610 题意:在0-8000长的线段里面,按先后次序依次覆盖颜色, ...