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;elseleftX = -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);}elsedoubleAnimation.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