优化 WPF 中由单元格组成的网格以获得最短路径

我目前正在尝试在 WPF 中制作一个由 Cell 对象组成的网格。我需要将单元格绑定到对象，该对象需要位于二维数组中。 - 我需要它很大，可扩展，并改变单元格的颜色并将数据存储在对象中！

我已经实现了，但是绘制网格似乎很慢！ （100x100 网格需要 >10 秒！） 这是我已经制作的图片：

我在 ItemsControl 的 XAML 中使用数据绑定。这是我的 XAML：

<ItemsControl x:Name="GridArea" ItemsSource="{Binding Cellz}" Grid.Column="1" BorderBrush="Black" BorderThickness="0.1">
        <ItemsControl.Resources>
            <DataTemplate DataType="{x:Type local:Cell}">
                <Border BorderBrush="Black" BorderThickness="0.1">
                    <Grid Background="{Binding CellColor}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseMove" >
                                <ei:CallMethodAction TargetObject="{Binding}" MethodName="MouseHoveredOver"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Grid>
                </Border>

            </DataTemplate>
        </ItemsControl.Resources>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding Rows}" Columns="{Binding Columns}" MouseDown="WrapPanelMouseDown" MouseUp="WrapPanelMouseUp" MouseLeave="WrapPanelMouseLeave" >
                    <!--<UniformGrid.Background>
                        <ImageBrush/>
                    </UniformGrid.Background>-->
                </UniformGrid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

在我的代码隐藏中，我实例化了一个名为 Grid 的类的对象，它使用 Cell 类的对象创建一个 2D 数组（和一个列表，这是我绑定的列表）。用秒表检查后，我发现这并不花时间。它是实际的绑定和绘制网格，所以我想我的优化应该在我的 XAML 中进行，如果有任何优化可用的话。

但为了提供一切，这是我的代码以及网格类和单元格类：

    public MainWindow()
    {
        InitializeComponent();  

        NewGrid = new Grid(75, 75);
        DataContext = NewGrid;

    }

    public class Grid
    {
    public int Columns { get; set; }
    public int Rows { get; set; }

    public ObservableCollection<Cell> Cellz {get;set;}

    public Cell[,] CellArray { get; set; }

    public Grid(int columns, int rows)
    {
        Columns = columns;
        Rows = rows;

        Cellz = new ObservableCollection<Cell>();
        CellArray = new Cell[Rows,Columns];
        InitializeGrid();

    }

    public void InitializeGrid()
    {
        Color col = Colors.Transparent;
        SolidColorBrush Trans = new SolidColorBrush(col);
        for (int i = 0; i < Rows; i++)
        {
            for (int j = 0; j < Columns; j++)
            {
                var brandNewCell = new Cell(i, j) { CellColor = Trans};
                Cellz.Add(brandNewCell);
                CellArray[i, j] = brandNewCell;
            }
        }
    }

    public class Cell : INotifyPropertyChanged
    {
        public int x, y;   // x,y location
        public Boolean IsWall { get; set; }

        private SolidColorBrush _cellcolor;
        public SolidColorBrush CellColor
        {
            get { return _cellcolor; }
            set
            {
                _cellcolor = value;
                OnPropertyChanged();
            }
        }
        public Cell(int tempX, int tempY)
        {
            x = tempX;
            y = tempY;
        }


        public bool IsWalkable(Object unused)
        {
            return !IsWall;
        }
    public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(
            [CallerMemberName] string caller = "")
        {
            if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(caller));
        }
    }
}

我喜欢带有绑定的非常简单的实现，但是加载时间确实令人无法接受 - 任何建议将不胜感激！

好吧，我重新创建了您的示例，并进行了一些更改。我主要摆脱了 DataContext 上的绑定，并专门为您的用例创建了一个视图模型，该视图模型直接绑定到 itemscontrol。

绘图速度肯定低于 10 秒，但我想我给了你尽可能多的相关代码，这样你就可以比较解决方案......

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using TestSO.model;

namespace TestSO.viewmodel
{
    public class ScreenViewModel : INotifyPropertyChanged, IDisposable
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private IList<Cell> cells;
        public IList<Cell> Cells
        {
            get
            {
                return cells;
            }
            set
            {
                if (object.Equals(cells, value))
                {
                    return;
                }
                UnregisterSource(cells);
                cells = value;
                RegisterSource(cells);
                RaisePropertyChanged("Cells");
            }
        }

        private int rows;
        public int Rows
        {
            get
            {
                return rows;
            }
            set
            {
                if (rows == value)
                {
                    return;
                }
                rows = value;
                RaisePropertyChanged("Rows");
            }
        }

        private int columns;
        public int Columns
        {
            get
            {
                return columns;
            }
            set
            {
                if (columns == value)
                {
                    return;
                }
                columns = value;
                RaisePropertyChanged("Columns");
            }
        }

        private Cell[,] array;
        public Cell[,] Array
        {
            get
            {
                return array;
            }
            protected set
            {
                array = value;
            }
        }

        protected void RaisePropertyChanged(string propertyName)
        {
            var local = PropertyChanged;
            if (local != null)
            {
                App.Current.Dispatcher.BeginInvoke(local, this, new PropertyChangedEventArgs(propertyName));
            }
        }

        protected void RegisterSource(IList<Cell> collection)
        {
            if (collection == null)
            {
                return;
            }
            var colc = collection as INotifyCollectionChanged;
            if (colc != null)
            {
                colc.CollectionChanged += OnCellCollectionChanged;
            }
            OnCellCollectionChanged(collection, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Replace, collection, null));
        }

        protected virtual void OnCellCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Reset)
            {
                Array = null;
            }
            if (e.OldItems != null)
            {
                foreach (var item in e.OldItems)
                {
                    var cell = item as Cell;
                    if (cell == null)
                    {
                        continue;
                    }
                    if (Array == null)
                    {
                        continue;
                    }
                    Array[cell.X, cell.Y] = null;
                }
            }
            if (e.NewItems != null)
            {
                if (Array == null)
                {
                    Array = new Cell[Rows, Columns];
                }
                foreach (var item in e.NewItems)
                {
                    var cell = item as Cell;
                    if (cell == null)
                    {
                        continue;
                    }
                    if (Array == null)
                    {
                        continue;
                    }
                    Array[cell.X, cell.Y] = cell;
                }
            }
        }

        protected void UnregisterSource(IList<Cell> collection)
        {
            if (collection == null)
            {
                return;
            }
            var colc = collection as INotifyCollectionChanged;
            if (colc != null)
            {
                colc.CollectionChanged -= OnCellCollectionChanged;
            }
            OnCellCollectionChanged(collection, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
        }

        public ScreenViewModel()
        {
        }

        public ScreenViewModel(int row, int col)
            : this()
        {
            this.Rows = row;
            this.Columns = col;
        }

        bool isDisposed = false;
        private void Dispose(bool disposing)
        {
            if (disposing)
            {
                if (isDisposed)
                {
                    return;
                }
                isDisposed = true;
                Cells = null;
            }
        }

        public void Dispose()
        {
            Dispose(true);
        }
    }
}

我创建了一个额外的控制器，它是 ObservableCollection 的所有者，主要目的是不对 viewModel 进行任何更改，而是更改控制器内的集合（或向其添加添加、删除、清除方法） ），并让事件链为我完成工作，使 ScreenViewModel 中的二维数组保持最新

using System.Collections.Generic;
using System.Collections.ObjectModel;
using TestSO.model;

namespace TestSO.controller
{
    public class GenericController<T>
    {
        private readonly IList<T> collection = new ObservableCollection<T>();
        public IList<T> Collection
        {
            get
            {
                return collection;
            }
        }

        public GenericController()
        {
        }
    }

    public class CellGridController : GenericController<Cell>
    {
        public CellGridController()
        {
        }
    }
}

对于您的细胞类别，我稍微调整了它，仅引发更改事件，以防实际上发生更改

using System.ComponentModel;
using System.Windows;
using System.Windows.Media;

namespace TestSO.model
{
    public class Cell : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void RaisePropertyChanged(string propertyName)
        {
            var local = PropertyChanged;
            if (local != null)
            {
                Application.Current.Dispatcher.BeginInvoke(local, this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private int x;
        public int X
        {
            get
            {
                return x;
            }
            set
            {
                if (x == value)
                {
                    return;
                }
                x = value;
                RaisePropertyChanged("X");
            }
        }

        private int y;
        public int Y
        {
            get
            {
                return y;
            }
            set
            {
                if (y == value)
                {
                    return;
                }
                y = value;
                RaisePropertyChanged("Y");
            }
        }

        private bool isWall;
        public bool IsWall
        {
            get
            {
                return isWall;
            }
            set
            {
                if (isWall == value)
                {
                    return;
                }
                isWall = value;
                RaisePropertyChanged("IsWall");
            }
        }

        private SolidColorBrush _cellColor;
        public SolidColorBrush CellColor
        {
            get
            {
                // either return the _cellColor, or say that it is transparent
                return _cellColor ?? Brushes.Transparent;
            }
            set
            {
                if (SolidColorBrush.Equals(_cellColor, value))
                {
                    return;
                }
                _cellColor = value;
                RaisePropertyChanged("CellColor");
            }
        }

        public Cell()
        {
        }

        public Cell(int x, int y)
            : this()
        {
            this.X = x;
            this.Y = y;
        }
    }
}

然后我稍微更改了xaml（尽管没有接管交互点），通过为ScreenViewModel、控制器和DataTemplate创建资源，这个模板随后也通过ItemTemplate直接添加到ItemsControl中，而不是使用 DataTemplate 功能（没有看到上面的要求吗？）

<Window x:Class="TestSO.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:model="clr-namespace:TestSO.model"
        xmlns:viewmodel="clr-namespace:TestSO.viewmodel"
        xmlns:controller="clr-namespace:TestSO.controller"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <controller:CellGridController x:Key="CellController" />
        <viewmodel:ScreenViewModel x:Key="GridViewModel" Rows="75" Columns="75" />
        <DataTemplate x:Key="CellTemplate">
            <Border BorderBrush="Black" BorderThickness="0.5">
                <Grid Background="{Binding CellColor}">
                </Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ItemsControl ItemsSource="{Binding Cells,Source={StaticResource GridViewModel}}" BorderBrush="Black" BorderThickness="0.1" ItemTemplate="{StaticResource CellTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid
                        Rows="{Binding Rows,Source={StaticResource GridViewModel}}" 
                        Columns="{Binding Columns,Source={StaticResource GridViewModel}}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Window>

在 main.cs 页面内，我加载了将控制器的集合与 ScreenViewModel.Cells 属性链接起来，并加载了一些模板数据。只是非常基本的模拟数据（您还可以将屏幕模型附加到 DataContext 并在其他地方定义控制器，然后更改 xaml 中的绑定以返回到 DataContext，但是通过资源，您还可以访问已创建的实例（初始化组件后）

protected ScreenViewModel ScreenViewModel
{
    get
    {
        return this.Resources["GridViewModel"] as ScreenViewModel;
    }
}

protected CellGridController Controller
{
    get
    {
        return this.Resources["CellController"] as CellGridController;
    }
}

protected void Load()
{
    var controller = Controller;
    controller.Collection.Clear();
    string[] rows = colorToCellSource.Split(new string[] { Environment.NewLine }, StringSplitOptions.RemoveEmptyEntries);
    string row;
    for (int x = 0; x < rows.Length; x++)
    {
        int length = rows[x].Length;
        ScreenViewModel.Rows = rows.Length;
        ScreenViewModel.Columns = length;
        row = rows[x];
        for (int y = 0; y < length; y++)
        {
            Cell cell = new Cell(x, y);
            cell.CellColor = row[y] == '0' ? Brushes.Transparent : Brushes.Blue;
            controller.Collection.Add(cell);
        }
    }
}

public MainWindow()
{
    InitializeComponent();
    if (Controller != null && ScreenViewModel != null)
    {
        ScreenViewModel.Cells = Controller.Collection;
        Load();
    }
}

屏幕在 1 秒内重新绘制，调整大小和最大化需要一点延迟，但我想这是可以预料的......（我的测试模板是 105x107）