Introducere în controlul panglicii, blogul lui unril

După ce ați citit postul de anunțare: Microsoft Ribbon for WPF. M-am gândit, de ce nu încerc acest control misto în practică. Deci, în acest articol, examinez controlul pe care Microsoft l-a introdus recent și a creat o aplicație bazată pe acesta. Este timpul să examinați acest element pentru a vă ajuta să începeți lucrul cu acesta.







În acest articol, vă prezint controlul Ribbon în WPF. Dacă nu cunoașteți bine WPF, vă recomandăm să citiți seria articolelor WPF.

Panglica este un fel de bara de instrumente, pe care sunt amplasate diferite butoane, galerii și chestii în filele din partea de sus a ferestrei aplicației. În viitor, comenzile din file pot fi grupate, filele contextuale sunt introduse și așa mai departe. În general, Panglica înlocuiește barele de instrumente și meniurile familiare cunoscute, ceea ce conferă aplicației un aspect mai neted.

Acesta este șablonul Ribbon standard care apare atunci când creați o aplicație și dă o idee despre cum arată RibbonWindow.

Pentru a crea prima dvs. aplicație Ribbon, aveți nevoie de:

Să examinăm caracteristicile interfeței cu panglici pentru a le putea utiliza în aplicațiile dvs.

Meniul aplicației.

Fiecare aplicație Panglică trebuie să aibă un meniu asociat cu aceasta. Meniul constă dintr-un număr de butoane derulante care reprezintă elementele de meniu.

Introducere în controlul panglicii, blogul lui unril

Partea stângă conține elemente de meniu. Fiecare dintre ele poate conține și submeniuri. Partea dreaptă conține elementele recente reprezentate de ApplicationMenu.RecentItems.

Bara de instrumente pentru acces rapid.

Fiecare control Ribbon are o bară de comenzi rapide - butoane mici care oferă acces rapid la comenzile cele mai utilizate. Bara de instrumente Quick Access este localizată în bara de titlu a ferestrei.

Indiciu extins.

Panglica WPF aplică instrucțiuni extinse pentru a explica scopul comenzilor dvs. Noi le numim super sfaturi.

Introducere în controlul panglicii, blogul lui unril

KeyTips este o funcție unică a Panglicii, care vă permite să apelați elemente de meniu utilizând comenzile rapide de la tastatură. Puteți aloca KeyTip pentru fiecare filă, buton și așa mai departe, care vor fi activate după ce apăsați tasta Alt și litera sau numărul specificat.

Introducere în controlul panglicii, blogul lui unril

Redimensionarea automată a elementelor.

Panglica este implementată astfel încât să se înrăutățească automat pentru a asigura cea mai mică dimensiune. Butoanele mari, cu o lipsă de spațiu, vor fi înlocuite cu un meniu mic și apoi cu meniul derulant.

Introducere în controlul panglicii, blogul lui unril

Gruparea filelor.

Panglica poate conține mai multe file. De asemenea, puteți grupa comenzile din fiecare filă în grupuri separate.

Fila contextuală.

Puteți crea filele contextuale - filele speciale care apar dinamic în funcție de acțiunile utilizatorului.

Introducere în controlul panglicii, blogul lui unril

Galeriile sunt, de asemenea, elemente speciale cu caracteristici speciale, de exemplu cu efecte zoom, cu drop-down list effect etc.

Introducere în controlul panglicii, blogul lui unril

Acum, să încercăm să implementăm toate aceste funcții.

RibbonWindow este o clasă moștenită de la Window în WPF. Clasa RibbonWindow poate afișa bara de instrumente Acces rapid și filele contextuale din antet. Dacă doriți să utilizați aceste funcții, va trebui să utilizați RibbonWindow în locul ferestrei obișnuite. Pentru a adăuga un nou RibbonWindow. utilizați doar șablonul element:






După ce selectați RibbonWindow. șablonul va genera o fereastră standard:

Vom folosi această fereastră pentru a crea controlul Ribbon.

Să creăm aplicațiile noastre cu toate elementele examinate, adăugându-le unul câte unul.

RibbonApplicationMenu.

Introducere în controlul panglicii, blogul lui unril

Meniul aplicației conține elementele de meniu din stânga, panoul secundar din partea dreaptă și subsolul din partea de jos.

RibbonApplicationMenu este controlul care creează meniul aplicației pentru RibbonWindow. Fiecare fereastră poate avea doar un singur meniu. Acesta poate conține RibbonApplicationMenuItem. RibbonApplicationSplitMenuItem. RibbonSeparator și așa mai departe. Puteți cuibui RibbonApplicationMenuItem în reciproc pentru a obține submeniuri.

Să vedem cum puteți face acest meniu:

În codul de mai sus, am anunțat mai multe RibbonApplicationMenuItem pentru Desktop, MyPicture, My Video și multe altele. Am setat-o ​​pe imagine folosind proprietățile ImageSource din elementul de meniu.

RibbonApplicationMenuItem.

Pentru a obține un submeniu, puteți crea câte RibbonApplicationMenuItem în interiorul fiecărui element de meniu, după cum doriți. Așa cum am arătat în codul de mai sus, am inserat elemente Floppy Primary și Seconday Floppy în interiorul elementului din meniul Floppy. KeyTip definește tastele rapide pe care le puteți accesa după ce apăsați tasta Alt de pe tastatură.

RibbonApplicationSplitMenuItem.

RibbonApplicationSplitMenuItem este ușor diferită de cea obișnuită RibbonApplicationMenuItem. După cum puteți vedea, al doilea submeniu al aplicației este de fapt un element de meniu cu un buton și un submeniu drop-down.

În cazul lui SplitMenuItem. puteți să-l folosiți fie ca element de meniu, fie să selectați sub-elementele acestuia.

RibbonSeparator.

RibbonSeparator vă permite să introduceți un separator între două seturi de elemente. Puteți să-l utilizați între MenuItems. și între grupurile Panglică.

RibbonApplicationMenu.AuxiliaryPaneContent.

Panoul auxiliar, care este situat în partea dreaptă, este de obicei utilizat pentru a plasa o listă cu articolele recent utilizate. În această aplicație, am pus TextBlock în ea pentru a afișa textul.

RibbonApplicationMenu.FotterPaneContent.

Acest panou vă permite să accesați subsolul meniului. Am adăugat un pic de RibbonButtons la el.

RibbonTab.

Elementele principale ale Panglicii sunt filele. Fiecare filă conține un set de grupuri, fiecare dintre ele având posibilitatea de a efectua controale individuale. Panglica poate avea mai multe file asociate cu ea.

Acest cod definește mai multe file numite Vizualizare, Inserare, Format și selectat. Trebuie să observați că prima filă conține un grup de elemente. Acest grup conține butonul Ajutor.

ContextualTab.

De asemenea, trebuie să observați că dacă definiți RibbonContextualTabGroup. atunci aceasta va duce la apariția unei file contextuale în bara de titlu. O filă contextuală este de obicei invizibilă, apare ca răspuns la acțiunile utilizatorului.

RibbonGroup.

Introducere în controlul panglicii, blogul lui unril

Fiecare grup are un titlu care se află în partea de jos a grupului. Butoanele dintr-un grup pot fi mari sau mici. Dimensiunea butoanelor este determinată automat, în funcție de sursa imaginii.

Aici am folosit LargeImageSource pentru primul buton și SmallImageSource pentru restul. Puteți vedea că în loc de conținutul butonului, proprietatea Etichetă este utilizată pentru afișarea textului.

Super ToolTip.

În RibbonButton, există trei proprietăți pentru specificarea unui sfat util. Fiecare sugestie are un titlu pe care îl puteți specifica folosind proprietatea ToolTipTitle. ToolTipDescription este folosit pentru textul descriptiv și ToolTipImageSource pentru imaginea din stânga descrierii.

Introducere în controlul panglicii, blogul lui unril

Când treceți cursorul în dosarul Setări, apare o solicitare sub fila.

RibbonSplitButton.

La fel ca RibbonSplitMenuItem. RibbonSplitButton are un buton și un meniu asociat cu acesta. Fiecare RibbonSplitButton este un RibbonButton normal și un meniu grupat împreună. Puteți accesa în mod individual butonul sau îl puteți utiliza pentru a selecta un element din meniu.

Introducere în controlul panglicii, blogul lui unril

RibbonSplitButton are RibbonMenu ca conținut. Elementele de meniu apar când butonul este apăsat.

Alte controale.

În Panglică, există multe alte elemente ale interfeței cu utilizatorul. RibbonTextBox. RibbonToggleButton. RibbonCheckBox. de exemplu. Puteți să le utilizați în același mod ca și controalele obișnuite.

Proprietatea Etichetă este utilizată pentru a seta textul, iar SmallImageSource / LargeImageSource este imaginea asociată. RibbonTwoLineText este folosit pentru afișarea textului.

RibbonGallery.

RibbonGallery poate fi conectat la un ComboBox. Aceasta este o componentă specială care are o interfață vizuală foarte bogată.

RibbonComboBox conține RibbonGallery cu trei RibbonGalleryItems.

Acesta este cel mai simplu exemplu de utilizare a RibbonGalleryItems.

RibbonQuickAccessToolBar.

Un alt element important este Bara de instrumente de acces rapid, pe care fiecare RibbonWindow o are în bara de titlu a ferestrei. Pentru a seta acest panou, trebuie să utilizați proprietatea QuickAccessToolBar.

Bara de instrumente de acces rapid se colapsează automat în meniu atunci când nu există suficient spațiu liber.

RibbonContextMenu.

Ca și meniul contextual obișnuit, RibbonContextMenu poate fi folosit pentru a crea propriul meniu contextual.

Introducere în controlul panglicii, blogul lui unril

Folding RibbonBar.

RibbonBar are inițial câteva proprietăți. Unul dintre ele este pliabil. Când folosești RibbonBar, devine un meniu care îți permite să extingi spațiul de lucru.


Pentru a minimiza panoul, faceți clic cu butonul din dreapta pe orice filă și selectați Minimizare. Același efect va apărea când faceți dublu clic pe titlul filă.

Panglica acceptă interfața ICommand, astfel încât să puteți utiliza legarea de comandă.







Articole similare

Trimiteți-le prietenilor: