WPF - Embutindo um DatePicker em uma coluna de um controle DataGrid


 No artigo de hoje eu vou mostrar como podemos usar um controle DataPicker disponível no WPF ToolKit em um controle DataGrid.


O componente DataGrid da WPF faz parte do WPF ToolKit e já esta incorporado nas versões mais recentes da plataforma .NET.

 

Se você estiver usando a versão 3.5 deve seguir os seguintes passos para poder usar o componente:

Um controle DatePicker é usado para criar um calendário visual que permite o usuário escolher uma data e acionar um evento sobre a seleção da data.

O controle DatePicker esta definido no namespace System.Windows.Controls e é representado no código XAML pelo elemento DatePicker : <DatePicker/>

Eu já mostrei em outros artigos como usar o componente DataGrid (veja as referências) e nesse artigo eu vou mostrar como incorporar um controle DatePicker em uma coluna de um controle DataGrid.

No exemplo eu vou criar uma classe para fornecer os dados que serão exibidos no DataGrid para simplificar o código.

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for windows desktop

Abra o VS 2013 Express for windows desktop e clique em New Project;

Selecione a linguagem Visual C# e o template WPF Application;

Informe o nome Wpf_CalendarioGrid e clique no botão OK;

 

Vamos criar uma classe chamada ProdutoInfo em nosso projeto.

 

Clique no menu PROJECT-> Add Class e informe o nome ProdutoInfo.

 

A seguir defina o seguinte código nesta classe:

 

C#' VB .NET
using System;
namespace Wpf_CalendarioGrid
{
    public class ProdutoInfo
    {
        public int Id { get; set; }
        public string Produto { get; set; }
        public string Cliente { get; set; }
        public DateTime DataPedido { get; set; }
    }
}
Imports System
Public Class ProdutoInfo
	Public Property Id() As Integer
	Public Property Produto() As String
	Public Property Cliente() As String
	Public Property DataPedido() As DateTime
End Class

 

 

Agora vamos abrir o arquivo MainWindow.xaml e vamos definir o código abaixo neste arquivo:

 

<Window x:Class="Wpf_CalendarioGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Lista de Pedidos" Height="450" Width="625">
 <Grid>
     <DataGrid Name="grdPedidos" AutoGenerateColumns="False">

         <DataGrid.Columns>
             <DataGridTextColumn Header="ID" Width="50" Binding="{Binding Id}"/>
             <DataGridTextColumn Header="Produto" Width="150" Binding="{Binding Produto}"/>
             <DataGridTextColumn Header="Cliente" Width="100" Binding="{Binding Cliente}"/>

             <DataGridTemplateColumn Header="Data do Pedido" Width="200" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding DataPedido}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <DatePicker SelectedDate="{Binding DataPedido}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
              </DataGridTemplateColumn>
         </DataGrid.Columns>

        </DataGrid>
    </Grid>
</Window>

 

Neste código estamos criando um DataTemplate que será ativado quando estivermos no modo de edição de dados, onde definimos o controle DataPicker vinculando ao campo DataPedido da classe ProdutoInfo.

 

Este código irá exibir o seguinte leiaute :

 

 

Após isso vamos abrir o arquivo MainWindow.xaml.cs e digitar o código abaixo neste arquivo:

using System.Windows;
using System.Windows.Documents;
namespace Wpf_CalendarioGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            preencheGrid();
        }
        public void preencheGrid()
        {
            List<ProdutoInfo> listaPedidos = new List<ProdutoInfo>
            {
                new ProdutoInfo{ Id= 1, Produto="Mouse", Cliente="Macoratti", DataPedido = DateTime.Now.AddDays(-2) },
                new ProdutoInfo{ Id= 1, Produto="Teclado Wireless", Cliente="Jefferson", DataPedido = DateTime.Now.AddDays(-1) },
                new ProdutoInfo{ Id= 1, Produto="Caixa de Som", Cliente="Janice", DataPedido = DateTime.Now.AddDays(-3) },
                new ProdutoInfo{ Id= 1, Produto="Web Cam Microsoft", Cliente="Jessica", DataPedido = DateTime.Now.AddDays(0) }
            };
            grdPedidos.ItemsSource = listaPedidos;
        }
    }
}
 C#

		
Public Partial Class MainWindow
	Inherits Window
	Public Sub New()
		InitializeComponent()
		preencheGrid()
	End Sub
	Public Sub preencheGrid()
		Dim listaPedidos As New List(Of ProdutoInfo)() From { _
			New ProdutoInfo() With { _
				.Id = 1, .Produto = "Mouse", .Cliente = "Macoratti",  .DataPedido = DateTime.Now.AddDays(-2) _
			}, _
			New ProdutoInfo() With { _
				.Id = 1, .Produto = "Teclado Wireless", .Cliente = "Jefferson", .DataPedido = DateTime.Now.AddDays(-1) _
			}, _
			New ProdutoInfo() With { _
				.Id = 1, .Produto = "Caixa de Som", .Cliente = "Janice", .DataPedido = DateTime.Now.AddDays(-3) _
			}, _
			New ProdutoInfo() With { _
				.Id = 1, 	.Produto = "Web Cam Microsoft", .Cliente = "Jessica", .DataPedido = DateTime.Now.AddDays(0) _
			} _
		}
		grdPedidos.ItemsSource = listaPedidos
	End Sub
End Class
VB .NET

Este código cria uma lista de pedidos que será usada como fonte de dados para o nosso DataGrid.

Usamos o método ItemsSource do DataGrid para vincular os dados ao controle.

Executando o projeto iremos obter o seguinte resultado após editar a coluna Data do Pedido:

Pegue o projeto completo aqui:   Wpf_CalendarioGrid.zip

Todavia digo-vos a verdade, que vos convém que eu vá; porque, se eu não for, o Consolador não virá a vós; mas, quando eu for, vo-lo enviarei.
E, quando ele vier, convencerá o mundo do pecado, e da justiça e do juízo.

João 16:7-8

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti