Home Page Home Page Articoli Come creare un DateTimePicker personalizzato (ExtDtp)

Come creare un DateTimePicker personalizzato (ExtDtp)

In questo Tutorial viene spiegato come è possibile creare un controllo personalizzato (Custom Control) con Visual Studio .NET. In particolare verrà creata una versione del DateTimePicker con funzionalità aggiuntive rispetto a quello classico offerto da Microsoft.
Autore: Gianpiero Carrozzo Livello:
Chiunque abbia usato il controllo DateTimePicker si sarà accorto che la gestione dell'anno è poco intuitiva e anche un poco disagevole. Si provi infatti a selezionare, con un normale DateTimePicker la data "10/10/1974"; per farlo occorre ciccare sul testo dell’anno, (cosa di per se già poco spontanea), e scorrere il controllo NumericUpDown all'indietro finché appunto non si raggiunge il 1974. Converrete che la cosa non è ne comoda ne, se non si conosceva già il controllo, di immediata comprensione.

Lo UserControl che presento e che ho chiamato ExtendedDataTimePicker (ExtDtp) permette di scegliere direttamente l'anno attraverso la semplice selezione dei valori di una Combo Box. In generale il presente lavoro può essere visto come un esercizio alla costruzione di uno User Control personalizzato.

Vediamo ora come si presenta ExtDtp. La filosofia è la stessa del DateTimePicker: vi è una visualizzazione di presentazione, (quando il controllo è in fase "riposo" e visualizza semplicemente una data), e una di selezione, (ossia l'interfaccia che appare quando l'utente decide di selezionare una data). Le figure che seguono illustrano come l'ExtDtp si presenta in entrambe le visualizzazioni.

ExtDtp in modalità presentazione
ExtDtp in modalità presentazione


ExtDtp in modalità selezione
ExtDtp in modalità selezione


Per passare da una visualizzazione a all'altra basta semplicemente fare click sul pulsante che in entrambe le figure è cerchiato in verde.

La selezione del giorno e quella del mese avvengono in modo identico a quanto accade per il DateTimePicker ciò che varia è la selezione dell'anno. Come si può osservare in Figura 2, quando il controllo è in fase di selezione, nella sua parte superiore è presente una Combo Box dalla quale è possibile selezionare l’anno. La figura seguente mostra come avviene la selezione dell'anno.

Selezione dell'anno
Selezione dell'anno


Vediamo ora come fare a costruire il controllo.
Aprire da Visual Studio .NET un nouvo progetto di tipo WindowsControlLibrary. Aprire lo UserControl1 che associato al progetto in modalità di progettazione ed inserire all'interno un controllo Panel all'interno del quale aggiungere i seguenti controlli:

- una Combo Box
- una Label
- un TextBox
- un Button
- un MonthCalendar

come mostrato nella screenshot seguente:

Controlli dell' ExtDtp
Controlli dell' ExtDtp


Settare a true la proprietà ReadOnly della Text Box.
La fase successiva è quella di inserire sotto allo UserControl il codice in modo da sincronizzare tra loro i vari controlli.
Prima di tutto occorre definire una variabile privata globale di tipo DateTime che chiameremo _value:


public DateTime _value=new DateTime(1,1,1);


e poi aggiungere la relativa property


public DateTime Valore {
get { return _value; }
set {
_value=value;
textBox1.Text=_value.ToShortDateString();
monthCalendar1.SetDate(_value);
monthCalendar1.SelectionRange.Start=_value;
monthCalendar1.TodayDate=_value;
}
}


La variabile Valore è il corrispondente di Value del DateTimePicker e rappresenterà, a controllo ultimato, la proprietà che dovrà essere interrogata per conoscere la data attiva nel controllo, (ossia la data selezionata).

All'interno del costruttore del controllo occorre aggiungere il seguente codice:


// la combo viene popolata con gli anni che vanno dal 1900 al 2100
for (int i=1900; i<2100; i++) {
cmbAnni.Items.Add(i.ToString());
if(DateTime.Now.Year==i) cmbAnni.Text=i.ToString();
}

// il textbox e l’attributo Value sono settati sul valore della data odierna
textBox1.Text=monthCalendar1.TodayDate.ToShortDateString();
Value=Value=monthCalendar1.TodayDate;


Sotto al metodo associato all'evento SelectedValueChanged della Combo Box occorre inserire il codice che serve a settare la data del MonthCalendar in modo che l'anno corrisponda a quello selezionato nella combo. Di seguito è mostrato il metodo associato all’evento SelectedValueChanged.


private void cmbAnni_SelectedValueChanged(object sender, System.EventArgs e)
{
int diff=Convert.ToInt32(cmbAnni.Text)-monthCalendar1.TodayDate.Year;
DateTime t= monthCalendar1.TodayDate.AddYears(diff);
monthCalendar1.SetDate(t);
}


Infine sotto all'evento Click del Button bisogna inserire il codice che serve a realizzare l'espansione e la compressione del controllo. Di seguito è mostrato il metodo associato all’evento Click.


private void button1_Click(object sender, System.EventArgs e)
{
Size s=new Size(176,192);
if (panel1.Size==s) {
panel1.Size=new Size(152,24);
this.Size=new Size(152,24);
button1.Text="+";
textBox1.Visible=true;
// setta il valore del textbox alla data selezionata in monthCalendar1 textBox1.Text=monthCalendar1.SelectionRange.Start.ToShortDateString();
Value=monthCalendar1.SelectionRange.Start;
}
else {
panel1.Size=new Size(176,192);
this.Size=new Size(176,192);
button1.Text="-";
textBox1.Visible=false;
}

}


L'ultima operazione da fare è sistemate i vari controlli del ExtDtp in modo che occupino poco spazio. L'obiettivo è che a cose fatte il controllo assuma un layout molto vicino a quello del DateTimePicker.
Per ciò occorre sovrapporre alla Label e al Combo Box il Text Box e il Button in modo che i primo due siano completamente nascosti. Quindi ridurre le dimensioni dello UserControl in modo che alla fine siano visibili soltanto la Text Box e il Button, come mostrato di seguito:

Come ExtDtp si presenta alla fine della costruzione
Come ExtDtp si presenta alla fine della costruzione


A questo compilare il progetto e il gioco è fatto.

Per usare il controllo in altri progetti ci sono due modi:

Il primo consiste nell'inserire il controllo nel gruppo Controlli utente della Casella degli Strumenti; per farlo: aprire la Casella degli Strumenti, selezionare controlli utente, fare click destro col mouse su di esse e sceglire aggiungi/Rimuovi elementi dal popup menù che compare. Apparirà la finestra Personalizza Casella degli Strumenti, in questa selezionare il tab Componenti di .NET Framework e ciccare sul tasto Sfoglia, quindi selezionare il percorso necessario a raggiungere la dll del processo appena creato, (se non avete fatto alcuna modifica la dll sarà nella directory …\nomeprogetto\bin\Debug).

La seconda modalità è quella di aggiungere il progetto del nostro User Control alla Solution del progetto in cui si intende utilizzare il controllo.
In entrambi i casi il controllo apparirà tra i controlli di Controlli utente della "Casella degli Strumenti". Sarà sufficiente fare il Drag&Drop del controllo all'interno dei controlli, (Form, Panel, altri controlli), in cui lo si vuole usare.

A questo punto è veramente tutto. Buon divertimento !!!

Voto medio articolo: 1.8 Numero Voti: 5

File allegati


135_ExtDtp.zip (65 Kbyte)
Gianpiero Carrozzo

Gianpiero Carrozzo

Profilo completo

Articoli collegati

Creare menù personalizzati con icone con .NET
Le applicazioni più evolute come Office sono state le prime a far uso di menù con le icone. Visual Studio .NET non ha un componente menù così evoluto, ed è necessario quindi implementarlo manualmente, vediamo come si può fare.
Autore: Stefano Passatordi | Difficoltà: | Commenti: 1 | Voto:
Costruzione di un controllo personalizzato (Windows Control)
In questo articolo trovate le istruzioni passo passo per poter costruire un oggetto/controllo personalizzato da poter utilizzare nelle vostre applicazioni windows.
Autore: David De Giacomi | Difficoltà: | Commenti: 2 | Voto:
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5