Enhance DataGrid Sample

Author: michael-hawker

Microsoft.Toolkit.Uwp.SampleApp/Assets/mtns.csv

@@ -149,7 +149,7 @@ public string Parent_mountain
 
         public uint Prominence { get; set; }
 
-        public uint First_ascent { get; set; }
+        public DateTimeOffset First_ascent { get; set; }
 
         public string Ascents { get; set; }
 

Microsoft.Toolkit.Uwp.SampleApp/Data/DataGridDataItem.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/Data/DataGridDataSource.cs

@@ -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/DataGridCode.bind

@@ -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

@@ -42,7 +42,7 @@ public async void OnXamlRendered(FrameworkElement control)
                 dataGrid.LoadingRowGroup += DataGrid_LoadingRowGroup;
                 dataGrid.ItemsSource = await viewModel.GetDataAsync();
 
-                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();

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

@@ -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>