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à 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
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
MonthCalendarcome mostrato nella screenshot seguente:
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
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 !!!