Controale Ribbon pas cu pas

Interfața Ribbon 1. Dispozitiv

Panglica se bazează pe trei tipuri de elemente: un panou filă și membru al panoului interior (a se vedea figura).
File și panourile Puteți schimba ordinea de aranjare în Panglică bandă, ca elemente ale panourilor pot avea diferite de sarcină funcționale (utilizate ca butoane, casete de selectare, liste, galerii, etc.) și grupate în funcție de anumite criterii. Și rulează un pic mai departe, voi spune că toate oportunitățile funcționale elementele Ribbon sunt definite de una sau trei componente fără utilizarea oricăror controale standard, cum ar fi buton, CheckBox, etc.

Înainte În plus, Ribbon poate conține butonul de meniu principal și Lansare rapidă.

În meniul principal, în plus față de elementele de bază pot fi plasate ca link-uri la documente deschise recent, ceea ce face ca un astfel de meniu este aproape ideală pentru utilizatorii de aplicații care lucrează cu documente diferite.

Bara de instrumente Lansare rapidă poate conține copii ale elementelor Panglica pentru ușurința de utilizare.

Acum, înarmat cu cunoștințe de bază despre dispozitiv Ribbon, încercați să construiască propria interfață Ribbon.

2. Prima interfață Ribbon - este cel mai dificil

Toate elementele panglicii sunt aranjate pe componentele Comenzi pentru pagină paletă Ribbon

La prima vedere, dezvoltatorii sunt lacomi și ne-a lăsat la dispoziția tuturor celor cinci elemente:
1. TRibbon - baza tuturor interfață (panglică)
2. TRibbonComboBox
3. TRibbonSpinEdit
4. TRibbonScreenTipManager - ponturile de manager
5. TScreenTipsPopup - tooltip
Dar, de fapt, aceste componente sunt mai mult decât suficient pentru dezvoltarea unei interfețe complet vizuale. Mai mult decât atât, nu faptul că va trebui vreodată să utilizați componentele doilea și al treilea (TRibbonComboBox și TRibbonSpinEdit).

Faptul că Panglica în Delphi funcționează numai împreună cu componenta TActionManager din pagina suplimentare Componentă palet. Și această componentă ia partea leului din toate lucrările, inclusiv elementele de lucru și evenimente.

Acum să creeze o interfață simplă, care a examinat simultan proprietățile componentelor Ribbon.

2.1. Lucrul cu TRibbon

Deschideți Delphi. a crea o nouă aplicație și puneți următoarele elemente pe un formular:

TActionManager (filă suplimentară)
TImageList (fila Win32)
TRibbon (Ribbon Controale tab)

Ca urmare, ar trebui să obțineți ceva de genul imaginea de mai jos:

Acum, selectați TRibbon și introduceți proprietatea noastră ActionManager ActionManager1.
La rândul său, componenta ActionManager1 în proprietatea ImageList1 Imagini specifica.
Presetarea este de peste - acum TRibbon va fi sub controlul acțiunilor de gestionare și fiecare nou panou Panglica va fi adăugat automat la lista ActionManager1.
Înainte de a trece la alinierea filele, panourile și componentele pe bandă, considerăm proprietăți constante și de bază.

In componenta TRibbon sunt definite următoarele constante:

Acum, să adăugați prima filă bandă. Pentru a face acest lucru, puteți:

Utilizați meniul contextual pentru componenta (Adăugați opțiunea Tab)
Utilizați opțiunile de componente în Object Inspector „e:

Acum, pe tab-ul, puteți adăuga noi grupuri. Acest lucru se poate face fie prin meniul contextual al filei, sau, din nou, utilizând opțiunile din Object Inspector „este, de exemplu, adăugați fila trei grupe .:

În orice moment vă puteți schimba poziția filei grupuri. Pentru a face acest lucru, utilizați opțiunea „Reordonează Grupuri ...“.
Noi Ribbon grup afișează următoarele caracteristici suplimentare:
DialogAction. TAction - o acțiune care va fi executat atunci când faceți clic pe grupul din titlu. Dacă această proprietate este definită, atunci forma titlului grupului se va schimba la următoarele:

Rânduri. întreg - proprietate determină cât de multe rânduri va prelua elementele panoului. proprietate implicit este setat la 3.

Acum vom încerca să adăugați un buton convențional.

Editați proprietățile noii acțiuni (Acțiune)

Comenzi rapide de acțiune

Acum, apuca și drag and drop de acțiune de la ActionManager pe orice Panglică panou. Ca urmare, ar trebui să obțineți ceva de genul:

În mod implicit, o nouă acțiune este situată în primul rând gol panou (Row). Pentru a face un aspect nou buton, cum ar trebui, adică, pictograma situată în partea de sus a unui pixel 32 × 32 și sub semnătură, selectați panoul care apare, du-te la Object Inspector „CommandProperties e fila selectați proprietăți și specificați valoarea în proprietatea ButtonSize bsLarge Această lățime selectă este schimbată automat și tipul de panouri Ribbon va fi după cum urmează .:

Acum puteți rula aplicația și verificarea funcționării.

În plus, puteți fi plasat pe bara de acțiuni sub formă de butoane de diferite dimensiuni, puteți utiliza, de asemenea, ActionManager aranja activități cum ar fi checkbox „s, RadioButon“ s, etc.
Hai, de exemplu, la al doilea rând, panoul 3 Procedura ca butoane radio.
Crearea în Managerul de acțiune „este, trei noi acțiuni cu nume RadioOption1, RadioOption2, RadioOption3 respectiv trageți-le NAA proprietate selectă și CommandStyle indică valoarea tipului csRadioButton Ribbon ar trebui să fie următorul ..:

Vezi tu, noi opțiuni nu au fost disponibile atunci când aplicația începe? Lucru este că, în cazul în care acțiunea nu are nici o manipulant, aplicația se execută în mod automat proprietatea sa Enabled trece la valoarea false. Scrieți trei handler simplu:

Pentru toate cele trei butoane de lucrat cum era de așteptat, ca la un moment dat ar putea fi presat de un singur buton, trebuie să ActionManager „este, de a pune toate cele trei acțiuni aceeași proprietate GroupIndex nenuli.
Acum, rulați aplicația din nou, și puteți vedea că al doilea panou Ribbon, de asemenea, acționează ca un TRadioGroup normal de componente.
Toate formele posibile de reprezentare în Panglică panou va fi discutat în articolul următor, dar acum se va concentra pe munca.
Ne întoarcem la crearea meniului principal. Alegerea componentei TRibbon în Object Inspector „este, faceți clic pe opțiunea“ Add meniul aplicației“. Butonul de meniu Pictograma principal este preluată din proprietățile proiectului (Pictograma aplicației). În mod implicit, acțiunea gol ActionClientItem0 adăugat la meniul principal, puteți schimba pe cont propriu. Adăugăm în meniul principal este deja disponibil în OpenStartURL de acțiune. trageți nostru doar și drop de la ActionManager „și pe butonul de meniu principal. Ca rezultat al meniului principal în aplicația care rulează va fi după cum urmează:

În mod similar configurat și Lansare rapidă. Sper, sensul de lucru cu componenta Panglică, în general, vei deveni mai mult sau mai puțin clare. Prin urmare, trecerea la următoarea etapa de dezvoltare de interfață pas - lucra cu tooltips.

2.2. Lucrul cu TScreenTipsManager componentă

O altă caracteristică de interfață Ribbon este frumos tooltips. Aceste sfaturi (ScreenTips), în plus față de frumusețea și confortul său este, de asemenea, mai multe informații decât aceleași indicii.

Acum, în opțiunile Object Inspector, selectați acțiunea „Generare sfaturi pe ecran“. Ca rezultat, dacă este făcută corect, ar trebui să primiți un mesaj care seamănă cu următorul:

Alegeți din acțiunea listă
sfaturi de editare de text
Dacă este necesar, încărcați o imagine, introduce / scoate semnătura de jos (subsol), semnătura de sus (antet), etc.

Textul tooltip implicit pentru valoarea proprietății Hint adoptată în acțiune. Creați un indiciu pentru una dintre acțiunile noastre.

Descărcați imagini pentru indicii. Pentru a face acest lucru, faceți dublu clic pe caseta corespunzătoare și selectați o imagine în format bmp.
Deoarece cererea noastră încă nu are propria sa referință internă, este de dorit pentru a elimina de subsol. Pentru a face acest lucru, debifați opțiunea Afișare subsol. Ca rezultat, am ajuns aici acest indiciu:

În plus, pentru fiecare solicitare, puteți seta raza de curbură pentru colțuri (Corner Dimensiune proprietate), modificați textul subsol „, dar opta din titlu, taste de comenzi rapide (comenzi rapide), și de a schimba imaginea pentru subsol (implicit trage un semn de întrebare) .
Și acum cel mai important lucru - pentru a face toate indiciile pe care trebuie să apară în forma principală a proprietății de aplicare ShowHint egal Adevărat.
Acum, rulați aplicația și plasați cursorul deasupra butonului. După câteva secunde, va apărea:

În plus față de acest tip de sfaturi instrument, puteți utiliza, de asemenea, componenta TScreenTipsPopup.

2.3. Lucrul cu TScreenTipsPopup componentă

Spre deosebire de componenta TScreenTipsPopup anterioară este o componentă vizuală. Sensul lucrării este de aproximativ aceeași cu cea a ScreenTipsManager, dar cu o singură diferență remarcabilă - TScreenTipsPopup poate fi asociată cu orice formă de componentă, chiar și așa nu are nici un pas în ActionManager „este, în cazul nostru, o astfel de componentă este WebBrowser1 Să creăm .. un Sfat ecran pentru el.
Se pune în orice loc convenabil pentru tine nou TScreenTipsPopup componente.
Acum, du-te la Object Inspector și deschideți fila Proprietăți ecran Sfat. Setați proprietățile Descriere și Header. Celelalte proprietăți pot fi lăsate goale.
Asociați un prompt cu o componentă WebBrowser. Pentru această listă derulantă, selectați proprietățile componentei asociat WebBrowser1 și introduceți proprietatea ScreenTipsManager ScreenTipsManager1.
Lansați aplicația și punctul de mouse-ul pentru browser-ul:

Același promptul va apărea atunci când mouse-ul trece peste componenta propriu-zisă ScreenTipsPopup.
Asta e, probabil, tot ce se referă la elementele de bază de a lucra cu Controale componente Ribbon.
După cum puteți vedea, astăzi a fost făcut principalul obiectiv al articolului tocmai la proiectarea interfață vizuală cu minimum de efort cu codul sursă.
Data viitoare va merge un pic mai departe și de a face unele de programare. Aflați cum să creați noi tipuri de elemente, frumoase PopUp-meniu, și așa mai departe. Deci, stai cu noi și nu va fi plictisitor