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

                <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. 百度地图api调用

    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&am ...

  2. xml中处理大于小与符号

    原符号   <    <=    >    >=     &      '       " 替换符号 < <= > >= & ...

  3. Linux C--信号 sigaction函数

    使用 sigaction 函数: signal 函数的使用方法简单,但并不属于 POSIX 标准,在各类 UNIX 平台上的实现不尽相同,因此其用途受 到了一定的限制.而 POSIX 标准定义的信号处 ...

  4. C#调用百度地图 api

    转  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377 这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不 ...

  5. Dotnet文件格式解析

    0x0.序 解析过程并没有介绍对pe结构的相关解析过程,网上此类相关资料很多可自行查阅,本文只介绍了网上资料较少的从pe结构的可选头中的数据目录表中获取dotnet目录的rva和size,到完全解析d ...

  6. TCP那些事

    本文是<TCP-IP详解.卷1 协议>的读书笔记 1 TCP简介 TCP提供一种可靠的.面向连接的字节流服务.TCP通过下面的方式来保证服务是可靠的: 应用程序被分隔成TCP认为最适合发送 ...

  7. touch事件中的touches、targetTouches和changedTouches详解

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...

  8. js数组中sort排序注意的地方

    var a=[1,2,3,4,5] function sum(a,b) { return a-b } //从小到大 function obj(a,b) { return b-a } //从大到小 a. ...

  9. find命令

    http://www.jb51.net/os/RedHat/1307.html find 目录(.代表当前目录) -type d -name "..."    f -name &q ...

  10. ACM/ICPC 之 靠墙走-DFS+BFS(POJ3083)

    //POJ3083 //DFS求靠左墙(右墙)走的路径长+BFS求最短路 //Time:0Ms Memory:716K #include<iostream> #include<cst ...