In questo tutorial di programmazione C #, mi concentrerò sui controlli avanzati come ComboBox, Grid e ListViews e ti mostrerò il modo in cui molto probabilmente li utilizzerai. Non sto toccando i dati e l'associazione fino a un tutorial successivo. Cominciamo con un semplice controllo, un ComboBox.
Al centro di una Combo c'è una raccolta di oggetti e il modo più semplice per popolare questo è trascinare una combo sullo schermo, selezionare le proprietà (se non riesci a visualizzare le finestre delle proprietà, fai clic su Visualizza nel menu in alto, quindi su Proprietà), trova gli elementi e fai clic sui puntini di sospensione pulsante. È quindi possibile digitare le stringhe, compilare il programma e trascinare verso il basso la combinazione per vedere le scelte.
Ora ferma il programma e aggiungi qualche altro numero: quattro, cinque.. fino a dieci. Quando lo esegui vedrai solo 8 perché è il valore predefinito di MaxDropDownItems. Sentiti libero di impostarlo su 20 o 3 e quindi eseguilo per vedere cosa fa.
È fastidioso che quando si apre dice comboBox1 e puoi modificarlo. Non è quello che vogliamo. Trova la proprietà DropDownStyle e cambia DropDown in DropDownList (è una combinazione!). Ora non c'è testo e non è modificabile. È possibile selezionare uno dei numeri ma si apre sempre in bianco. Come selezioniamo un numero con cui iniziare? Beh, non è una proprietà che puoi impostare in fase di progettazione, ma l'aggiunta di questa linea lo farà.
Aggiungi quella riga nel costruttore Form1 (). Devi visualizzare il codice per il modulo (in Esplora soluzioni, fai clic con il pulsante destro del mouse su From1.cs e fai clic su Visualizza codice. Trova InitializeComponent (); e aggiungi quella riga subito dopo.
Se imposti la proprietà DropDownStyle per la combo su Semplice ed esegui il programma non otterrai nulla. Non selezionerà, non farà clic o risponderà. Perché? Perché in fase di progettazione è necessario afferrare la maniglia di allungamento inferiore e rendere più alto l'intero controllo.
Nell'esempio 2, ho rinominato ComboBox in combo, ho cambiato il combo DropDownStyle di nuovo in DropDown in modo che possa essere modificato e aggiunto un pulsante Aggiungi chiamato btnAdd. Ho fatto doppio clic sul pulsante Aggiungi per creare un gestore eventi btnAdd_Click () e ho aggiunto questa riga di eventi.
Ora quando esegui il programma, digita un nuovo numero, pronuncia Eleven e fai clic su Aggiungi. Il gestore eventi prende il testo digitato (in combo. Testo) e lo aggiunge alla raccolta di oggetti del Combo. Fai clic sul Combo e ora abbiamo una nuova voce Eleven. È così che aggiungi una nuova stringa a un Combo. Rimuovere uno è leggermente più complicato in quanto è necessario trovare l'indice della stringa che si desidera rimuovere, quindi rimuoverlo. Il metodo RemoveAt mostrato di seguito è un metodo di raccolta per fare ciò. devi solo specificare quale elemento nel parametro Removeindex.
rimuoverà la stringa nella posizione RemoveIndex. Se nella combo sono presenti n elementi, i valori validi sono compresi tra 0 e n-1. Per 10 articoli, valori 0..9.
Se questo non trova il testo restituisce -1, altrimenti restituisce l'indice basato su 0 della stringa nell'elenco combo. C'è anche un metodo sovraccarico di FindStringExact che ti consente di specificare da dove iniziare la ricerca, quindi puoi saltare il primo ecc. Se hai duplicati. Questo potrebbe essere utile per rimuovere i duplicati in un elenco.
Facendo clic su btnAddMany_Click () si cancella il testo dalla combo, quindi si cancella il contenuto della raccolta di elementi combinati, quindi si chiama combo. AddRange (per aggiungere le stringhe dall'array dei valori. Dopo aver fatto ciò, imposta SelectedIndex del combo su 0. Questo mostra il primo elemento nella combo. Se stai eseguendo l'aggiunta o la cancellazione di elementi in una ComboBox, è meglio tenere traccia di quale elemento è selezionato. L'impostazione di SelectedIndex su -1 nasconde gli elementi selezionati.
Il pulsante Aggiungi lotti cancella l'elenco e aggiunge 10.000 numeri. Ho aggiunto combo. BeginUpdate () e combo, EndUpdate () chiama il ciclo per evitare che lo sfarfallio di Windows tenti di aggiornare il controllo. Sul mio PC di tre anni ci vuole poco più di un secondo per aggiungere 100.000 numeri alla combo.
Questo è un comodo controllo per la visualizzazione di dati tabulari senza la complessità di una griglia. Puoi visualizzare gli elementi come icone grandi o piccole, come un elenco di icone in un elenco verticale o più utilmente come un elenco di elementi e elementi secondari in una griglia ed è quello che faremo qui.
Dopo aver rilasciato un ListView in un modulo, fai clic sulla proprietà colonne e aggiungi 4 colonne. Questi saranno TownName, X, Y e Pop. Imposta il testo per ogni ColumnHeader. Se non riesci a vedere i titoli su ListView (dopo aver aggiunto tutti e 4), imposta la proprietà Visualizza di ListView su Dettagli. Se visualizzi il codice per questo esempio, scorri verso il basso fino a dove viene indicato il codice di Progettazione Windows Form ed espandi l'area in cui viene visualizzato il codice che crea ListView. È utile vedere come funziona il sistema e puoi copiare questo codice e usarlo da solo.
È possibile impostare manualmente la larghezza di ogni colonna spostando il cursore sull'intestazione e trascinandola. Oppure puoi farlo nel codice visibile dopo aver espanso l'area di progettazione del modulo. Dovresti vedere il codice in questo modo:
Per la colonna della popolazione, le modifiche al codice si riflettono nella finestra di progettazione e viceversa. Si noti che anche se si imposta la proprietà Locked su true, ciò influisce solo sul designer e in fase di esecuzione è possibile ridimensionare le colonne.
ListViews include anche una serie di proprietà dinamiche. Fare clic su (Proprietà dinamiche) e selezionare la proprietà desiderata. Quando si imposta una proprietà in modo che sia dinamica, crea un file XML .config e lo aggiunge a Esplora soluzioni.
Apportare modifiche in fase di progettazione è una cosa, ma dobbiamo davvero farlo quando il programma è in esecuzione. Un ListView è composto da 0 o più elementi. Ogni elemento (un oggetto ListView) ha una proprietà text e una raccolta SubItems. La prima colonna visualizza il testo dell'articolo, la colonna successiva visualizza SubItem [0] .text quindi SubItem [1] .text e così via.
Ho aggiunto un pulsante per aggiungere una riga e una casella di modifica per il nome della città. Immettere un nome qualsiasi nella casella e fare clic su Aggiungi riga. Ciò aggiunge una nuova riga a ListView con il nome della città inserito nella prima colonna e nelle successive tre colonne (SubItems [0..2]) sono popolati con numeri casuali (convertiti in stringhe) aggiungendo quelle stringhe a loro.
Ora imposta la proprietà ListView Multiselect su false. Vogliamo selezionare solo un elemento alla volta, tuttavia se desideri rimuoverne di più in una volta è simile, tranne per il fatto che devi scorrere al contrario. (Se esegui il ciclo in ordine normale ed elimini gli elementi, gli elementi successivi non sono sincronizzati con gli indici selezionati).
Il menu di scelta rapida non funziona ancora in quanto non è presente alcuna voce di menu. Quindi fai clic destro PopupMenu (sotto il modulo) e vedrai apparire il menu contestuale nella parte superiore del modulo in cui appare il normale editor di menu. Fai clic su di esso e su dove dice Digita qui, digita Rimuovi elemento. La finestra delle proprietà mostrerà un MenuItem in modo da rinominarlo in mniRemove. Fare doppio clic su questa voce di menu e si dovrebbe ottenere la funzione del codice del gestore eventi menuItem1_Click. Aggiungi questo codice in questo modo.
Se perdi di vista l'elemento Rimuovi, fai clic sul controllo PopupMenu da solo sotto il modulo nel modulo Designer. Ciò lo riporterà in vista.
Tuttavia, se lo esegui e non aggiungi un elemento e lo selezioni, quando fai clic con il pulsante destro del mouse sul menu e fai clic su Rimuovi elemento, verrà generata un'eccezione perché non è presente alcun elemento selezionato. È una cattiva programmazione, quindi ecco come risolverlo. Fare doppio clic sull'evento pop-up e aggiungere questa riga di codice.
Un DataGridView è il componente più complesso e più utile fornito gratuitamente con C #. Funziona con entrambe le origini dati (ad es. Dati da un database) e senza (ad es. Dati aggiunti a livello di programmazione). Per il resto di questo tutorial lo mostrerò usandolo senza Origini Dati. Per esigenze di visualizzazione più semplici potresti trovare un ListView semplice più adatto.
Se hai usato un vecchio controllo DataGrid, questo è solo uno di quelli sugli steroidi: ti dà più tipi di colonne incorporate, può funzionare con dati interni ed esterni, maggiore personalizzazione di display (ed eventi) e offre un maggiore controllo sulla gestione delle celle con il congelamento delle righe e colonne.
Quando si progettano moduli con i dati della griglia, è più comune specificare diversi tipi di colonna. Potresti avere caselle di controllo in una colonna, testo di sola lettura o modificabile in un'altra e numeri dei corsi. Questi tipi di colonna sono inoltre generalmente allineati in modo diverso con numeri generalmente allineati a destra in modo che i punti decimali siano allineati. A livello di colonna puoi scegliere tra Button, checkbox, ComboBox, Image, TextBox e Links. se quelli non bastano, puoi modificare i tuoi tipi personalizzati.
Il modo più semplice per aggiungere colonne è progettando nell'IDE. Come abbiamo visto prima, questo scrive solo il codice per te e quando lo hai fatto alcune volte potresti preferire di aggiungere il codice da solo. Una volta che lo hai fatto un paio di volte, ti fornisce approfondimenti su come farlo a livello di codice.
Iniziamo con l'aggiunta di alcune colonne, rilascia un DataGridView sul modulo e fai clic sulla piccola freccia nell'angolo in alto a destra. Quindi fai clic su Aggiungi colonna. Fallo tre volte. Apparirà una finestra di dialogo Aggiungi colonna in cui si imposta il nome della colonna, il testo da visualizzare nella parte superiore della colonna e consente di scegliere il tipo. La prima colonna è YourName ed è la casella di testo predefinita (dataGridViewTextBoxColumn). Imposta anche il testo dell'intestazione sul tuo nome. Crea la seconda colonna Età e usa un ComboBox. La terza colonna è consentita ed è una colonna CheckBox.
Dopo aver aggiunto tutti e tre, dovresti vedere una riga di tre colonne con una combo in quella centrale (Età) e una casella di controllo nella colonna Consentito. Se si fa clic su DataGridView, nella finestra di ispezione delle proprietà è necessario individuare le colonne e fare clic su (raccolta). Viene visualizzata una finestra di dialogo in cui è possibile impostare le proprietà per ogni colonna come singoli colori delle celle, testo della descrizione comandi, larghezza, larghezza minima ecc. Se compili ed esegui, noterai che puoi modificare la larghezza delle colonne e il tempo di esecuzione. Nella finestra di ispezione delle proprietà per DataGridView principale è possibile impostare AllowUser su resizeColumns su false per impedirlo.
Aggiungeremo righe al controllo DataGridView nel codice ed ex3.cs nel file di esempio ha questo codice. A partire dall'aggiunta di una casella TextEdit, una casella combinata e un pulsante al modulo con DataGridView su di esso. Impostare la proprietà DataGridView AllowUserto AddRows su false. Uso anche le etichette e ho chiamato la combobox cbAges, il pulsante btnAddRow e TextBox tbName. Ho anche aggiunto un pulsante Chiudi per il modulo e ho fatto doppio clic su di esso per generare uno scheletro del gestore eventi btnClose_Click. Aggiungendo la parola Close () lì funziona.
Per impostazione predefinita, la proprietà attivata del pulsante Aggiungi riga è impostata su false all'avvio. Non vogliamo aggiungere alcuna riga a DataGridView a meno che non ci sia Testo sia nella casella Nome TextEdit che nella casella combinata. Ho creato il metodo CheckAddButton e quindi ho generato un gestore di eventi Leave per la casella di modifica Text Name facendo doppio clic accanto alla parola Leave in Properties durante la visualizzazione degli eventi. La finestra delle proprietà mostra questo nella figura sopra. Per impostazione predefinita, la finestra Proprietà mostra le proprietà ma è possibile visualizzare i gestori di eventi facendo clic sul pulsante Lightning.
È possibile utilizzare invece l'evento TextChanged, sebbene questo chiamerà CheckAddButton () metodo per ogni pressione del tasto anziché quando viene lasciato il controllo, ovvero quando guadagna un altro controllo messa a fuoco. Nella combo Ages ho usato l'evento TextChanged ma ho selezionato il gestore eventi tbName_Leave invece di fare doppio clic per creare un nuovo gestore eventi.
Non tutti gli eventi sono compatibili perché alcuni eventi forniscono parametri aggiuntivi, ma se è possibile visualizzare un gestore precedentemente generato, sì, è possibile utilizzarlo. È principalmente una questione di preferenza, puoi avere un gestore di eventi separato per ogni controllo che sei usare o condividere i gestori di eventi (come ho fatto io) quando hanno una firma di evento comune, ovvero i parametri sono i stesso.
Ho rinominato il componente DataGridView in dGView per brevità e ho fatto doppio clic su AddRow per generare uno scheletro del gestore eventi. Questo codice seguente aggiunge una nuova riga vuota, ottiene l'indice delle righe (è RowCount-1 poiché è stato appena aggiunto e RowCount è 0 base) e quindi accede a quella riga tramite il suo indice e imposta i valori nelle celle su quella riga per le colonne YourName e Età.
Quando si progetta un modulo, è necessario pensare in termini di contenitori e controlli e quali gruppi di controlli devono essere tenuti insieme. Nelle culture occidentali, comunque, le persone leggono da In alto a sinistra a in basso a destra in modo da facilitare la lettura in quel modo.
Un contenitore è uno dei controlli che può contenere altri controlli. Quelli che si trovano nella Casella degli strumenti includono Panel, FlowLayoutpanel, SplitContainer, TabControl e TableLayoutPanel. Se non riesci a visualizzare la casella degli strumenti, utilizza il menu Visualizza e lo troverai. I contenitori tengono insieme i controlli e, se si sposta o si ridimensiona il contenitore, ciò influirà sul posizionamento dei controlli. Basta spostare i controlli sul contenitore in Progettazione moduli e riconoscerà che il contenitore è ora responsabile.
Un pannello è simile a un GroupBox ma un GroupBox non può scorrere ma può visualizzare una didascalia e ha un bordo per impostazione predefinita. I pannelli possono avere bordi ma per impostazione predefinita no. Uso GroupBox perché sono più belli e questo è importante perché:
I pannelli sono utili anche per raggruppare i contenitori, quindi potresti avere due o più GroupBox su un Pannello.
Ecco un consiglio per lavorare con i contenitori. Rilascia un contenitore diviso su un modulo. Fai clic sul pannello di sinistra, quindi su quello di destra. Ora prova a rimuovere SplitContainer dal modulo. È difficile finché non fai clic con il pulsante destro del mouse su uno dei pannelli, quindi fai clic su Seleziona SplitContainer1. Una volta selezionato tutto, puoi eliminarlo. Un altro modo che si applica a tutti i controlli e contenitori è premi il tasto Esc per selezionare il genitore.
Anche i contenitori possono annidarsi l'uno dentro l'altro. Basta trascinarne uno piccolo sopra uno più grande e vedrai apparire una sottile linea verticale per mostrare che uno è ora all'interno dell'altro. Quando si trascina il contenitore padre, il figlio viene spostato con esso. L'esempio 5 mostra questo. Per impostazione predefinita, il pannello marrone chiaro non si trova all'interno del contenitore, quindi quando si fa clic sul pulsante di spostamento, GroupBox viene spostato ma il pannello non lo è. Ora trascina il pannello sopra il GroupBox in modo che sia completamente all'interno del Groupbox. Quando si compila ed Esegui questa volta, facendo clic sul pulsante Sposta si spostano entrambi insieme.
Un TableLayoutpanel è un contenitore interessante. È una struttura di tabella organizzata come una griglia 2D di celle in cui ogni cella contiene un solo controllo. Non puoi avere più di un controllo in una cella. Puoi specificare come cresce la tabella quando vengono aggiunti più controlli o anche se non cresce, sembra modellata su una tabella HTML perché le celle possono estendersi su colonne o righe. Anche il comportamento di ancoraggio dei controlli figlio nel contenitore dipende dalle impostazioni Margine e Riempimento. Vedremo di più sulle ancore nella pagina successiva.
In Ex6.cs di esempio, ho iniziato con una tabella a due colonne di base e specificata tramite la finestra di dialogo Stili di controllo e stili di riga (selezionare il controllo e fare clic sul piccolo triangolo di puntamento a destra situato in alto a destra per visualizzare un elenco di attività e fare clic sull'ultima) che la colonna di sinistra è del 40% e la colonna di destra il 60% del larghezza. Ti consente di specificare le larghezze di colonna in termini di pixel assoluti, in percentuale o puoi semplicemente lasciarlo AutoSize. Un modo più rapido per accedere a questa finestra di dialogo è fare clic sulla raccolta accanto a Colonne nella finestra Proprietà.
Ho aggiunto un pulsante AddRow e lasciato la proprietà GrowStyle con il valore predefinito AddRows. Quando la tabella si riempie, aggiunge un'altra riga. In alternativa puoi impostare i suoi valori su AddColumns e FixedSize in modo che non possa più crescere. In Ex6, quando si fa clic sul pulsante Aggiungi controlli, chiama il metodo AddLabel () tre volte e AddCheckBox () una volta. Ogni metodo crea un'istanza del controllo e quindi chiama tblPanel. Controlli. Aggiungi () Dopo aver aggiunto il secondo controllo, il terzo controllo fa crescere la tabella. L'immagine lo mostra dopo aver fatto clic una volta sul pulsante Aggiungi controllo.
Nel caso ti stia chiedendo da dove provengono i valori predefiniti nei metodi AddCheckbox () e AddLabel () che chiamo, il controllo era originariamente aggiunto manualmente alla tabella nel designer e quindi il codice per crearlo e inizializzarlo è stato copiato all'interno di questo regione. Troverai il codice di inizializzazione nella chiamata del metodo InitializeComponent dopo aver fatto clic sul + a sinistra della regione di seguito:
È possibile selezionare più controlli contemporaneamente tenendo premuto il tasto Maiusc quando si selezionano i controlli secondari e successivi, anche controlli di tipi diversi. La finestra Proprietà mostra solo quelle proprietà comuni a entrambi, quindi puoi impostarle tutte sulla stessa dimensione, colore, campi di testo ecc. Anche gli stessi gestori di eventi possono essere assegnati a più controlli.
A seconda dell'uso, alcuni moduli finiranno per essere ridimensionati dall'utente. Non c'è niente di peggio che ridimensionare un modulo e vedere i controlli rimanere nella stessa posizione. Tutti i controlli hanno ancore che ti permettono di "attaccarli" ai 4 bordi in modo che il controllo si sposti o si allunghi quando viene spostato un bordo attaccato. Ciò porta al seguente comportamento quando un modulo viene allungato dal bordo destro:
Per pulsanti come Chiudi che sono tradizionalmente in basso a destra, il comportamento 3 è ciò che è necessario. ListViews e DataGridViews sono i migliori con 2 se il numero di colonne è sufficiente per overflow del modulo e necessita di scorrimento). Le ancore superiore e sinistra sono quelle predefinite. La finestra delle proprietà include un piccolo editor elegante che assomiglia alla bandiera inglese. Basta fare clic su una delle barre (due orizzontali e due verticali) per impostare o deselezionare l'ancoraggio appropriato, come mostrato nella figura sopra.
Una proprietà che non viene molto menzionata è la proprietà Tag e tuttavia può essere incredibilmente utile. Nella finestra delle proprietà puoi solo assegnare del testo ma nel tuo codice puoi avere qualsiasi valore che discenda dall'oggetto.
Ho usato Tag per contenere un intero oggetto mentre mostravo solo alcune delle sue proprietà in un ListView. Ad esempio, potresti voler solo mostrare un Nome cliente e un numero in un elenco Riepilogo clienti. Ma fai clic con il tasto destro sul cliente selezionato e quindi apri un modulo con tutti i dettagli del cliente. Ciò è semplice se si crea l'elenco clienti leggendo tutti i dettagli del cliente in memoria e assegnando un riferimento all'oggetto Classe cliente nel tag. Tutti i controlli hanno un tag.
Un TabControl è un modo pratico per salvare lo spazio del modulo avendo più schede. Ogni scheda può avere un'icona o un testo ed è possibile selezionare qualsiasi scheda e visualizzarne i controlli. TabControl è un contenitore ma contiene solo TabPages. Ogni TabPage è anche un contenitore a cui possono essere aggiunti normali controlli.
Nell'esempio x7.cs, ho creato un pannello di due schede con la prima scheda denominata Controlli con tre pulsanti e una casella di controllo su di esso. La seconda scheda è etichettata Registri e utilizzata per visualizzare tutte le azioni registrate, tra cui il clic su un pulsante o la selezione di una casella di controllo. Viene chiamato un metodo chiamato Log () per registrare ogni clic sui pulsanti, ecc. Aggiunge la stringa fornita a un ListBox.
Ho anche aggiunto due voci del menu a comparsa del tasto destro al TabControl nel solito modo. Aggiungere innanzitutto un ContextMenuStrip al modulo e impostarlo nella proprietà ContextStripMenu di TabControl. Le due opzioni di menu sono Aggiungi nuova pagina e Rimuovi questa pagina. Tuttavia, ho limitato la rimozione della Pagina in modo da poter rimuovere solo le nuove schede aggiunte e non le due originali.
È facile, basta creare una nuova scheda, assegnarle una didascalia di testo per la scheda, quindi aggiungerla alla raccolta TabPages della scheda TabControl
Rimuovere una pagina è solo una questione di chiamare TabPages. RemoveAt (), utilizzando le schede. SelectedIndex per ottenere la scheda attualmente selezionata.
In questo tutorial abbiamo visto come funzionano alcuni dei controlli più sofisticati e come usarli. Nel prossimo tutorial continuerò con il tema della GUI e guarderò il thread di lavoro in background e mostrerò come usarlo.