WPF 实现冒泡排序可视化

WPF 实现冒泡排序可视化

实现冒泡排序代码就不过多讲解，主要是实现动画效果思路，本 demo 使用 MVVM 模式编写，读者可自行参考部分核心代码，即可实现如视频所示效果。

对于新手了解算法相关知识应该有些许帮助，至于其它类型排序，也可按该思路自行修改实现。

直接上代码，页面布局.xaml 代码如下：

UserControl x:Class="Wpf_MetroListBox.Views.Test.CanvasLabelMove"
             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:Wpf_MetroListBox.Views.Test"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    Grid>
       
        Grid.RowDefinitions>
            RowDefinition Height="380">/RowDefinition>
            RowDefinition Height="*">/RowDefinition>
        /Grid.RowDefinitions>
        Canvas x:Name="canvas" Grid.Row="0" Background="White">
        /Canvas>
        Grid Grid.Row="1">
            Grid.ColumnDefinitions>
                ColumnDefinition>/ColumnDefinition>
                ColumnDefinition>/ColumnDefinition>
            /Grid.ColumnDefinitions>
            Button Content="创建序列" HorizontalAlignment="Center"  Grid.Column="0" Width="70" Height="35" Command="{Binding CommitCommand}" Style="{DynamicResource btn-info-m}">/Button>
            Button  Content="执行排序" HorizontalAlignment="Center"  Grid.Column="1" Width="70" Height="35" Command="{Binding QueryCommand}" Style="{DynamicResource btn-info-m}">/Button>
        /Grid>
       
    /Grid>
    
/UserControl>

逻辑代码实现如下：

public partial class CanvasLabelMove : UserControl
    {
        CanvasLabelMoveViewModel vm;
        private Random random = new Random();
        private ListLabel> labels = new ListLabel>();
        private int[] array;
        private int delay = 1000; 
        public CanvasLabelMove()
        {
            InitializeComponent();
            vm = new CanvasLabelMoveViewModel();
            this.DataContext = vm;
            this.Publish(EventNames.MainWindowLoadControlEvent, "排序可视化");
            this.Subscriberstring>(EventNames.DataGridFocusChangedEvent, async contentStr =>
            {  
                if (contentStr.Equals("1"))
                {
                    InitializeArrayAndLabels();
                }
                else if (contentStr.Equals("2"))
                {
                    StartBubbleSortAnimation();
                }
            });
        }
        private void InitializeArrayAndLabels()
        {
            int size = 18; 
            array = new int[size];
            labels.Clear();
            canvas.Children.Clear();
            HashSetint> randomNumbers = new HashSetint>();
            Random random = new Random();
            
            while (randomNumbers.Count  size)
            {
                int nextNumber = random.Next(22, 200);
                randomNumbers.Add(nextNumber);
            }
            int j = 0;
            foreach (int number in randomNumbers)
            {
                array[j] = number;
                j++;
            }
            for (int i = 0; i  size; i++)
            {
                Label label = new Label
                {
                    Content = array[i].ToString(),
                    FontSize = 12,
                    Width = 35,
                    Height = array[i],
                    Margin = new Thickness(50, 0, 0, 0),
                    Foreground = Brushes.Black,
                    Background = Brushes.BlanchedAlmond,
                    VerticalContentAlignment = VerticalAlignment.Center,
                    HorizontalContentAlignment = HorizontalAlignment.Center
                };             
                Canvas.SetLeft(label, i * 50); 
                Canvas.SetBottom(label, (canvas.ActualHeight / 2) - 100); 
                canvas.Children.Add(label);
                labels.Add(label);
            }
        }

        private async void StartBubbleSortAnimation()
        {
            for (int j = 0; j  array.Length - 1; j++)
            {
                for (int i = 0; i  array.Length - 2; i++)
                {
                    if (array[i] > array[i + 1])
                    {
                        Swap(i, i + 1);
                        
                        AnimateSwap(i, i + 1);
                        await Task.Delay(delay);
                    }
                }
            }
        }

        private void Swap(int i, int j)
        {
            int temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }

        private async void AnimateSwap(int i, int j)
        {
            
            double label1X = Canvas.GetLeft(labels[i]);
            double label2X = Canvas.GetLeft(labels[j]);
            await Task.Delay(delay / 10); 
            var animation1 = new DoubleAnimation(label2X, TimeSpan.FromSeconds(0.5));
            var animation2 = new DoubleAnimation(label1X, TimeSpan.FromSeconds(0.5));

            labels[i].BeginAnimation(Canvas.LeftProperty, animation1);
            labels[j].BeginAnimation(Canvas.LeftProperty, animation2);
            
            
            
            Label tempLabel = labels[i];
            labels[i] = labels[j];
            labels[j] = tempLabel;
        }
    }
	public class CanvasLabelMoveViewModel : BaseValidViewModel
    {
        public CanvasLabelMoveViewModel()
        {

        }

        protected override void ExecuteCommitCommand()
        {
            this.Publish(EventNames.DataGridFocusChangedEvent, "1");
        }
        protected override void ExecuteQueryCommand()
        {
            this.Publish(EventNames.DataGridFocusChangedEvent, "2");
        }
    }