question

BitSmithy-4663 avatar image
0 Votes"
BitSmithy-4663 asked ·

[UWP] [EF] How to format DateTime column in UWP DataGrid

Hello,


I have DataGrid, and I use AutoGenerateColumns=true;
For getting data from SQLite database I use EntityFramework (EF)

How to format DataTime kolumn? I want CreateDate column to be formated as "YYYY/MM/DD"
Below I shows my DbContext, and class definition.


 public class MyClassDbContext : DbContext 
 {
     public string connectionString;

     public DbSet<MyClass > Passes { get; set; }

     protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
     {
         optionsBuilder.UseSqlite(connectionString);
     }
 }


 public class MyClass : INotifyPropertyChanged
 {
     [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
     public int Id{get; set;}

     public DateTime CreateDate{get; set;}

}

windows-uwp
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered ·

Hi,
you can use converter like in following demo.

XAML:

 <Page
     x:Class="App1.Page01"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:App01"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
   <Page.DataContext>
     <local:ViewModel/>
   </Page.DataContext>
   <Page.Resources>
     <local:DateConverter x:Key="conv"/>
   </Page.Resources>
   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <controls:DataGrid ItemsSource="{Binding View}" AutoGenerateColumns="False">
       <controls:DataGrid.Columns>
         <controls:DataGridTextColumn Binding="{Binding CreateDate, Converter={StaticResource conv}}"/>
       </controls:DataGrid.Columns>
     </controls:DataGrid>
   </Grid>
 </Page>

And classes:

 using System;
 using System.Collections.Generic;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Data;
    
 namespace App01
 {
   public class ViewModel
   {
     public ViewModel() => LoadData();
    
     List<Data> col = new List<Data>();
     public List<Data> View { get => col; }
    
     private void LoadData()
     {
       for (int i = 1; i < 10; i++) col.Add(new Data() { Id = i, CreateDate = DateTime.Now.AddDays(i) });
     }
   }
   public class Data
   {
     public int Id { get; set; }
     public DateTime CreateDate { get; set; }
   }
    
   public class DateConverter : IValueConverter
   {
     public object Convert(object value, Type targetType, object parameter, string language)
     {
       var d = value as DateTime?;
       if (!d.HasValue) return value;
       return d.Value.ToString("yyyy/MM/dd");
     }
    
     public object ConvertBack(object value, Type targetType, object parameter, string language)
     {
       throw new NotImplementedException();
     }
   }
 }


· 4 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,

It is fine solution, but as I mentioned, I use autogenerate columns.
So how to set converter on column during autocolumngeneration process?




0 Votes 0 ·

Hi,
you can use AutoGeneratingColumn event like in following demo.

 using Microsoft.Toolkit.Uwp.UI.Controls;
 ...    
 public class DataGridBehavior : Behavior<DataGrid>
 {
   protected override void OnAttached() { AssociatedObject.AutoGeneratingColumn += AssociatedObject_AutoGeneratingColumn; }
   private void AssociatedObject_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
   {
     var col = e.Column as DataGridTextColumn;
     if (col != null && col.Header.ToString() == "CreateDate") col.Binding.Converter = new DateConverter();
   }
 }
    
 <Page x:Class="App1.Page01"
 ...
   xmlns:i="using:Microsoft.Xaml.Interactivity"
 ...
   <controls:DataGrid ItemsSource="{Binding View}">
     <i:Interaction.Behaviors>
       <local:DataGridBehavior/>
     </i:Interaction.Behaviors>
   </controls:DataGrid>
 ...
0 Votes 0 ·

I did it simplier (look below) and It works.
The only problem is that Date is shown as rrrr.mm.dd (should be rrrr/mm/dd) but this is acceptable.


private void dgPasses_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
if(e.PropertyName == "CreateDate")
{
var col = e.Column as DataGridTextColumn;
if (col != null)
col.Binding.Converter = new DateConverter();
}
}

0 Votes 0 ·
Show more comments