fix: Prevent focus reset for DataGridTemplateColumn (#4206)

<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 -->

<!-- 👉 It is imperative to resolve ONE ISSUE PER PR and avoid making multiple changes unless the changes interrelate with each other --> 

<!-- 📝 Please always keep the "☑️ Allow edits by maintainers" button checked in the Pull Request Template as it increases collaboration with the Toolkit maintainers by permitting commits to your PR branch (only) created from your fork. This can let us quickly make fixes for minor typos or forgotten StyleCop issues during review without needing to wait on you doing extra work. Let us help you help us! 🎉 -->

### Note: This is a copy of the previously reviewed work with a new branch name
## Fixes #2493
<!-- Add the relevant issue number after the "#" mentioned above (for ex: "## Fixes #1234") which will automatically close the issue once the PR is merged. -->

<!-- Add a brief overview here of the feature/bug & fix. -->
This prevents DataGrid from assuming focus should be reset back to itself when a control inside DataGridTemplateColumn gains focus. This is my first WCT PR, so please go easy on me 😆 
## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more options below that apply to this PR. -->
Bugfix 
<!-- - -->
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
Trying to open a control like CalendarDatePicker from within a DataGridTemplateColumn doesn't work, as there is specific behavior to detect when DataGrid loses focus and return it. This doesn't make much sense for controls which require focus to function properly.

## What is the new behavior?
<!-- Describe how was this issue resolved or changed? -->
When the DataGrid loses focus, we now specifically detect if the editing column is a DataGridTemplateColumn and alter the behavior to accommodate this.

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: <!-- docs PR link -->
- [ ] Sample in sample app has been added / updated (for bug fixes / features)
    - [ ] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/CommunityToolkit/WindowsCommunityToolkit-design-assets)
- [ ] New major technical changes in the toolkit have or will be added to the [Wiki](https://github.com/CommunityToolkit/WindowsCommunityToolkit/wiki) e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [x] Contains **NO** breaking changes

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below.
     Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->


## Other information
I'm unsure if this is the *best* way to do this, but it makes the most sense given how DataGrid already has the capability to detect the editing element and column type.
Additional context before branch rename: #4206
Related: unoplatform/uno#6543

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)