În acest tutorial de programare C #, mă voi concentra pe controalele avansate, cum ar fi ComboBoxes, Grids și ListViews și vă voi arăta modul în care le veți folosi cel mai probabil. Nu ating datele și nu sunt obligatorii decât un tutorial ulterior. Să începem cu un control simplu, un ComboBox.
În centrul unui Combo se află o colecție de articole și cel mai simplu mod de a popula acest lucru este să aruncați o combo pe ecran, să selectați proprietăți (dacă nu puteți vedea ferestrele de proprietăți, faceți clic pe Afișați în meniul superior și apoi Fereastra proprietăți), găsiți elemente și faceți clic pe elipsuri buton. Puteți apoi să tastați șirurile, să compilați programul și să trageți combo în jos pentru a vedea alegerile.
Acum oprește programul și adaugă încă câteva numere: patru, cinci.. până la zece. Când o rulați, veți vedea doar 8, deoarece aceasta este valoarea implicită a MaxDropDownItems. Simțiți-vă liber să-l setați pe 20 sau 3 și apoi executați-l pentru a vedea ce face.
Este enervant faptul că atunci când se deschide, spune comboBox1 și îl poți edita. Nu asta ne dorim. Găsiți proprietatea DropDownStyle și schimbați DropDown în DropDownList. (Este o Combo!). Acum nu există text și nu este modificabil. Puteți selecta unul dintre numere, dar se deschide întotdeauna necompletat. Cum selectăm un număr cu care să începem? Ei bine, nu este o proprietate pe care o puteți seta la momentul proiectării, dar adăugarea acestei linii va face asta.
Adăugați această linie în constructorul Form1 (). Trebuie să vizualizați codul formularului (în Exploratorul de soluții, faceți clic dreapta pe From1.cs și faceți clic pe View Code. Găsiți InitializeComponent (); și adăugați această linie imediat după aceasta.
Dacă setați proprietatea DropDownStyle pentru combo pe Simplu și rulați programul nu veți primi nimic. Nu va selecta sau face clic sau nu va răspunde. De ce? Deoarece la timpul de proiectare, trebuie să apucați mânerul de întindere inferior și să faceți mai mare controlul.
În exemplul 2, am redenumit ComboBox în combo, am schimbat comoda DropDownStyle înapoi la DropDown, astfel încât să poată fi editat și adăugat un buton Add, numit btnAdd. Am dat dublu clic pe butonul Adăugare pentru a crea un eveniment btnAdd_Click () gestionar de evenimente și am adăugat această linie de eveniment.
Acum, când rulați programul, tastați un număr nou, spuneți Eleven și faceți clic pe Adăugare. Administratorul de evenimente ia textul pe care l-ați introdus (în combo. Text) și îl adaugă la colecția de articole Combo. Faceți clic pe Combo și avem acum o nouă intrare Eleven. Așa adăugați un nou șir la o Combo. Pentru a elimina unul este ceva mai complicat, deoarece trebuie să găsiți indexul șirului pe care doriți să îl eliminați, apoi eliminați-l. Metoda RemoveAt prezentată mai jos este o metodă de colectare pentru a face acest lucru. trebuie doar să specificați ce element din parametrul Removeindex.
va elimina șirul în poziția RemoveIndex. Dacă există n elemente în combo, atunci valorile valabile sunt de la 0 la n-1. Pentru 10 articole, valorile 0..9.
Dacă acest text nu găsește textul, acesta se întoarce -1, altfel returnează indexul 0 bazat pe șirul din lista combo. Există, de asemenea, o metodă supraîncărcată de FindStringExact care vă permite să specificați de unde începeți căutarea, astfel încât să puteți săriți primul, etc, dacă aveți duplicate. Acest lucru poate fi util pentru eliminarea duplicatelor dintr-o listă.
Făcând clic pe btnAddMany_Click (), se elimină textul din combo, apoi se șterge conținutul colecției de articole combo, apoi se apelează la combo. AddRange (pentru a adăuga șirurile din tabloul de valori. După ce face acest lucru, setează SelectedIndex combo la 0. Acesta arată primul element din combo. Dacă efectuați adăugarea sau ștergerea articolelor dintr-un ComboBox, atunci este mai bine să urmăriți ce element este selectat. Setarea SelectedIndex pe -1 ascunde elementele selectate.
Butonul Adaugă loturi șterge lista și adaugă 10.000 de numere. Am adăugat combo. BeginUpdate () și combo, EndUpdate () apelează în jurul buclei pentru a împiedica orice licărire din Windows încearcă să actualizeze controlul. Pe computerul meu vechi de trei ani este nevoie de puțin peste o secundă pentru a adăuga 100.000 de numere în combo.
Acesta este un control util pentru afișarea datelor tabulare fără complexitatea unei grile. Puteți afișa elemente ca pictograme mari sau mici, ca o listă de icoane într-o listă verticală sau cel mai util ca listă de elemente și subiteme într-o grilă și asta vom face aici.
După ce renunțați la ListView pe un formular, faceți clic pe proprietatea coloanelor și adăugați 4 coloane. Acestea vor fi TownName, X, Y și Pop. Setați textul pentru fiecare ColumnHeader. Dacă nu puteți vedea rubricile din ListView (după ce ați adăugat toate 4), setați Proprietatea Vizualizare ListView la Detalii. Dacă vedeți codul pentru acest exemplu, căutați în jos până unde spune codul Windows Form Designer și extindeți regiunea în care vedeți codul care creează ListView. Este util să vezi cum funcționează sistemul și poți copia acest cod și să-l folosești singur.
Puteți seta manual lățimea pentru fiecare coloană manual mutând cursorul peste antet și glisându-l. Sau puteți face acest lucru în codul vizibil după ce ați extins regiunea proiectantului de formular. Ar trebui să vedeți codul astfel:
Pentru coloana de populație, modificările codului sunt reflectate în proiectant și invers. Rețineți că, chiar dacă setați adevărata proprietate Blocat, acest lucru afectează doar proiectantul și la timpul de execuție puteți redimensiona coloanele.
ListViews oferă și o serie de proprietăți dinamice. Faceți clic pe (Proprietăți dinamice) și bifați proprietatea dorită. Când setați o proprietate să fie dinamică, creează un fișier .config XML și o adaugă în Exploratorul de soluții.
Efectuarea de modificări la momentul proiectării este un lucru, dar trebuie să facem acest lucru atunci când programul rulează. ListView este alcătuit din 0 sau mai multe articole. Fiecare element (un ListViewItem) are o proprietate text și o colecție SubItems. Prima coloană afișează textul Element, următoarea coloană afișează SubItem [0] .text apoi SubItem [1] .text și așa mai departe.
Am adăugat un buton pentru a adăuga un rând și o casetă de editare pentru numele orașului. Introduceți orice nume în casetă și faceți clic pe Adăugare rând. Aceasta adaugă un nou rând la ListView cu numele orașului pus în prima coloană și următoarele trei coloane (Subtitrări [0..2]) sunt populate cu numere aleatorii (convertite în șiruri) adăugând acele șiruri la lor.
Acum setați proprietatea ListView Multiselect pe false. Vrem să selectăm un singur element la un moment dat, însă dacă doriți să eliminați mai multe odată, este similar, cu excepția cazului în care trebuie să faceți o buclă inversă. (Dacă buclați în ordine normală și ștergeți elementele, atunci articolele ulterioare nu sunt sincronizate cu indexurile selectate).
Meniul cu clic dreapta nu funcționează încă, deoarece nu avem elemente de meniu care să fie afișate pe el. Deci faceți clic dreapta pe PopupMenu (sub formular) și veți vedea Meniul contextual să apară în partea de sus a formularului în care apare editorul normal de meniu. Faceți clic pe el și unde scrie Tip Aici, tastați Eliminare articol. Fereastra de proprietăți va afișa un MenuItem astfel redenumiți-l pe mniRemove. Faceți dublu clic pe acest element de meniu și ar trebui să obțineți meniulItem1_Cliccați funcția codului gestionarului evenimentelor. Adăugați acest cod, astfel încât să arate așa.
Dacă pierdeți din vedere elementul Eliminare, trebuie doar să faceți clic pe controlul PopupMenu singur sub formularul din Designerul formularului. Asta îl va readuce la vedere.
Cu toate acestea, dacă îl executați și nu adăugați un element și îl selectați, atunci când faceți clic dreapta și obțineți meniul și faceți clic pe Eliminare articol, va da o excepție, deoarece nu există niciun element selectat. Este o programare proastă, deci iată cum o rezolvați. Faceți dublu clic pe evenimentul pop-up și adăugați această linie de cod.
Un DataGridView este atât cel mai complex, cât și cel mai util component oferit gratuit cu C #. Funcționează atât cu surse de date (adică date dintr-o bază de date), cât și fără (adică date pe care le adăugați programatic). Pentru restul acestui tutorial, voi arăta utilizarea lui fără Surse de date. Pentru nevoile de afișare mai simple, puteți găsi o listă simplă mai potrivită.
Dacă ați utilizat un control DataGrid mai vechi, atunci acesta este doar unul dintre cele de pe steroizi: vă oferă mai multe încorporate în tipuri de coloane, puteți lucra cu intern, precum și date externe, o personalizare mai mare a afișajului (și a evenimentelor) și oferă mai mult control asupra manipulării celulelor cu rânduri de congelare și coloane.
Când proiectați formulare cu date de grilă, este de obicei să specificați diferite tipuri de coloane. Este posibil să aveți căsuțe de selectare într-o coloană, text de citire sau modificare în alta și numere de cursuri. Aceste tipuri de coloane sunt, de asemenea, de obicei aliniate diferit cu numerele în general drepte, astfel încât punctele zecimale să se alinieze. La nivel de coloană puteți alege dintre butonul, caseta de selectare, ComboBox, Image, TextBox și Link-uri. dacă acestea nu sunt suficiente, vă puteți defila tipurile dvs. personalizate.
Cel mai simplu mod de a adăuga coloane este prin proiectarea în IDE. După cum am văzut până acum, scrie doar cod pentru tine și atunci când ai făcut-o de câteva ori, poate preferi să adaugi singur codul. După ce ați făcut acest lucru de câteva ori, vă oferă informații despre cum să faceți programatic.
Să începem prin adăugarea unor coloane, aruncați un DataGridView pe formular și faceți clic pe săgeata mică din colțul din dreapta sus. Apoi faceți clic pe Adăugare coloană Faceți acest lucru de trei ori. Va apărea un dialog Adăugare coloană în care setați numele coloanei, textul care va fi afișat în partea de sus a coloanei și vă permite să alegeți tipul acesteia. Prima coloană este YourName și este implicit TextBox (dataGridViewTextBoxColumn). Setați și textul antetului la numele dvs. Faceți cea de-a doua coloană Age și utilizați un ComboBox. A treia coloană este permisă și este o coloană CheckBox.
După adăugarea tuturor celor trei, ar trebui să vedeți un rând de trei coloane cu o combo în cea din mijloc (Age) și o casetă de selectare în coloana Permis. Dacă faceți clic pe DataGridView, apoi în inspectorul de proprietăți ar trebui să localizați coloane și să faceți clic pe (colecție). Se afișează un dialog în care puteți seta proprietăți pentru fiecare coloană, cum ar fi culorile individuale ale celulelor, textul cu sfaturi, lățimea, lățimea minimă etc. Dacă compilați și executați veți observa că puteți modifica lățimile coloanei și timpul de rulare. În inspectorul de proprietăți pentru DataGridView principal, puteți seta AllowUser pentru redimensionareColumns la false pentru a preveni asta.
Vom adăuga rânduri la controlul DataGridView în cod și ex3.cs în fișierul de exemple are acest cod. Începând prin a adăuga o casetă TextEdit, un ComboBox și un buton la formular cu DataGridView pe ea. Setați proprietatea DataGridView AllowUserto AddRows pe false. De asemenea, folosesc etichete și numesc combobox cbAges, butonul btnAddRow și textBox tbName. Am adăugat, de asemenea, un buton Închidere pentru formular și am dat dublu clic pe el pentru a genera un schelet de gestionare a evenimentelor btnClose_Click. Adăugarea cuvântului Close () acolo face ca lucrarea să funcționeze.
În mod implicit, proprietatea activată a butonului Adăugați rând este setată la început. Nu dorim să adăugăm niciun rând la DataGridView decât dacă există text atât în caseta Name TextEdit, cât și în ComboBox. Am creat metoda CheckAddButton și am generat apoi un handler pentru evenimente Leave pentru caseta de editare a textului nume, făcând dublu clic lângă cuvântul „Lasă în proprietăți” când se afișau evenimentele. Caseta Proprietăți arată acest lucru în imaginea de mai sus. În mod implicit, caseta Proprietăți arată proprietăți, dar puteți vedea gestionatorii de evenimente făcând clic pe butonul fulger.
Ați putea utiliza în schimb evenimentul TextChanged, deși acest lucru va apela CheckAddButton () metodă pentru fiecare apăsare de taste, mai degrabă decât atunci când controlul este lăsat, adică atunci când un alt control câștigă se concentreze. În Combo Ages am folosit evenimentul TextChanged, dar am selectat manipulatorul de evenimente tbName_Leave în loc de a face dublu clic pentru a crea un nou handler de evenimente.
Nu toate evenimentele sunt compatibile, deoarece unele evenimente oferă parametri suplimentari, dar dacă puteți vedea un handler generat anterior, da, îl puteți utiliza. Este, în mare parte, o preferință, puteți avea un gestionator de evenimente separat pentru fiecare control pe care îl sunteți folosirea sau partajarea gestionarilor de evenimente (așa cum am făcut eu) atunci când au o semnătură comună a evenimentului, adică parametrii sunt la fel.
Am redenumit componenta DataGridView la dGView pentru scurtare și am dat dublu clic pe AddRow pentru a genera un schelet de gestionare a evenimentelor. Acest cod de mai jos adaugă un nou rând necompletat, obține acel index de rânduri (este RowCount-1, deoarece tocmai a fost adăugat și RowCount este 0 bazat) și apoi accesează acel rând prin indexul său și stabilește valorile din celulele din acel rând pentru coloanele YourName și Vârstă.
Când proiectați un formular, ar trebui să vă gândiți în ceea ce privește containerele și controalele și care grupuri de controale ar trebui să fie păstrate împreună. În culturile occidentale, oricum, oamenii citesc de la stânga sus la dreapta jos, astfel încât să fie mai ușor să citească așa.
Un container este oricare dintre controalele care pot conține alte controale. Cele găsite în caseta de instrumente includ Panoul, FlowLayoutpanel, SplitContainer, TabControl și TableLayoutPanel. Dacă nu puteți vedea caseta de instrumente, utilizați meniul Vizualizare și îl veți găsi. Containerele țin controale împreună și dacă mutați sau redimensionați containerul va afecta poziționarea comenzilor. Mutați doar controale peste containerul din Designerul formularului și va recunoaște că Containerul este acum responsabil.
Un Panou este similar cu un GroupBox, dar un GroupBox nu poate derula, dar poate afișa o legendă și are un chenar implicit. Panourile pot avea granițe, dar implicit nu. Folosesc GroupBoxes pentru că arată mai frumos și acest lucru este important pentru că:
Panourile sunt la îndemână pentru gruparea containerelor, astfel încât s-ar putea să aveți două sau mai multe GroupBoxes pe un panou.
Iată un sfat pentru lucrul cu containere. Aruncați un container despărțit pe un formular. Faceți clic pe panoul din stânga, apoi pe cel din dreapta. Încercați acum și eliminați SplitContainer din formular. Este dificil până când faceți clic dreapta pe unul dintre panouri și apoi faceți clic pe Selectați SplitContainer1. Odată selectat, îl puteți șterge. Un alt mod care se aplică tuturor controalelor și containerelor este apăsați tasta Esc pentru a selecta părintele.
Containerele pot să se cuibărească și în interior. Trebuie doar să trageți una mică peste una mai mare și veți vedea pe scurt o linie verticală subțire care arată că unul se află acum în interiorul celuilalt. Când trageți containerul părinte, copilul este mutat cu acesta. Exemplul 5 arată acest lucru. În mod implicit, panoul maro deschis nu se află în interiorul containerului, astfel încât atunci când faceți clic pe butonul mutare, GroupBox este mutat, dar panoul nu este. Acum trageți panoul peste GroupBox, astfel încât să fie complet în interiorul Groupbox. Când compilați și Rulați de această dată, faceți clic pe butonul Mutare se mută ambele.
Un TableLayoutpanel este un recipient interesant. Este o structură de tabel organizată ca o grilă 2D de celule în care fiecare celulă conține un singur control. Nu poți avea mai mult de un control într-o celulă. Puteți specifica modul în care tabelul crește atunci când sunt adăugate mai multe controale sau chiar dacă nu crește, Pare modelat pe o tabelă HTML, deoarece celulele pot întinde coloane sau rânduri. Chiar și comportamentul de ancorare al controalelor copilului în container depinde de setările de marjă și de umplere. Vom vedea mai multe despre ancore în pagina următoare.
În exemplul Ex6.cs, am început cu un tabel de două coloane de bază și specificat prin caseta de dialog Stiluri de control și stiluri (selectați controlul și faceți clic pe mic triunghiul care indică dreapta situat în partea dreaptă sus pentru a vedea o listă de sarcini și faceți clic pe ultima) că coloana din stânga este 40% și coloana din dreapta 60% din lăţime. Vă permite să specificați lățimile coloanelor în termeni absoluti de pixeli, în procente sau puteți să îl lăsați să AutoSizeze. Un mod mai rapid de a ajunge la acest dialog este doar să faceți clic pe Colecția de lângă Coloane din Fereastra Proprietăți.
Am adăugat un buton AddRow și am lăsat proprietatea GrowStyle cu valoarea implicită a lui AddRows. Când tabelul se umple, adaugă încă un rând. În mod alternativ, puteți seta valorile la AddColumns și FixedSize, astfel încât să nu mai poată crește. În Ex6, când faceți clic pe butonul Adăugați controale, acesta apelează metoda AddLabel () de trei ori și AddCheckBox () o dată. Fiecare metodă creează o instanță a controlului și apoi apelează tblPanel. Controale. Adăugați () După adăugarea celui de-al doilea control, al treilea control determină creșterea tabelului. Imaginea o arată după ce butonul Adăugare control a fost făcut clic o dată.
În cazul în care vă întrebați de unde provin valorile implicite în metodele AddCheckbox () și AddLabel () pe care le numesc, controlul a fost inițial adăugate manual în tabelul din proiectant și apoi codul pentru a-l crea și inițializa a fost copiat din interiorul acestuia regiune. Veți găsi codul de inițializare în apelul metodei InitializeComponent odată ce faceți clic pe + din stânga Regiunii de mai jos:
Puteți selecta mai multe controale în același timp, ținând apăsată tasta Shift când selectați cel de-al doilea și următoarele controluri, chiar și controale de diferite tipuri. Fereastra Proprietăți arată doar acele proprietăți comune ambelor, astfel încât să le puteți seta pe toate la aceeași dimensiune, culoare și câmpuri de text etc. Chiar și aceleași manevre de evenimente pot fi atribuite mai multor controale.
În funcție de utilizare, unele forme vor ajunge adesea să fie redimensionate de utilizator. Nimic nu pare mai rău decât să redimensionați o formă și să vedeți controalele să rămână în aceeași poziție. Toate controalele au ancore care vă permit să le „atașați” la cele 4 muchii, astfel încât controlul să se miște sau să se întindă atunci când o margine atașată este deplasată. Aceasta duce la următorul comportament atunci când o formă este întinsă de la marginea dreaptă:
Pentru butoanele precum Închidere, care sunt în mod tradițional în dreapta jos, comportamentul 3 este ceea ce este necesar. ListViews și DataGridViews sunt cele mai bune cu 2 dacă numărul de coloane este suficient pentru a revărsa formularul și are nevoie de derulare). Ancorele de sus și de stânga sunt implicite. Fereastra de proprietate include un editor mic, care arată ca Steagul Angliei. Este suficient să faceți clic pe oricare dintre bare (două orizontale și două verticale) pentru a seta sau șterge ancora corespunzătoare, așa cum se arată în imaginea de mai sus.
O proprietate care nu primește prea multe mențiuni este proprietatea Tag și totuși poate fi incredibil de utilă. În Fereastra Proprietăți puteți atribui doar text, dar în codul dvs. puteți avea orice valoare care coboară din obiect.
Am folosit Tag pentru a reține un obiect întreg, afișând doar câteva dintre proprietățile sale într-un ListView. De exemplu, este posibil să doriți să afișați doar un nume și un număr de clienți într-o listă de rezumat pentru clienți. Dar faceți clic dreapta pe clientul selectat și apoi deschideți un formular cu toate detaliile clientului. Acest lucru este ușor dacă atunci când construiți lista de clienți, citind toate datele clientului în memorie și atribuind o referință la obiectul Clasa de clienți din etichetă. Toate controalele au o etichetă.
Un TabControl este o modalitate utilă de a economisi spațiul formularului, având mai multe file. Fiecare filă poate avea o pictogramă sau un text și puteți selecta orice filă și puteți afișa controalele sale. TabControl este un container, dar conține doar TabPages. Fiecare TabPage este de asemenea un container care poate avea controale normale la acesta.
De exemplu, x7.cs, am creat un panou cu două file cu prima filă numită Controls, care are trei butoane și o casetă de validare. A doua pagină cu fila este etichetată Jurnaluri și este utilizată pentru a afișa toate acțiunile înregistrate, care include apăsarea unui buton sau comutarea unei casete de selectare. O metodă numită Log () este apelată pentru a înregistra fiecare clic pe buton etc. Acesta adaugă șirul furnizat la un ListBox.
Am adăugat, de asemenea, două meniuri pop-up cu clic dreapta în TabControl, în mod obișnuit. Mai întâi adăugați un ContextMenuStrip la formular și setați-l în proprietatea ContextStripMenu din TabControl. Cele două opțiuni de meniu sunt Adăugare pagină nouă și Eliminare pagină. Cu toate acestea, am restricționat eliminarea paginii, astfel încât doar paginile cu fila adăugată recent pot fi eliminate și nu cele două originale.
Acest lucru este ușor, trebuie doar să creezi o nouă filă, să îi dai o legendă Text pentru filă, apoi să o adaugi la colecția TabPages din filele TabControl
Eliminarea unei pagini este doar o problemă de apelare la TabPages. RemoveAt (), folosind filele. SelectedIndex pentru a obține fila selectată în prezent.
În acest tutorial am văzut cum funcționează unele dintre controalele mai sofisticate și cum să le folosim. În tutorialul următor, voi continua cu tema GUI și voi analiza firul lucrătorului de fundal și voi arăta cum să o folosesc.