Grid with Dynamic Number of Rows and Columns - Part 2

• Download source code - 31.7 KB
• Download app - 219.6 KB
• GitHub

Introduction

The post is devoted to the WPF datagrid with cells that have defined fixed size but number of rows and columns is updated dynamically in order to fill all available space. For example, such grid could be used in games at infinite 2D field or implementation of cellular automaton. In the previous post, WPF data grid is considered such that it has dynamically defined number of rows and columns but all cells have the same size.

Features

The application demonstrates the following features:

1. All cells has fixed width and height
2. Size of cells could be changed at run-time
3. Number of rows and columns are defined by user control size
4. Grid occupies as much space as possible
5. Input click switches the state of the cell
6. Asynchronous method of adding/deleting cells
7. Resize timer that prevents too frequent cell updating
8. Preserve cell states
9. Using of dependency container
10. Logging

Background

The solution uses C#6, .NET 4.6.1, WPF with MVVM pattern, NuGet packages Unity and Ikc5.TypeLibrary.

Solution

WPF Application

WPF application is done in MVVM pattern with one main window. Dynamic grid is implemented as user control that contains DataGrid control bound to observable collection of collections of cell view models. As was mentioned above, the code of this post is based on code from the previous post, so here, we focus on new or changed code.

View model of dynamic data grid contains cell, view and grid sizes, data model for cell set, and collection of collections of cell view models. View size properties are bound to actual size of data grid control. Actually, it is not a clear approach from the point of MVVM pattern, as view model should know nothing about view, but it is realized in an accurate way via binding and attached properties. Grid size, i.e., number of rows and columns, is calculated as view size divided by cell size. As number of rows and columns are integers, real size of cells on the view could not equal to values of cell width and height.

After control size is changed and number of rows and columns of grid are calculated, cell set is recreated, but state of cells are preserved. Then collection of cell view models is updated by asynchronous method. Method analyses necessary changes and removes or adds rows and removes or adds cell view models to rows. Asynchronous method allows to keep application responsible, and using cancellation token allows to cancel updating if control size is changed again.

Dynamic Grid Control

Dynamic grid view model implements IDynamicGridViewModel interface that has size's properties, data model of cell set, observable collection of collections of cell view models, and several color properties:

public interface IDynamicGridViewModel
{
  /// <summary>
  /// Width of current view - expected to be bound to view's actual
  /// width in OneWay binding.
  /// </summary>
  int ViewWidth { get; set; }

  /// <summary>
  /// Height of current view - expected to be bound to view's actual
  /// height in OneWay binding.
  /// </summary>
  int ViewHeight { get; set; }

  /// <summary>
  /// Width of the cell.
  /// </summary>
  int CellWidth { get; set; }

  /// <summary>
  /// Height of the cell.
  /// </summary>
  int CellHeight { get; set; }

  /// <summary>
  /// Count of grid columns.
  /// </summary>
  int GridWidth { get; }

  /// <summary>
  /// Count of grid rows.
  /// </summary>
  int GridHeight { get; }

  /// <summary>
  /// Data model.
  /// </summary>
  CellSet CellSet { get; }

  /// <summary>
  /// 2-dimensional collections for CellViewModels.
  /// </summary>
  ObservableCollection<ObservableCollection<ICellViewModel>>
    Cells { get; }

  /// <summary>
  /// Start, the lightest, color of cells.
  /// </summary>s
  Color StartColor { get; set; }

  /// <summary>
  /// Finish, the darkest, color of cells.
  /// </summary>
  Color FinishColor { get; set; }

  /// <summary>
  /// Color of borders around cells.
  /// </summary>
  Color BorderColor { get; set; }
}

View width and height are bound to actual size of data grid control by attached properties (code is taken from this Stackoverflow's question):

attached:SizeObserver.Observe="True"
attached:SizeObserver.ObservedWidth="{Binding ViewWidth, Mode=OneWayToSource}"
attached:SizeObserver.ObservedHeight="{Binding ViewHeight, Mode=OneWayToSource}"

Resize Timer

There is an issue with binding to view size - as bindings are executed in single thread, new values of view width and height come in different moments. It means that it is necessary to wait for another one. In addition, in order to prevent too frequent changes of grid sizes if user are resizing window slowly, timer is used in application. The timer is created in the constructor and starts or restarts each time one view height or view width are changed.

public DynamicGridViewModel(ILogger logger)
{
  _resizeTimer = new DispatcherTimer
  {
    Interval = TimeSpan.FromMilliseconds(100),
  };
  _resizeTimer.Tick += ResizeTimerTick;
  // initialization
  // ...
}

protected override void OnPropertyChanged(string propertyName = null)
{
  base.OnPropertyChanged(propertyName);

  if (string.Equals(propertyName, nameof(ViewHeight), 
                    StringComparison.InvariantCultureIgnoreCase) ||
    string.Equals(propertyName, nameof(ViewWidth), 
                  StringComparison.InvariantCultureIgnoreCase) ||
    string.Equals(propertyName, nameof(CellHeight), 
                  StringComparison.InvariantCultureIgnoreCase) ||
    string.Equals(propertyName, nameof(CellWidth), 
                  StringComparison.InvariantCultureIgnoreCase))
  {
    ImplementNewSize();
  }
}

/// <summary>
/// Start timer when one of the view's dimensions is changed and wait for another.
/// </summary>
private void ImplementNewSize()
{
  if (ViewHeight == 0 || ViewWidth == 0)
    return;

  if (_resizeTimer.IsEnabled)
    _resizeTimer.Stop();

  _resizeTimer.Start();
}

When timer ticks, method checks that both width and height are valid and recreates cell set. Then method CreateOrUpdateCellViewModels that update observable collection of collections of cell view models is executed:

/// <summary>
/// Method change data model and grid size due to change of view size.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ResizeTimerTick(object sender, EventArgs e)
{
  _resizeTimer.Stop();

  if (ViewHeight == 0 || ViewWidth == 0)
    return;

  var newWidth = System.Math.Max(1, 
                 (int)System.Math.Ceiling((double)ViewWidth / CellWidth));
  var newHeight = System.Math.Max(1, 
                  (int)System.Math.Ceiling((double)ViewHeight / CellHeight));
  if (CellSet != null &&
    GridWidth == newWidth &&
    GridHeight == newHeight)
  {
    // the same size, nothing to do
    return;
  }

  // preserve current points
  var currentPoints = CellSet?.GetPoints().Where
                      (point => point.X < newWidth && point.Y < newHeight);
  CellSet = new CellSet(newWidth, newHeight);
  GridWidth = CellSet.Width;
  GridHeight = CellSet.Height;

  if (currentPoints != null)
    CellSet.SetPoints(currentPoints);
  CreateOrUpdateCellViewModels();
}

Update Collection of Cell View Models

After new cells set is created, collection of cell view models should be updated. In the previous post, this collection was recreated each time and it leads to the application hanging. This issue is solved by asynchronous method of updating current collection. Due to WPF architecture and as dynamic grid user control item source is bound to Cells collection, all changes of this collection is done via Dispatcher. In the application, priority DispatcherPriority.ApplicationIdle is used as it is executed after all data bindings, but other value could be used.

Start point is the method CreateOrUpdateCellViewModels that creates Cells collection at first time, creates cancellation token and starts asynchronous recurrent method CreateCellViewModelsAsync for the first row.

private async void CreateOrUpdateCellViewModels()
{
  _logger.LogStart("Start");

  // stop previous tasks that creates viewModels
  if (_cancellationSource != null && _cancellationSource.Token.CanBeCanceled)
    _cancellationSource.Cancel();

  if (Cells == null)
    Cells = new ObservableCollection<ObservableCollection<ICellViewModel>>();

  try
  {
    _cancellationSource = new CancellationTokenSource();
    await CreateCellViewModelsAsync(0, _cancellationSource.Token).ConfigureAwait(false);
  }
  catch (OperationCanceledException ex)
  {
    _logger.Exception(ex);
  }
  catch (AggregateException ex)
  {
    foreach (var innerException in ex.InnerExceptions)
    {
      _logger.Exception(innerException);
    }
  }
  finally
  {
    _cancellationSource = null;
  }
  _logger.LogEnd("Completed - but add cells in asynchronous way");
}

As cell view models is stored as collection of collections, each inner collection corresponds to the row of grid. Method CreateCellViewModelsAsync is executed for each row position from 0 till Math.Max(Cells.Count, GridHeight). The following cases are possible:

1. rowNumber >= GridHeight, that means that collection Cell contains more rows than current size of grid. These rows should be removed:
   C#

   Application.Current.Dispatcher.Invoke(
     () => Cells.RemoveAt(positionToProcess),
     DispatcherPriority.ApplicationIdle,
     cancellationToken);	

2. rowNumber < Cells.Count, that means that row with such index exists in collection Cell and index less than grid height. In this case, method UpdateCellViewModelRow is called:
   C#

   Application.Current.Dispatcher.Invoke(
     () => UpdateCellViewModelRow(positionToProcess),
     DispatcherPriority.ApplicationIdle,
     cancellationToken);	

   Let's note that row is ObservableCollection<icellviewmodel></icellviewmodel>. Depends on the relation between length of this collection and grid width, extra cell view models are removed, existent cell models are updated with new ICell instance from dynamic grid data model, and missing cell view models are added:
   C#

   /// <summary>
   /// Add or remove cell view models to the row.
   /// </summary>
   /// <param name="rowNumber">Number of row in data model.</param>
   private void UpdateCellViewModelRow(int rowNumber)
   {
     var row = Cells[rowNumber];
     // delete extra cells
     while (row.Count > GridWidth)
       row.RemoveAt(GridWidth);
     for (var pos = 0; pos < GridWidth; pos++)
     {
       // create new ViewModel or update existent one
       var cell = CellSet.GetCell(pos, rowNumber);
       if (pos < row.Count)
         row[pos].Cell = cell;
       else
       {
         var cellViewModel = new CellViewModel(cell);
         row.Add(cellViewModel);
       }
     }
   }	

3. "else" case, i.e., rowNumber >= Cells.Count and rowNumber < GridHeight, that means that collection Cell does not contain necessary row. This row is created by method CreateCellViewModelRow:
   C#

   /// <summary>
   /// Add new row of cell view models that corresponds to
   /// rowNumber row in data model.
   /// </summary>
   /// <param name="rowNumber">Number of row in data model.</param>
   private void CreateCellViewModelRow(int rowNumber)
   {
     _logger.Log($"Create {rowNumber} row of cells");
     var row = new ObservableCollection<ICellViewModel>();
     for (var x = 0; x < GridWidth; x++)
     {
       var cellViewModel = new CellViewModel(CellSet.GetCell(x, rowNumber));
       row.Add(cellViewModel);
     }
   
     _logger.Log($"{rowNumber} row of cells is ready for rendering");
     Cells.Add(row);
   }

Dependency Container

Unity is used as dependency container. In the post, we register EmptyLogger as logger and create singleton for the instance of DynamicGridViewModel. In WPF applications, the initialization of DI container is done in OnStartup method in App.xaml.cs:

protected override void OnStartup(StartupEventArgs e)
{
  base.OnStartup(e);

  IUnityContainer container = new UnityContainer();
  container.RegisterType<ILogger, EmptyLogger>();

  var dynamicGridViewModel = new DynamicGridViewModel(
                          container.Resolve<ILogger>())
  {
    // init properties
  };

  container.RegisterInstance(
    typeof(IDynamicGridViewModel),
    dynamicGridViewModel,
    new ContainerControlledLifetimeManager());

  var mainWindow = container.Resolve<MainWindow>();
  Application.Current.MainWindow = mainWindow;
  Application.Current.MainWindow.Show();
}

MainWindow constructor has parameter that is resolved by container:

public MainWindow(IDynamicGridViewModel dynamicGridViewModel)
{
  InitializeComponent();
  DataContext = dynamicGridViewModel;
}

Similarly, input parameter of DynamicGridViewModel constructor is resolved by container:

public class DynamicGridViewModel : BaseNotifyPropertyChanged, IDynamicGridViewModel
{
  private readonly ILogger _logger;

  public DynamicGridViewModel(ILogger logger)
  {
    logger.ThrowIfNull(nameof(logger));
    _logger = logger;

    this.SetDefaultValues();
    // initialization
    // ...
    _logger.Log("DynamicGridViewModel constructor is completed");
  }
  // other methods
  // ...
}

History

• 4^th January, 2017: Initial post