看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能

                <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的更多相关文章

  1. Win10 UI入门窗口由默认500px to 320px

    https://code.msdn.microsoft.com/Layout-for-windows-that-ba648e1c/ https://msdn.microsoft.com/library ...

  2. Win10 UI入门 圆形控件

    动态模版绑定 http://blog.csdn.net/XXChen2/article/details/4552554

  3. Win10 UI入门RelativePanel(2)

    自适应 1) Gif: 添加动画 2)

  4. Win10 UI入门 RenderTransform属性分析之Translate 平移变形

    对齐方式是中心底部对齐: HorizontalAlignment="Center" VerticalAlignment="Bottom" 以底部边为起始线,向上 ...

  5. Win10 UI入门RelativePanel

    <RelativePanel Background="Black" > <Rectangle x:Name=" RelativePanel.AlignH ...

  6. Win10 UI入门 pivot multiable DataTemplate

    this is a dynamic pivot with sliderable navigation and multiableDatatemplate Control 看了 alexis 大哥的pi ...

  7. Win10 UI入门 导航滑动条 求UWP工作

    借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView  itemsWr ...

  8. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  9. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

随机推荐

  1. Jmeter插件监控服务器性能

    处理利用jmeter实施监控压测时受压机的各项性能 操作步骤: 施压机上的jmeter/lib/ext中放入下载的插件包 jmeter-plugins-perfmon-2.1.jar 受压机上放入Se ...

  2. ubuntu下非root用户下获得使用wireshark的权限

    在非root用户下不能使用wireshark用来抓包,所以需要进行以下操作: sudo groupadd wireshark sudo chgrp wireshark /usr/bin/dumpcap ...

  3. matlab下二重积分的蒙特卡洛算法

    %%monte_carlo_ff.m %被积函数(二重) function ff=monte_carlo_ff(x,y) ff=x*y^2;%函数定义处 end %%monte_carlo.m %蒙特 ...

  4. wamp 局域网访问

    1.关闭防火墙 2.设置apache 的httpd.conf 第278行 正确代码如下 # onlineoffline tag - don't remove Require all granted O ...

  5. linux 卸载编译安装的软件

    有些软件会有 make uninstall 之类的功能,但大多都没有,所以只有手动删除,或者在configure的时候加个preifx参数,比如 --preifx=/opt/squid,这样当你不用的 ...

  6. Axure RP动态面板操作

    参考资料: 动态面板实现banner的轮播效果

  7. 执行mvn 报错 source-1.5 中不支持 diamond运算符

    编译版本出现了问题 <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> < ...

  8. Spring Boot 乐观锁加锁失败 - 集成AOP

    Spring Boot with AOP 手头上的项目使用了Spring Boot, 在高并发的情况下,经常出现乐观锁加锁失败的情况(OptimisticLockingFailureException ...

  9. UnixBench-linux下的跑分软件

    UnixBench是一款开源的测试 unix 系统基本性能的工具,是比较通用的测试VPS性能的工具.UnixBench会执行一系列的测试,包括2D和3D图形系统的性能,测试的结果不仅仅是CPU,内存, ...

  10. client offset screen 的区别

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...