La creazione di applicazioni per Windows, file eseguibile, richiede anche attenzione nella creazione dell’interfaccia grafica, permettendo di rendere le varie schermate (form) più amichevoli possibili e soprattutto di facile utilizzo.
Realizzare software non è semplice, ma oltre alla funzionalità e stabilità di un programma, conta anche il suo utilizzo per non rendere complicata la gestione dei dati all’utente finale.
In questo articolo, si affronterà come spostarsi da una casella di testo all’altra tramite le frecce di direzione, ma anche quando la casella di testo riceve lo stato attivo risaltandolo cambiarndo lo sfondo. Questo approccio per fornire un utilizzo sempre più amichevole e di facile utilizzo, il tutto sarà utilizzando la tecnologia .Net 6 con il linguaggio di programmazione C# per progetti di tipo Windows Application con l’ambiente di sviluppo Visual Studio 2022 Community. Il codice e la realizzazione di tale progetto può essere fatto anche con versioni precedenti.
Creazione del progetto
Si apra Visual Studio 2022 Community e si crea un nuovo progetto di tipo “App Windows Forms” con la versione del Framework 6.
Dopo aver impostato il nome del progetto, la scelta della versione del Framework, verrà visualizzata la form.
Aggiungiamo alla form 6 controlli di tipo “textbox” e 6 controlli di tipo “Label” quest'ultime rappresentano il titolo, il tutto come rappresentato in figura 1.
Figura 1 – La disposizione dei controlli caselle di testo e label
Vedremo come nel digitare il pulsante freccia a destra, lo stato attivo passerà al controllo successivo, situato sulla destra, mentre viceversa con il pulsante freccia sinistra.
Dopo inserito le caselle di testo, nella prima casella di testo, impostiamo la proprietà “TabIndex” a valore 0, quella successiva a 1 e via continuando per tutte le caselle di testo. La proprietà “TabIndex” fornisce l’indice progressivo di ordinamento nello spostarsi tra un controllo e l’altro.
L’ordinamento delle caselle dev’essere progressivo come riportato in figura 2.
Figura 2 – L’ordinamento progressivo delle caselle di testo
Stesura del codice
Terminata la progettazione e disegno dell’interfaccia grafica della nostra form, non resta che scrivere il codice per gestire la gestione dell’interfaccia, in particolar modo, digitando i pulsanti freccia destra e freccia sinistra, di spostarsi rispettivamente avanti ed indietro, ed appena ottenuto lo stato attivo rendere la casella evidenziata con lo sfondo giallo, il tutto come mostrato in figura 3.
Figura 3 – La gestione degli eventi per le caselle di testo
Passiamo in visualizzare codice, e scriviamo un metodo che alla pressione del pulsante verificherà il tipo di pulsante digitato, nel caso che è la freccia destra, si sposterà al controllo successo, al contrario se è freccia di sinistra, al controllo precedente.
Tramite il metodo “SelectNextControl” della classe form, possiamo spostare il focus al precedente o successivo controllo.
Si riporta il codice delle suddette operazioni che sarà utilizzato da tutti i controlli nell’evento KeyDown.
C#
private void textBox1_KeyDown(object sender, KeyEventArgs e)
{
if (e.KeyCode == Keys.Left)
{
this.SelectNextControl((Control)sender, false, true, true, true);
}
else if (e.KeyCode == Keys.Right)
{
this.SelectNextControl((Control)sender, true, true, true, true);
}
}
Ora passiamo in visualizza grafica della nostra form, e tramite la finestra delle proprietà, nella sezione eventi, per ogni controllo di tipo casella di testo, nell’evento “KeyDown”, selezioniamo il metodo che abbiamo appena creato, il tutto come mostrato in figura 4.
Figura 4 – La selezione del metodo appena creato per l’evento KeyDown
In questo modo per ogni controllo viene eseguito il metodo creato, permettendo di scrivere una volta sola il codice ed utilizzandolo in tutti i 6 controlli.
Ritorniamo in modalità codice, e scriviamo il codice che una volta ricevuto lo stato attivo il controllo di tipo “Casella di testo” lo sfondo diventa giallo chiaro.
Questo avviene nell’evento “Enter” che per ogni controllo deve eseguire un metodo che imposta la proprietà backcolor a giallo, il tutto come riportato nel frammento di codice qui di seguito.
C#
private void textBox1_Enter(object sender, EventArgs e)
{
((TextBox)sender).BackColor = Color.Yellow;
}
Ora passiamo in visualizzazione grafica e nella finestra delle proprietà per l’evento “Enter” selezioniamo il metodo appena creato, il tutto come mostrato in figura 5.
Figura 5 – La selezione del metodo per cambiare il colore dello sfondo della casella di testo.
Siamo giunti all’ultimo frammento di codice, quello relativo di ripristinare la proprietà “BackColor” con il colore iniziale, ossia bianco.
Questo metodo verrà eseguito nei vari controlli di caselle testo per l’evento “leave”.
Qui di seguito il codice delle suddette operazioni.
C#
private void textBox1_Leave(object sender, EventArgs e)
{
((TextBox)sender).BackColor = Color.White;
}
A questo punto passiamo in visualizzazione grafica e nella finestra delle proprietà, selezioniamo l’evento “Leave” impostando il metodo appena creato, il tutto come riportato in figura 6.
Figura 6 – La selezione del metodo per cambiare il colore delle caselle di testo.
Conclusioni
L’articolo ha fornito una tecnica di come rendere le applicazioni di tipo “Windows Forms” ossia eseguibili con interfaccia grafica, con un approccio amichevole per l’utente, e soprattutto rendere il suo utilizzo ottimizzato.
La realizzazione di applicazione, oltre al codice con ottime prestazioni e funzionante, occorre curare anche l’aspetto del suo utilizzo, sia per progetti di tipo web e sia per progetti di tipo windows application, evitando che l’utente possa trovare difficoltà o stress dal relativo utilizzo.