Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF

Grid with Dynamic Number of Rows and Columns - Part 2

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
4 Jan 2017CPOL5 min read 10.8K   753   8   2
Data grid cells in WPF with defined fixed size with number of rows and columns updated dynamically
In this article, you will learn about WPF datagrid with cells having defined fixed size but number of rows and columns updated dynamically in order to fill all available space.

Grid 12×10 with cell 25×25

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

Grid 25×16 with cell 25×25 and values

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:

C#
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):

XML
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.

C#
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:

C#
/// <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

Grid 22×13 with cell 25×25 until resizing

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.

C#
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:

C#
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:

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

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

C#
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

  • 4th January, 2017: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Ukraine Ukraine
• Have more than 25 years of the architecting, implementing, and supporting various applications from small desktop and web utilities up to full-fledged cloud SaaS systems using mainly Microsoft technology stack and implementing the best practices.
• Have significant experience in the architecting applications starting from the scratch and from the existent application (aka “legacy”) where it is required to review, refactor, optimise the codebase and data structure, migrate to new technologies, implement new features, best practices, create tests and write documentation.
• Have experience in project management, collecting business requirements, creating MVP, working with stakeholders and end users, and tasks and backlog management.
• Have hands-on experience in the setting up CI/CD pipelines, the deploying on-premise and cloud systems both in Azure and AWS, support several environments.
• As Mathematician, I interested much in the theory of automata and computer algebra.

Comments and Discussions

 
QuestionHow to know selected cell address from the GridViewModel Pin
Dukhyun28-Sep-22 17:23
Dukhyun28-Sep-22 17:23 
QuestionRe: How to know selected cell address from the GridViewModel Pin
Illya Reznykov6-Oct-22 0:33
Illya Reznykov6-Oct-22 0:33 
Hi,
I don't work with WPF last years, so I need more information. Could you clarify what exactly do you try to achieve?

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.