Merge pull request #7315 from timunie/feature/EditableDatagridTemplateColumn

Feature: editable `DataGridTemplateColumn`

samples/ControlCatalog/Models/Person.cs

@@ -16,6 +16,7 @@ namespace ControlCatalog.Models
         string _firstName;
         string _lastName;
         bool _isBanned;
+        private int _age;
 
         public string FirstName
         {
@@ -59,6 +60,20 @@ namespace ControlCatalog.Models
             }
         }
 
+        
+        /// <summary>
+        ///    Gets or sets the age of the person
+        /// </summary>
+        public int Age
+        {
+            get => _age;
+            set
+            {
+                _age = value;
+                OnPropertyChanged(nameof(Age));
+            }
+        }
+
         Dictionary<string, List<string>> _errorLookup = new Dictionary<string, List<string>>();
 
         void SetError(string propertyName, string error)

samples/ControlCatalog/Pages/DataGridPage.xaml

@@ -64,6 +64,18 @@
               <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
               <DataGridTextColumn Header="Last" Binding="{Binding LastName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
               <DataGridCheckBoxColumn Header="Is Banned" Binding="{Binding IsBanned}" Width="*" IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
+              <DataGridTemplateColumn Header="Age" >
+                <DataGridTemplateColumn.CellTemplate>
+                  <DataTemplate DataType="local:Person">
+                    <TextBlock Text="{Binding Age, StringFormat='{}{0} years'}" VerticalAlignment="Center" HorizontalAlignment="Center" />
+                  </DataTemplate>
+                </DataGridTemplateColumn.CellTemplate>
+                <DataGridTemplateColumn.CellEditingTemplate>
+                  <DataTemplate DataType="local:Person">
+                    <NumericUpDown Value="{Binding Age}" FormatString="N0" HorizontalAlignment="Stretch" Minimum="0" Maximum="120" TemplateApplied="NumericUpDown_OnTemplateApplied" />
+                  </DataTemplate>
+                </DataGridTemplateColumn.CellEditingTemplate>
+              </DataGridTemplateColumn>
             </DataGrid.Columns>
           </DataGrid>
           <Button Grid.Row="1" Name="btnAdd" Margin="12,0,12,12" Content="Add" HorizontalAlignment="Right" />

samples/ControlCatalog/Pages/DataGridPage.xaml.cs

@@ -6,7 +6,9 @@ using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 using ControlCatalog.Models;
 using Avalonia.Collections;
+using Avalonia.Controls.Primitives;
 using Avalonia.Data;
+using Avalonia.Threading;
 
 namespace ControlCatalog.Pages
 {
@@ -48,9 +50,9 @@ namespace ControlCatalog.Pages
 
             var items = new List<Person>
             {
-                new Person { FirstName = "John", LastName = "Doe" },
-                new Person { FirstName = "Elizabeth", LastName = "Thomas", IsBanned = true },
-                new Person { FirstName = "Zack", LastName = "Ward" }
+                new Person { FirstName = "John", LastName = "Doe" , Age = 30},
+                new Person { FirstName = "Elizabeth", LastName = "Thomas", IsBanned = true , Age = 40 },
+                new Person { FirstName = "Zack", LastName = "Ward" , Age = 50 }
             };
             var collectionView3 = new DataGridCollectionView(items);
 
@@ -84,5 +86,19 @@ namespace ControlCatalog.Pages
                 return Comparer.Default.Compare(x, y);
             }
         }
+
+        private void NumericUpDown_OnTemplateApplied(object sender, TemplateAppliedEventArgs e)
+        {
+            // We want to focus the TextBox of the NumericUpDown. To do so we search for this control when the template
+            // is applied, but we postpone the action until the control is actually loaded. 
+            if (e.NameScope.Find<TextBox>("PART_TextBox") is {} textBox)
+            {
+                Dispatcher.UIThread.InvokeAsync(() =>
+                {
+                    textBox.Focus();
+                    textBox.SelectAll();
+                }, DispatcherPriority.Loaded);
+            }
+        }
     }
 }

src/Avalonia.Controls.DataGrid/DataGridColumn.cs

@@ -448,7 +448,7 @@ namespace Avalonia.Controls
             internal set;
         }
 
-        public bool IsReadOnly
+        public virtual bool IsReadOnly
         {
             get
             {

src/Avalonia.Controls.DataGrid/DataGridTemplateColumn.cs

@@ -1,4 +1,4 @@
-// (c) Copyright Microsoft Corporation.
+// (c) Copyright Microsoft Corporation.
 // This source is subject to the Microsoft Public License (Ms-PL).
 // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
 // All other rights reserved.
@@ -15,7 +15,7 @@ namespace Avalonia.Controls
 {
     public class DataGridTemplateColumn : DataGridColumn
     {
-        IDataTemplate _cellTemplate;
+        private IDataTemplate _cellTemplate;
 
         public static readonly DirectProperty<DataGridTemplateColumn, IDataTemplate> CellTemplateProperty =
             AvaloniaProperty.RegisterDirect<DataGridTemplateColumn, IDataTemplate>(
@@ -30,17 +30,38 @@ namespace Avalonia.Controls
             set { SetAndRaise(CellTemplateProperty, ref _cellTemplate, value); }
         }
 
+        private IDataTemplate _cellEditingCellTemplate;
+
+        /// <summary>
+        /// Defines the <see cref="CellEditingTemplate"/> property.
+        /// </summary>
+        public static readonly DirectProperty<DataGridTemplateColumn, IDataTemplate> CellEditingTemplateProperty =
+                AvaloniaProperty.RegisterDirect<DataGridTemplateColumn, IDataTemplate>(
+                    nameof(CellEditingTemplate),
+                    o => o.CellEditingTemplate,
+                    (o, v) => o.CellEditingTemplate = v);
+
+        /// <summary>
+        /// Gets or sets the <see cref="IDataTemplate"/> which is used for the editing mode of the current <see cref="DataGridCell"/>
+        /// </summary>
+        /// <value>
+        /// An <see cref="IDataTemplate"/> for the editing mode of the current <see cref="DataGridCell"/>
+        /// </value>
+        /// <remarks>
+        /// If this property is <see langword="null"/> the column is read-only.
+        /// </remarks>
+        public IDataTemplate CellEditingTemplate
+        {
+            get => _cellEditingCellTemplate;
+            set => SetAndRaise(CellEditingTemplateProperty, ref _cellEditingCellTemplate, value);
+        }
+        
         private void OnCellTemplateChanged(AvaloniaPropertyChangedEventArgs e)
         {
             var oldValue = (IDataTemplate)e.OldValue;
             var value = (IDataTemplate)e.NewValue;
         }
 
-        public DataGridTemplateColumn()
-        {
-            IsReadOnly = true;
-        }
-
         protected override IControl GenerateElement(DataGridCell cell, object dataItem)
         {
             if(CellTemplate != null)
@@ -60,7 +81,22 @@ namespace Avalonia.Controls
         protected override IControl GenerateEditingElement(DataGridCell cell, object dataItem, out ICellEditBinding binding)
         {
             binding = null;
-            return GenerateElement(cell, dataItem);
+            if(CellEditingTemplate != null)
+            {
+                return CellEditingTemplate.Build(dataItem);
+            }
+            else if (CellTemplate != null)
+            {
+                return CellTemplate.Build(dataItem);
+            }
+            if (Design.IsDesignMode)
+            {
+                return null;
+            }
+            else
+            {
+                throw DataGridError.DataGridTemplateColumn.MissingTemplateForType(typeof(DataGridTemplateColumn));
+            }
         }
 
         protected override object PrepareCellForEdit(IControl editingElement, RoutedEventArgs editingEventArgs)
@@ -70,12 +106,30 @@ namespace Avalonia.Controls
 
         protected internal override void RefreshCellContent(IControl element, string propertyName)
         {
-            if(propertyName == nameof(CellTemplate) && element.Parent is DataGridCell cell)
+            var cell = element.Parent as DataGridCell;
+            if(propertyName == nameof(CellTemplate) && cell is not null)
             {
                 cell.Content = GenerateElement(cell, cell.DataContext);
             }
 
             base.RefreshCellContent(element, propertyName);
         }
+        
+        public override bool IsReadOnly
+        {
+            get
+            {
+                if (CellEditingTemplate is null)
+                {
+                    return true;
+                }
+
+                return base.IsReadOnly;
+            }
+            set
+            {
+                base.IsReadOnly = value;
+            }
+        }
     }
 }