Win10 UI入门 SliderRectangle
看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能
<Grid x:Name="SliderGrid" Grid.ColumnSpan="" Grid.Row="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="LeftContentPresenter"
HorizontalAlignment="Center" Tapped="LeftContentPresenter_Tapped"
VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="" FontSize="" Margin="0,0,0,10"/>
<Rectangle x:Name="LeftRectStateName" Fill="Red" Height=""
HorizontalAlignment="Stretch" Grid.Row="">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</ContentPresenter>
<ContentPresenter x:Name="RightContentPresenter"
Grid.Column=""
Tapped="RightContentPresenter_Tapped"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="" FontSize="" Margin="0,0,0,10"/>
<Rectangle x:Name="RightRectStateName" Fill="Red" Height="" Opacity=""
HorizontalAlignment="Stretch" Grid.Row="">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</ContentPresenter>
</Grid>
private Rectangle rect_old; // 上一次选中的 Rectangle
private Rectangle rect_current;// 当前选中的 Rectangle
private Storyboard tempStoryboard;
private void RightContentPresenter_Tapped(object sender, TappedRoutedEventArgs e)
{
rect_current = VisualTreeUtil.FindChildOfType<Rectangle>(RightContentPresenter) as Rectangle;
rect_old = VisualTreeUtil.FindChildOfType<Rectangle>(LeftContentPresenter) as Rectangle; var new_rect = ElementUtil.GetBounds(rect_current, SliderGrid);
var old_rect = ElementUtil.GetBounds(rect_old, SliderGrid);
tempStoryboard = StoryBordImg(old_rect, new_rect, LeftContentPresenter, RightContentPresenter); tempStoryboard.Completed += (s1, e1) =>
{
RightContentPresenter.IsHitTestVisible = false;
LeftContentPresenter.IsHitTestVisible = true;
rect_current.Opacity = ;
rect_old.Opacity = ;
tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog();
dialog.ShowAsync("");
};
}
private void LeftContentPresenter_Tapped(object sender, TappedRoutedEventArgs e)
{
rect_current = VisualTreeUtil.FindChildOfType<Rectangle>(LeftContentPresenter) as Rectangle;
rect_old= VisualTreeUtil.FindChildOfType<Rectangle>(RightContentPresenter) as Rectangle; var new_rect = ElementUtil.GetBounds(rect_current, SliderGrid);
var old_rect = ElementUtil.GetBounds(rect_old, SliderGrid);
tempStoryboard = StoryBordImg(old_rect, new_rect, RightContentPresenter, LeftContentPresenter); tempStoryboard.Completed += (s1, e1) =>
{
LeftContentPresenter.IsHitTestVisible = false;
RightContentPresenter.IsHitTestVisible = true;
rect_current.Opacity = ;
rect_old.Opacity = ;
tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog();
dialog.ShowAsync("");
};
} private Storyboard StoryBordImg(Rect oldR,Rect newR,ContentPresenter oldP,ContentPresenter newP)
{
var sb = new Storyboard();
if (rect_old != null && rect_current != null)
{
var anim = new DoubleAnimationUsingKeyFrames();
Storyboard.SetTarget(anim, rect_old);
Storyboard.SetTargetProperty(anim, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)"); EasingDoubleKeyFrame KeyFrame = new EasingDoubleKeyFrame();
KeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds());
KeyFrame.Value = ; EasingDoubleKeyFrame KeyFrame2 = new EasingDoubleKeyFrame();
KeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds());
KeyFrame2.Value = ; QuarticEase easing = new QuarticEase();
easing.EasingMode = EasingMode.EaseOut;
easing.Ease(0.3);
KeyFrame2.EasingFunction = easing; anim.KeyFrames.Add(KeyFrame);
anim.KeyFrames.Add(KeyFrame2);
anim.KeyFrames[].Value = newR.X - oldR.X; var anim2 = new DoubleAnimation();
anim2.To = rect_current.ActualWidth / oldR.Width;
System.Diagnostics.Debug.WriteLine("x :" + rect_current.ActualWidth / rect_old.ActualWidth);
anim2.Duration = TimeSpan.FromMilliseconds();
Storyboard.SetTarget(anim2, rect_old);
Storyboard.SetTargetProperty(anim2, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)"); sb.Children.Add(anim);
sb.Children.Add(anim2);
sb.Begin();
}
return sb;
}
本文可以封装城一个独立的控件使用在自己的项目中
欢迎大家访问我的个人博客:https://androllen.github.io/
https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/ee230084
https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/ee330302
https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/system.windows.visualstategroup.transitions
Win10 UI入门 SliderRectangle的更多相关文章
- Win10 UI入门窗口由默认500px to 320px
https://code.msdn.microsoft.com/Layout-for-windows-that-ba648e1c/ https://msdn.microsoft.com/library ...
- Win10 UI入门 圆形控件
动态模版绑定 http://blog.csdn.net/XXChen2/article/details/4552554
- Win10 UI入门RelativePanel(2)
自适应 1) Gif: 添加动画 2)
- Win10 UI入门 RenderTransform属性分析之Translate 平移变形
对齐方式是中心底部对齐: HorizontalAlignment="Center" VerticalAlignment="Bottom" 以底部边为起始线,向上 ...
- Win10 UI入门RelativePanel
<RelativePanel Background="Black" > <Rectangle x:Name=" RelativePanel.AlignH ...
- Win10 UI入门 pivot multiable DataTemplate
this is a dynamic pivot with sliderable navigation and multiableDatatemplate Control 看了 alexis 大哥的pi ...
- Win10 UI入门 导航滑动条 求UWP工作
借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView itemsWr ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
随机推荐
- 百度地图api调用
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&am ...
- xml中处理大于小与符号
原符号 < <= > >= & ' " 替换符号 < <= > >= & ...
- Linux C--信号 sigaction函数
使用 sigaction 函数: signal 函数的使用方法简单,但并不属于 POSIX 标准,在各类 UNIX 平台上的实现不尽相同,因此其用途受 到了一定的限制.而 POSIX 标准定义的信号处 ...
- C#调用百度地图 api
转 http://blog.csdn.net/kkkkkxiaofei/article/details/8663377 这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不 ...
- Dotnet文件格式解析
0x0.序 解析过程并没有介绍对pe结构的相关解析过程,网上此类相关资料很多可自行查阅,本文只介绍了网上资料较少的从pe结构的可选头中的数据目录表中获取dotnet目录的rva和size,到完全解析d ...
- TCP那些事
本文是<TCP-IP详解.卷1 协议>的读书笔记 1 TCP简介 TCP提供一种可靠的.面向连接的字节流服务.TCP通过下面的方式来保证服务是可靠的: 应用程序被分隔成TCP认为最适合发送 ...
- touch事件中的touches、targetTouches和changedTouches详解
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...
- js数组中sort排序注意的地方
var a=[1,2,3,4,5] function sum(a,b) { return a-b } //从小到大 function obj(a,b) { return b-a } //从大到小 a. ...
- find命令
http://www.jb51.net/os/RedHat/1307.html find 目录(.代表当前目录) -type d -name "..." f -name &q ...
- ACM/ICPC 之 靠墙走-DFS+BFS(POJ3083)
//POJ3083 //DFS求靠左墙(右墙)走的路径长+BFS求最短路 //Time:0Ms Memory:716K #include<iostream> #include<cst ...