首页 > 代码库 > Win10 UI入门 SliderRectangle

Win10 UI入门 SliderRectangle

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

技术分享

                <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 = http://www.mamicode.com/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;        }

本文可以封装城一个独立的控件使用在自己的项目中

欢迎大家访问我的个人博客:http://achinesepainter.com/

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