Laboratorul 3 Controale avansate n Visual C#

Ce ne propunem astzi? n acest laborator ne propunem s implementm n Visual C# .NET o agend personal n care vom memora numele, prenumele, telefonul si adresa persoanelor cunoscute (vezi Figura 1).

Mai pe larg, vom proceda astfel

Pentru nceput va trebui s populm agenda cu date ale persoanelor cunoscute. La adugarea unei persoane n agend, aceasta va fi inclus ntr-una din urmtoarele categorii: prieteni, colegi, rude sau diveri (categoria implicit).

Figura 1. Interfaa aplicaiei Agenda

Vom utiliza n acest laborator dou controale noi: TreeView i ListView. Controlul TreeView permite vizualizarea elementelor sub form arborescent, iar controlul ListView permite vizualizarea elementelor n cinci moduri: Thumbnails, Large icons, Small icons, List i Details. Un exemplu clasic de utilizare a acestor dou controale este aplicaia Windows Explorer, care vizualizeaz n panoul din partea stng directoarele sub form arborescent, iar n dreapta fiierele i directoarele n conformitate cu selecia din primul panou. n cadrul aplicaiei propuse pentru acest laborator, cele patru butoane situate deasupra controlului ListView (vezi Figura 1) seteaz modul de vizualizare a datelor din control.
lvwAgenda.View = View.Details;

Laborator 3 MTP

n Figura 2 putei observa modul de vizualizare a elementelor din controlul ListView n funcie de opiunea aleas.

Large icons Small icons List

Details Figura 2. Cele patru moduri de vizualizare a datelor din ListView

Controlul TreeView conine elemente de tip TreeNode n colecia de noduri Nodes, iar controlul ListView elemente de tip ListViewItem n colecia Items. Un nod (TreeNode) conine informaie text (de exemplu, numele unei persoane) i poate avea o imagine asociat, iar elementele din ListView pot conine suplimentar i alte detalii n format text (de exemplu, adresa i telefonul persoanei n cauz), vizibile ns doar n modul Details pe coloane distincte. Exemplul de mai jos ilustreaz modul de adugare a unui nod printe n rdcin i a unui nod fiu ntr-un control TreeView (denumit tvwAgenda), respectiv a unui nou element (avnd dou sub-elemente) ntr-un control ListView (denumit lvwAgenda).
//adaug un nod nou n rdcin TreeNode parentNode = new TreeNode(); parentNode.Text = "Prieteni"; parentNode.ImageIndex = 1; tvwAgenda.Nodes.Add(parentNode); //adaug un nod fiu la nodul creat anterior TreeNode childNode = new TreeNode(); childNode.Name = myIndex++.ToString(); childNode.Text = "Popovici Iulian"; childNode.ImageIndex = 2; parentNode.Nodes.Add(childNode); //adaug un element nou n controlul ListView ListViewItem myItem = new ListViewItem(); myItem.Name = myIndex++.ToString(); myItem.Text = "Popovici Iulian"; myItem.ImageIndex = 1; lvwAgenda.Items.Add(myItem); myItem.SubItems.Add("0748179765"); // Telefon myItem.SubItems.Add("Str. Bujor, Nr.25"); // Adresa

n exemplul de mai sus, proprietile Name ale elementelor din TreeView i ListView reprezint numele nodurilor din TreeView, respectiv al elementului din ListView i permit identificarea uoar a acestora din codul surs (n cazul n care folosii o convenie bine aleas). Proprietatea ImageIndex reprezint indexul pictogramei afiate de un nod din TreeView, respectiv de un element din ListView (vezi n continuare semnificaia acestora). Pentru controlul ListView se mai recomand s setai proprietatea Multiselect la false. Efectul vizual al executrii codului de mai sus l putei observa n Figura 3.

Controale avansate n Visual C#

Figura 3. Elementele adugate n controalele TreeView i ListView

Pentru a putea asocia unui nod din TreeView, respectiv unui element din ListView o pictogram va trebui s adugm la formular dou componente de tip ImageList. Prima component, denumit imgSmall, va conine imagini cu dimensiunea 16x16 pixeli (vezi Figura 4), i va fi asociat cu nodurile din TreeView i cu elementele din ListView n cazul afirii n mod Details, SmallIcons sau List. A doua component, denumit imgLarge, va conine imagini cu dimensiunea de 32x32 pixeli, i va fi asociat cu elementele din ListView n cazul afirii n mod LargeIcons. Adugai n fiecare component de tip ImageList acelai set imagini n ordine identic (pentru a putea fi afiate n ListView aceleai imagini indiferent de modul de vizualizare a elementelor).

Figura 4. Setarea unor proprieti asociate componentei imgSmall

Pentru a asocia lista de pictograme mici (16x16) cu controlul TreeView setai-i acestuia proprietatea ImageList la valoarea imgSmall. Pentru controlul ListView va trebui s setai dou asemenea proprieti: SmallImageList i LargeImageList. Pictograma afiat pentru un nod din TreeView sau pentru un element din ListView este determinat de proprietatea Imageindex a unui element de tip TreeNode sau ListViewItem i reprezint indexul pictogramei din lista de imagini asociat controlului. Toate operaiile asupra nodurilor dintr-un control TreeView se efectueaz prin intermediul coleciei de noduri Nodes, iar operaiile asupra elementelor dintr-un control de tip ListView se efectueaz prin intermediul coleciei de elemente Items. Iat, de exemplu, cum putem s golim coninutul unui control TreeView (denumit tvwAgenda) i al unui control ListView (denumit lvwAgenda):
tvwAgenda.Nodes.Clear() lvwAgenda.Items.Clear()

Pentru memorarea intern a persoanelor incluse n agend se va crea o clas care s stocheze datele specifice:
class Persoana { public int index; public string nume; public string telefon; public string adresa; public string categorie; public int imagine; // + un constructor cu parametri }

i o list generica de persoane:

List<Persoana> agenda = new List<Persoana>();

Laborator 3 MTP

Sfaturi utile Cea mai simpl modalitate de parcurgere a persoanelor din lista generic este utilizarea unei bucle foreach.
foreach (Persoana p in agenda) { //p - utilizat pentru parcurgerea elementelor }

n continuare vei extinde aplicaia prin implementarea urmtoarelor dou funcii: Verificarea dublurilor din agend la adugarea unei persoane noi. Se va verifica existena n agend a unei persoane dup numele acesteia. Pentru cutarea n agend a persoanelor dup un anumit criteriu utilizai metoda Find a listei generice (mai multe informaii despre utilizarea acesteia gsii n help-ul Visual Studio la o cutare dup List<T>.Find method (System.Collections.Generic) .NET Framework 4.5). Adugarea unei buton de comand pentru tergerea tuturor persoanelor din categoria selectat. Se va afia n prealabil un dialog pentru confirmarea operaiei.

Sfaturi utile Pentru afiarea unor ferestre dialog de confirmare a unor operaii critice v putei folosi de metoda MessageBox.Show i de valoarea returnat de aceasta. Astfel nu va fi nevoie s v construii propriile voastre ferestre.

Modul de lucru sugerat

La pornirea aplicaiei se vor aduga prin cod (procedura eveniment Form1_Load) n controlul TreeView cele patru categorii de persoane (patru noduri printe). La adugarea unei persoane noi n agend, ea va fi adugat nti n lista generic agenda apoi n controlul TreeView ca nod fiu al categoriei din care face parte. La click n controlul TreeView pe una din categorii, se va afia n controlul ListView lista cu persoanele ce fac parte din categoria selectat (se va putea alege modul de afiare a persoanelor din controlul ListView cu ajutorul celor patru opiuni plasate deasupra controlului ListView vezi Figura 1). La click n controlul TreeView pe o persoan, se vor afia n controlul ListView detaliile persoanei selectate (vezi Figura 3). Operaia de adugare/ tergere a unei persoane n/din list atrage dup sine refacerea coninutului controalelor TreeView respectiv ListView (conform coninutului listei generice). nainte de a terge o persoan va fi afiat un dialog de confirmare a operaiei (vezi Figura 5).

Controale avansate n Visual C#

Figura 5. Dialogul de confirmare la tergerea unei persoane

Cu ce ne-am ales? Prin aplicaia dezvoltat n cadrul laboratorului de astzi am reuit s ne familiarizm cu modul de utilizare a controalele TreeView i ListView, extrem de utile pentru realizarea unor aplicaii cu interfee grafice complexe.

Bibliografie [1] Visual C# Resources, http://msdn.microsoft.com/enus/vstudio/hh341490%28v=msdn.10%29.aspx