fix: Prevent focus reset for DataGridTemplateColumn

Microsoft.Toolkit.Uwp.SampleApp/Data/DataGridDataItem.cs

@@ -149,7 +149,8 @@ public string Parent_mountain
 
         public uint Prominence { get; set; }
 
-        public uint First_ascent { get; set; }
+        // You need to use DateTimeOffset to get proper binding to the CalendarDatePicker control, DateTime won't work.
+        public DateTimeOffset First_ascent { get; set; }
 
         public string Ascents { get; set; }
 

Microsoft.Toolkit.Uwp.SampleApp/Data/DataGridDataSource.cs

@@ -48,8 +48,8 @@ public async Task<IEnumerable<DataGridDataItem>> GetDataAsync()
                             Coordinates = values[4],
                             Prominence = uint.Parse(values[5]),
                             Parent_mountain = values[6],
-                            First_ascent = uint.Parse(values[7]),
-                            Ascents = values[8]
+                            First_ascent = DateTimeOffset.Parse(values[7]),
+                            Ascents = values[8],
                         });
                 }
             }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DataGrid/DataGridCode.bind

@@ -1,12 +1,14 @@
 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
   <Grid>
     <Grid.Resources>
+      <converters:StringFormatConverter x:Key="StringFormatConverter"/>
       <DataTemplate x:Key="RowDetailsTemplate">
         <StackPanel>
           <TextBlock Margin="20" Text="Here are the details for the selected mountain:" />
@@ -85,7 +87,19 @@
         <controls:DataGridTextColumn Header="Height (m)" Binding="{Binding Height_m}" Tag="Height_m" />
         <controls:DataGridTextColumn Header="Range" Binding="{Binding Range}" Tag="Range" />
         <controls:DataGridTextColumn Header="Parent Mountain" Binding="{Binding Parent_mountain}" Tag="Parent_mountain" />
+        <controls:DataGridTemplateColumn Header="First Ascent" Tag="First_ascent">
+          <controls:DataGridTemplateColumn.CellTemplate>
+            <DataTemplate>
+              <TextBlock Text="{Binding First_ascent, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:MM/dd/yyy}'}" VerticalAlignment="Center" Margin="8,0,0,0"/>
+            </DataTemplate>
+          </controls:DataGridTemplateColumn.CellTemplate>
+          <controls:DataGridTemplateColumn.CellEditingTemplate>
+            <DataTemplate>
+              <CalendarDatePicker Margin="3,4,3,3" Date="{Binding First_ascent, Mode=TwoWay}"/>
+            </DataTemplate>
+          </controls:DataGridTemplateColumn.CellEditingTemplate>
+        </controls:DataGridTemplateColumn>
       </controls:DataGrid.Columns>
     </controls:DataGrid>
   </Grid>
-</Page>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DataGrid/DataGridPage.xaml

@@ -6,13 +6,5 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
-    <!-- Shallow Copy -->
-    <Grid Visibility="Collapsed">
-        <controls:DataGrid>
-            <controls:DataGrid.Columns>
-                <controls:DataGridTextColumn/>
-                <controls:DataGridComboBoxColumn/>
-            </controls:DataGrid.Columns>
-        </controls:DataGrid>
-    </Grid>
+    <!--  Shallow Copy in XamlOnlyPage.xaml  -->
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/DataGrid/DataGridPage.xaml.cs

@@ -41,8 +41,9 @@ public async void OnXamlRendered(FrameworkElement control)
                 dataGrid.Sorting += DataGrid_Sorting;
                 dataGrid.LoadingRowGroup += DataGrid_LoadingRowGroup;
                 dataGrid.ItemsSource = await viewModel.GetDataAsync();
+                dataGrid.PreparingCellForEdit += DataGrid_PreparingCellForEdit;
 
-                var comboBoxColumn = dataGrid.Columns.FirstOrDefault(x => x.Tag.Equals("Mountain")) as DataGridComboBoxColumn;
+                var comboBoxColumn = dataGrid.Columns.FirstOrDefault(x => x.Tag?.Equals("Mountain") == true) as DataGridComboBoxColumn;
                 if (comboBoxColumn != null)
                 {
                     comboBoxColumn.ItemsSource = await viewModel.GetMountains();
@@ -111,6 +112,15 @@ public async void OnXamlRendered(FrameworkElement control)
             }
         }
 
+        private void DataGrid_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e)
+        {
+            if (e.Column is DataGridTemplateColumn column && (string)column?.Tag == "First_ascent" &&
+                e.EditingElement is CalendarDatePicker calendar)
+            {
+                calendar.IsCalendarOpen = true;
+            }
+        }
+
         private void DataGrid_LoadingRowGroup(object sender, DataGridRowGroupHeaderEventArgs e)
         {
             ICollectionViewGroup group = e.RowGroupHeader.CollectionViewGroup;

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

@@ -54,6 +54,14 @@
         <ui:AttachedDropShadow x:Key="AttachedDropShadow" />
         <controls:DropShadowPanel x:Key="DropShadowPanel"
                                   ui:Effects.Shadow="{StaticResource AttachedShadow}" />
+        <controls:DataGrid x:Key="DataGrid">
+            <controls:DataGrid.Columns>
+                <controls:DataGridCheckBoxColumn />
+                <controls:DataGridComboBoxColumn />
+                <controls:DataGridTemplateColumn />
+                <controls:DataGridTextColumn />
+            </controls:DataGrid.Columns>
+        </controls:DataGrid>
     </Page.Resources>
 
     <Grid>
@@ -90,4 +98,4 @@
             </interactions:EventTriggerBehavior>
         </interactivity:Interaction.Behaviors>
     </Grid>
-</Page>
+</Page>

Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/DataGrid/DataGrid.cs

@@ -5729,6 +5729,7 @@ private void DataGrid_LostFocus(object sender, RoutedEventArgs e)
             {
                 bool focusLeftDataGrid = true;
                 bool dataGridWillReceiveRoutedEvent = true;
+                DataGridColumn editingColumn = null;
 
                 // Walk up the visual tree of the newly focused element
                 // to determine if focus is still within DataGrid.
@@ -5768,7 +5769,17 @@ private void DataGrid_LostFocus(object sender, RoutedEventArgs e)
                     focusedDependencyObject = parent;
                 }
 
-                if (focusLeftDataGrid)
+                if (this.EditingRow != null && this.EditingColumnIndex != -1)
+                {
+                    editingColumn = this.ColumnsItemsInternal[this.EditingColumnIndex];
+
+                    if (focusLeftDataGrid && editingColumn is DataGridTemplateColumn)
+                    {
+                        dataGridWillReceiveRoutedEvent = false;
+                    }
+                }
+
+                if (focusLeftDataGrid && !(editingColumn is DataGridTemplateColumn))
                 {
                     this.ContainsFocus = false;
                     if (this.EditingRow != null)