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 应用程序.无论您是创 ...
随机推荐
- Jmeter插件监控服务器性能
处理利用jmeter实施监控压测时受压机的各项性能 操作步骤: 施压机上的jmeter/lib/ext中放入下载的插件包 jmeter-plugins-perfmon-2.1.jar 受压机上放入Se ...
- ubuntu下非root用户下获得使用wireshark的权限
在非root用户下不能使用wireshark用来抓包,所以需要进行以下操作: sudo groupadd wireshark sudo chgrp wireshark /usr/bin/dumpcap ...
- matlab下二重积分的蒙特卡洛算法
%%monte_carlo_ff.m %被积函数(二重) function ff=monte_carlo_ff(x,y) ff=x*y^2;%函数定义处 end %%monte_carlo.m %蒙特 ...
- wamp 局域网访问
1.关闭防火墙 2.设置apache 的httpd.conf 第278行 正确代码如下 # onlineoffline tag - don't remove Require all granted O ...
- linux 卸载编译安装的软件
有些软件会有 make uninstall 之类的功能,但大多都没有,所以只有手动删除,或者在configure的时候加个preifx参数,比如 --preifx=/opt/squid,这样当你不用的 ...
- Axure RP动态面板操作
参考资料: 动态面板实现banner的轮播效果
- 执行mvn 报错 source-1.5 中不支持 diamond运算符
编译版本出现了问题 <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> < ...
- Spring Boot 乐观锁加锁失败 - 集成AOP
Spring Boot with AOP 手头上的项目使用了Spring Boot, 在高并发的情况下,经常出现乐观锁加锁失败的情况(OptimisticLockingFailureException ...
- UnixBench-linux下的跑分软件
UnixBench是一款开源的测试 unix 系统基本性能的工具,是比较通用的测试VPS性能的工具.UnixBench会执行一系列的测试,包括2D和3D图形系统的性能,测试的结果不仅仅是CPU,内存, ...
- client offset screen 的区别
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...