Windows10(uwp)开发中的侧滑
还是在持续的开发一款Windows10的应用中,除了上篇博客讲讲我在Windows10(uwp)开发中遇到的一些坑,其实还有很多不完善的地方,比如(UIElement.Foreground).(GradientBrush.GradientStops)[1].(GradientStop.Offset)这种设置无法生效,还有RelativePanel内的元素不能自动的适应大小,要去手动控制宽高度,以及窗口在靠边的时候一些尺寸上的错误等等。虽然是WPF技术之后的延续,但是很多地方还是要小心仔细的处理,很多开发上的注意力也是在考虑如何解决以及如何更好的解决这些问题。
在开发的过程中其实也写了一些控件,比如自定义的文本框(TextBlock已经变成了密封类),下拉刷新以及加载更多的ListView.比较简单,而且功能上比较完善的可以拿出来用的目前大概只有一个侧滑.当然,它依然有一个致命的缺陷,这个稍后再表.
侧滑应该是一个比较简单的东西,配合Manipulation一系列的事件,获取偏移量以及偏移速度就能轻松实现.当然,这套api和其他平台比,真的还是有很多的限制的.微软在底层吃掉了过多的事件,希望能更加开放点.
看下演示视频:
http://v.youku.com/v_show/id_XMTMyNTAxMDQ2MA==.html?from=y1.7-1.2
先来说下界面上的布局.
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Green" x:Name="DismissLayout" Tapped="DismissLayout_Tapped" Visibility="Collapsed" Grid.Column="0"/>
<Rectangle Fill="Red" Grid.Column="1" ManipulationCompleted="ManipulationCompleted" x:Name="ManipulationLayout"
ManipulationDelta="ManipulationDelta"
ManipulationMode="TranslateX">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Grid Background="White" HorizontalAlignment="Right" Margin="0,0,-300,0" Width="300"
x:Name="Panel"
ManipulationCompleted="ManipulationCompleted"
ManipulationDelta="ManipulationDelta"
ManipulationMode="TranslateX">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ListBox Name="listbox" Background="Yellow">
<ListBoxItem Content="123"/>
...
<ListBoxItem Content="123"/>
</ListBox>
</Grid>
</Grid>
界面上的布局大概是这样的:Grid的右侧是一个20像素的Rectangle,用来接收从侧边进入的手势.然后在Grid之外,是我们需要划入的Panel,然后DismissLayout是用来接收我们在我们滑动区域之外的内容,可以在我们点击的时候,隐藏掉我们的Panel.
后台的代码
public MainPage()
{
this.InitializeComponent();
//如果是其他的带有滚动的控件,要禁用滚动,手机版才能使用。PC版无影响
ScrollViewer.SetVerticalScrollMode(listbox, ScrollMode.Disabled);
} private new void ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
var x = e.Velocities.Linear.X;
if (x <= -0.1)
{
OpenPanel();
}
else if (x > -0.1 && x < 0.1)
{
if (Math.Abs((Panel.RenderTransform as CompositeTransform).TranslateX) > )
{
OpenPanel();
}
else
{
ClosePanel();
} }
else
{
ClosePanel();
}
} private new void ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var x = (Panel.RenderTransform as CompositeTransform).TranslateX + e.Delta.Translation.X;
if (x < -)
{
x = -;
}
(Panel.RenderTransform as CompositeTransform).TranslateX = x;
(ManipulationLayout.RenderTransform as CompositeTransform).TranslateX = x;
} private void DismissLayout_Tapped(object sender, TappedRoutedEventArgs e)
{
ClosePanel();
} private void OpenPanel()
{
OpenView.Begin();
DismissLayout.Visibility = Visibility.Visible;
} private void ClosePanel()
{
CloseView.Begin();
DismissLayout.Visibility = Visibility.Collapsed;
}
后台的代码只是处理各种情况下的偏移量,其中在构造函数内禁用了滚动,这就是这个侧滑控件致命的地方,Panel里面如果存在ListView或者ListBox之类的控件的时候,它的手势事件会被吃掉.奇怪的是手机端是会被吃掉,但是PC端不会.希望手机版在正式版的时候,也可以像PC版一样操作.
为了比较好的显示效果,也可以加入一些动画.
<Storyboard x:Name="OpenView">
<DoubleAnimation Duration="0:0:0.2" To="-300" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ManipulationLayout" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.2" To="-300" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Panel" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="CloseView">
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ManipulationLayout" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Panel" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
只要Panel里不是什么ListView之类的控件,可以直接放入代码中使用.
实际的使用效果:
http://v.youku.com/v_show/id_XMTMyNTAxMDkyOA==.html
源码下载:http://files.cnblogs.com/files/youngytj/SwipeView.zip
Windows10(uwp)开发中的侧滑的更多相关文章
- 讲讲我在Windows10(uwp)开发中遇到的一些坑.
7月29日发布的Windows10正式版,当天安装好以后,在网络不太好的情况下,经过多次尝试终于装上了Visual Studio 2015和Windows 10 10240的SDK.这两周一直在开发U ...
- Windows10 UWP开发 - 响应式设计
Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...
- UWP开发中的方向传感器
在UWP开发中,我们能使用的到方向有三种: OrientationSensor下的四元数:Compass罗盘的HeadingMagneticNorth:以及SimpleOrientationSenso ...
- Viewbox在UWP开发中的应用
Windows 8.1 与Windows Phone 8.1的UAP应用,终于在Windows 10上统一到了UWP之下.原来3个不同的project也变为一个.没有了2套xaml页面,我们需要用同一 ...
- Win10 UWP开发中的重复性静态UI绘制小技巧 2
小技巧1 地址:http://www.cnblogs.com/ms-uap/p/4641419.html 介绍 我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制,使得U ...
- Win10 UWP开发中的重复性静态UI绘制小技巧 1
介绍 在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态的界面设计.比如:画许多等距的线条,画一圈时钟型的刻度线,同特别的策略排布元素,等等. 读者可能觉得这些需求十分简单, ...
- UWP开发中两种网络图片缓存方法
通常情况下,我们的程序需要从服务器读取图片,但如果需要不止一次读取某一张图片的话,就需要做本地缓存了,这样既为用户省一点流量,又能显得你的APP很快. 假如你已经知道了某一张图片的地址,那么第一件事就 ...
- 随记:UWP开发中怎么使当前页面拓展到标题栏
public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); CoreAp ...
- UWP开发中的流媒体
写这篇的目的只是为了记住这个东西, win10原生支持HLS了 AdaptiveMediaSourceCreationResult amsResult = await AdaptiveMediaSou ...
随机推荐
- 0_Simple__simpleMPI
MPI 的简单使用 ▶ 源代码.主机根结点生成随机数组,发布副本到各结点(例子用孩子使用了一个结点),分别使用 GPU 求平方根并求和,然后根结点使用 MPI 回收各节点的计算结果,规约求和后除以数组 ...
- 我对if(!this.IsPostBack)的理解
if(!this.IsPostBack) { } 通常用在page_load中,获取一个值,该值指示该页是否正为响应客户端回发而加载,或者它是否正被首次加载和访问,如果是为响应客户端回发而加载该页,则 ...
- ios 确定文字所占矩形框大小
labelFrame.size = [self.label.text sizeWithFont:self.label.font constrainedToSize:CGSizeMake(self.la ...
- Java web struct入门基础知识
1.Struts2的前身是Opensymphony的Webwork2,实际上Strut和Webwork2合并后形成Struts2. 2.一个HelloWord示例 1)创建Web应用,所需要的Ja ...
- Process子类
创建新的进程还能够使用类的方式,可以自定义一个类,继承Process类,每次实例化这个类的时候,就等同于实例化一个进程对象,请看下面的实例: from multiprocessing import P ...
- python Count类(转)
1.collections模块 collections模块自Python 2.4版本开始被引入,包含了dict.set.list.tuple以外的一些特殊的容器类型,分别是: OrderedDict类 ...
- How to create a Virtual Machine in SmartOS
在SmartOS中,使用vmadm创建工具创建虚拟机. 此工具需要一个JSON有效负载,并使用输入JSON中指定的属性创建“kvm”或“joyent” brand zone. 正常输出是一系列单行JS ...
- ubuntu修改运行级别方法
Ubuntu系统设置启动级别的问题,因自己以前遇到过,故做过笔记记录了下来:Ubuntu.Debian系列与RedHat.CentOS启动级别含义有所区别:Ubuntu系列运行级别定义如下:0 – H ...
- dom node 查找父级parentNode
var o = document.querySelectorAll("a[href='baidu.com']"); var p = o[o.length-1];console.lo ...
- 根据数组下标在MongoDB中修改数组元素
如下图这样的数据: 即文档中某个字段是一个数组,而每个数组元素又是一个对象,现在需求是对每个对象中的content字段值作情感分析后,把情感分析得到的结果增加到这个对象中去. 如上图中第1个元素,修改 ...