?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

總結

以上是生活随笔為你收集整理的WPF过渡面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。