Win10 UI入门 SliderRectangle

Posted 2020-08-24 androllen

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

                <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://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