看了@段博琼大哥导航滑动的思路，，自己又做了一个类似与黄油相机里面的一个功能
<Grid x:Name="SliderGrid" Grid.ColumnSpan="2" Grid.Row="7"> <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="1111111111" FontSize="20" Margin="0,0,0,10"/> <Rectangle x:Name="LeftRectStateName" Fill="Red" Height="2" HorizontalAlignment="Stretch" Grid.Row="1"> <Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform> </Rectangle> </Grid> </ContentPresenter> <ContentPresenter x:Name="RightContentPresenter" Grid.Column="1" Tapped="RightContentPresenter_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Text="2222222222" FontSize="20" Margin="0,0,0,10"/> <Rectangle x:Name="RightRectStateName" Fill="Red" Height="2" Opacity="0" HorizontalAlignment="Stretch" Grid.Row="1"> <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 = 1; rect_old.Opacity = 0; tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog(); dialog.ShowAsync("222"); }; } 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 = 1; rect_old.Opacity = 0; tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog(); dialog.ShowAsync("111"); }; } 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(0)); KeyFrame.Value = 0; EasingDoubleKeyFrame KeyFrame2 = new EasingDoubleKeyFrame(); KeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(350)); KeyFrame2.Value = 600; 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[1].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(100); 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://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