WPF过渡面板

Posted 2021-10-24 dotNET跨平台

 WPF开发者QQ群： 340500857  | 微信群 -> 进入公众号主页 加入组织

欢迎转发、分享、点赞、在看，谢谢~。  

前言

      效果投稿来源于-郑竣僖 QQ：411309583

01

—

效果预览

效果预览（更多效果请下载源码体验）：

一、TransitionPanelExample.xaml

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.TransitionPanelExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
             mc:Ignorable="d" x:Name="_user"
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel>        <Canvas ClipToBounds="True" x:Name="PART_Canvas"            VerticalAlignment="Top">            <Canvas.Background>                <ImageBrush ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Craouse/0.jpg"/>            </Canvas.Background>        </Canvas>        <Button x:Name="btnContent" Content="下一步" Click="Button_Click" Style="{StaticResource PrimaryButton}" Width="80"/>    </StackPanel>    
</UserControl>

二、TransitionPanelExample.xaml.cs 代码如下

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;


namespace WPFDevelopers.Samples.ExampleViews
{
    /// <summary>
    /// TransitionPanelExample.xaml 的交互逻辑
    /// </summary>
    public partial class TransitionPanelExample : UserControl
    {
        double rWidth = 0.0;
        public TransitionPanelExample()
        {
            InitializeComponent();
            Loaded += TransitionPanelExample_Loaded;
        }
        private void TransitionPanelExample_Loaded(object sender, RoutedEventArgs e)
        {
            rWidth = this.ActualWidth / 8;
            Height = this.ActualWidth;
            var leftX = 0.0;
            PART_Canvas.Height = ActualHeight * 0.8;
            var color = (Color)ColorConverter.ConvertFromString("#FF5858F1");
            for (int i = 0; i < 10; i++)
            {
                var name = $"PART_Rectangle_{i}";
                var rect = new Rectangle
                {
                    Width = rWidth,
                    Height = ActualHeight,
                    Fill = new SolidColorBrush(color),
                    RenderTransformOrigin = new Point(0.5, 0.5),
                    Name = name
                };
                rect.RenderTransform = new SkewTransform
                {
                    AngleX = -25
                };
                PART_Canvas.Children.Add(rect);
                if (!leftX.Equals(0.0))
                    leftX = leftX + rWidth - 1;
                else
                    leftX = -rWidth - 4;
                Canvas.SetLeft(rect, leftX);


                
                
            }
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var doubleAnimation = new DoubleAnimation
            {
                To = 0,
                EasingFunction = new CircleEase { EasingMode = EasingMode.EaseIn }
            };
            if (btnContent.Content.ToString().Equals("下一步"))
            {
                foreach (Rectangle item in PART_Canvas.Children)
                {
                    var names = item.Name.Split('_');
                    DoubleAnimationDuration(doubleAnimation,names);
                    doubleAnimation.Completed += (s, n) =>
                    {
                        btnContent.Content = "上一步";
                    };
                    item.BeginAnimation(Rectangle.WidthProperty, doubleAnimation);
                }
            }
            else
            {
                doubleAnimation.To = rWidth;
                doubleAnimation.EasingFunction = new CircleEase { EasingMode = EasingMode.EaseOut };
                foreach (Rectangle item in PART_Canvas.Children)
                {
                    var names = item.Name.Split('_');
                    DoubleAnimationDuration(doubleAnimation, names);
                    doubleAnimation.Completed += (s, n) =>
                    {
                        btnContent.Content = "下一步";
                    };
                    item.BeginAnimation(Rectangle.WidthProperty, doubleAnimation);
                }
            }
        }


        void DoubleAnimationDuration(DoubleAnimation doubleAnimation,string[] names)
        {
            if (names[2].Equals("7") || names[2].Equals("2"))
            {
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(200);
            }
            else if (names[2].Equals("0") || names[2].Equals("6"))
            {
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(250);
            }
            else if (names[2].Equals("4") || names[2].Equals("9"))
            {
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(300);
            }
            else if (names[2].Equals("1") || names[2].Equals("5"))
            {
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(400);
            }
            else
                doubleAnimation.Duration = TimeSpan.FromMilliseconds(500);
        }




    }
}

源码地址

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood