контрол лентата стъпка по стъпка

1. Устройство лентата интерфейс

Лентата е базирана на три вида елементи: панел раздел и вътре състав (виж фигурата).
Разделите и панели Можете да промените реда на подреждане на Ribbon на лента, като елементи на панелите могат да имат различно функционално натоварване (използван като бутони, отметки в полета, списъци, галерии и т.н.) и групирани според определени критерии. И работи малко по-напред, аз ще кажа, че всички функционални възможности елементи панделка се определят от един или три компонента без използването на каквито и да било стандартни контроли, като бутон, отметката, и т.н.

Преди допълнително, лентата може да съдържа основния бутон на менюто и Бързо стартиране.

В главното меню, в допълнение към основните елементи могат да бъдат поставени и връзки към последните отваряни документи, което прави такова меню е почти идеален за потребители на приложения, които работят с различни документи.

лентата с инструменти за бързо стартиране може да съдържа копия на елементи Лента за лекота на използване.

Сега, въоръжени с основни знания за устройството на лентата, опитайте се да създадете свой собствен Ribbon интерфейс.

2. Първо Ribbon интерфейс - това е най-трудният

Всички елементи на лентата са разположени върху компонентите на страница палитра панделка Контроли

На пръв поглед, разработчиците са алчни и да ни оставят на разположение на всички пет елементи:
1. TRibbon - основа на цялата интерфейс (лента)
2. TRibbonComboBox
3. TRibbonSpinEdit
4. TRibbonScreenTipManager - пояснения мениджър
5. TScreenTipsPopup - подсказка
Но в действителност, тези компоненти са повече от достатъчно за развитието на напълно визуален интерфейс. Освен това, не на факта, че някога ви се наложи да използвате втория и третия компонент (TRibbonComboBox и TRibbonSpinEdit).

Фактът, че в лентата в Делфи работи само във връзка с TActionManager компонент от страницата допълнителен компонент палитра. И този компонент се лъвския дял от цялата работа, включително елементите, работни и събития.

Сега нека да се създаде прост интерфейс, който едновременно изследва свойствата на лентата компоненти.

2.1. Работа с TRibbon

Open Delphi. създаване на ново заявление и поставете следните елементи във форма, която:

  1. TActionManager (Допълнително раздела)
  2. TImageList (раздел Win32)
  3. TRibbon (Лента за управление раздела)

В резултат на това вие трябва да получите нещо подобно на следната картина:

Сега изберете TRibbon и да влезе в нашия имот ActionManager ActionManager1.
На свой ред, компонента ActionManager1 в образите уточни ImageList1 собственост.
Запаметяване свърши - сега TRibbon ще бъде под контрола на управленските действия и всеки нов Ribbon панел ще бъде добавен към списъка автоматично ActionManager1.
Преди да се пристъпи към изравняване раздели, панели и компоненти на лентата, ние считаме, че постоянните и основни свойства.

В TRibbon компонент са определени следните константи:

Сега, нека да добавите първата ни таб лента. За да направите това, можете да:

  1. Използвайте контекстното меню за компонент (Добавяне Tab опция)
  2. Използвайте опциите за компонент в инспектора на обект "е:

Сега, в раздела, можете да добавяте нови групи. Това може да стане или чрез контекстното меню в раздела, или, отново с помощта на опциите в инспектора на обект "е, например, да добавите раздел три групи .:

По всяко време можете да промените позицията на раздела групи. За да направите това, използвайте опцията "Пренареждане на групи ...".
Ние панделка група показва следните допълнителни функции:
DialogAction. TAction - действие, което ще се изпълнява, когато кликнете върху група заглавие. Ако е зададен този имот, а след това под формата на заглавието на групата ще се промени до следното:

Редове. число - имот определя колко много редове ще се елементи на панела. По подразбиране собственост е настроена да 3.

Сега ние ще се опитаме да добавим конвенционален бутон.

  • Редактиране на свойствата на ново действие (Action)

    • Shortcuts действие

    Сега вземете и плъзгане и пускане действие от ActionManager на всеки панел Ribbon. В резултат на това трябва да получите нещо подобно:

    По подразбиране, ново действие се намира в първия празен ред (ред) панел. За да направите нов бутон поглед, както трябва, това е, икона намира на върха на 32 × 32 пиксела и под подписа, изберете панела, който се появява, отидете на инспектор обект "д CommandProperties раздела изберете свойства и определяне на стойността на имота ButtonSize bsLarge Тази ширина на лентата панел се променя автоматично и вида на лентата панели ще бъде както следва .:

    Сега можете да стартирате приложението и проверете работата.

    В допълнение, можете да бъде поставен върху лентата за действия под формата на различни бутони размер, можете да използвате и ActionManager организира дейности като квадратчето "е, RadioButton" и т.н.
    Нека, например на второ място в процедурата панел 3 като радио бутони.
    Създаване на Ръководителя на действие "е три нови действия с RadioOption1 имена, RadioOption2, RadioOption3 съответно повлекат НХА Ribbon панел и CommandStyle собственост показва, че стойността на типа csRadioButton Ribbon трябва да бъде следващия ..:

    Виждате ли, нови опции не са налични, когато заявлението започва? Работата е там, че ако действието не е манипулатор, програмата се изпълнява своята собственост с активиран автоматично преминава към стойността невярно. Напишете три прости манипулатор:

    За всички три бутона работили, както се очаква, че в един момент може да се натисне само един бутон, трябва да ActionManager "е, да се сложи всичките три действия същия имот GroupIndex от нула.
    Сега стартирате приложението отново, и можете да видите, че втората лента панел също така действа като нормален компонент TRadioGroup.
    Всички възможни форми на представителство в лентата на панела ще бъдат обсъдени в следващата статия, но за сега ще се съсредоточи върху работата.
    Обръщаме се към създаването на главното меню. Изборът TRibbon компонент в инспектора на обект "е, щракнете върху опцията" Добавяне на приложения Меню ". Бутон иконата на главното меню е взета от свойствата на проекта (Приложение Икона). По подразбиране, празен действие ActionClientItem0 добавен в главното меню, можете да промените по своему. Ние добавяме в главното меню вече е на разположение в нашите действия OpenStartURL. Просто влачите и пускате действие от ActionManager "и на главния бутон меню. Като резултат от главното меню в прилагането на движение ще бъде както следва:

    По същия начин конфигуриран и бързо стартиране. Надявам се, значението на работата с Ribbon компонент в общото ви стане малко или много ясен. Поради това, преходът към следващата стъпка развитието интерфейс - работи с пояснения.

    2.2. Работа с компонент TScreenTipsManager

    Друга особеност Ribbon интерфейс е хубаво пояснения. Тези съвети (ScreenTips) в допълнение към своята красота и удобство е и по-информативни, отколкото същите съвети.

    Сега в опциите на обекта инспектор, изберете действието "Създаване на екрана съвети". В резултат на това, ако се прави правилно, може да получите съобщение, подобно на следното:

    1. Изберете от действието на списък
    2. Съвети за редактиране на текст
    3. Ако е необходимо, се зареди снимка, вложка / премахване на долната подпис (Footer), в началото на подписа (Header) и т.н.

    подсказка текста по подразбиране за приета стойност Съвет имот в действие. Създаване намек към един от нашите действия.

    Изтеглете снимки за улики. За да направите това, кликнете два пъти върху съответното поле и изберете снимка в BMP формат.
    Тъй като нашата молба все още не разполага със собствена вътрешна препратка, е желателно да се премахне Footer. За да направите това, махнете отметката от опцията Show Footer. В резултат на това аз имам тук този съвет:

    Освен това, за всеки ред, можете да зададете радиусът на кривината на ъглите (Corner Размер на имота), промяна на текст Footer ", но се откажете заглавие, клавиши за бърз достъп (връзки), както и промяна на снимката за Footer (по подразбиране е рисунка въпросителен знак) ,
    И сега най-важното нещо - да направи всички улики, които трябва да се яви в основната форма на собственост за кандидатстване ShowHint равен True.
    Сега стартирате приложението и поставете курсора на мишката върху бутона. След няколко секунди ще се появи:

    В допълнение към този тип подсказките, можете да използвате и TScreenTipsPopup компонент.

    2.3. Работа с компонент TScreenTipsPopup

    За разлика от предишния TScreenTipsPopup компонент е визуален компонент. Смисълът на работата е почти същата като тази на ScreenTipsManager, но с една забележителна разлика - TScreenTipsPopup може да се свърже с всеки компонент форма, дори и така има никакви стъпки в ActionManager "е в нашия случай, такъв компонент е WebBrowser1 Нека създадем .. на Съвет на екрана за него.
    Място на всяко място, удобно за вас нов TScreenTipsPopup компонент.
    Сега отидете на инспектор на обекта и отворете Properties раздела Screen Съвет. Задайте имоти за описание и Горен. Другите характеристики могат да бъдат оставени празни.
    Свързване на бърза с компонент WebBrowser. За този падащ списък, изберете свойствата на компонента сътрудник WebBrowser1, и влезе в жилището, ScreenTipsManager ScreenTipsManager1.
    Стартирайте приложението и поставете курсора на мишката на браузъра:

    Същият ред ще се появи, когато мишката витае над себе си ScreenTipsPopup компонент.
    Това е може би всичко, което се отнася до основите на работа с компоненти панделка контроли.
    Както можете да видите, днес основният фокус на статията е направен точно на визуален интерфейс дизайн с минимална работа с изходния код.
    Следващият път ще отида малко по-далеч и да се направят някои програмиране. Научете как да създавате нови видове елементи, красива PopUp-меню, и така нататък. Така остане с нас и няма да бъде скучен

    Приложението за проба в тази статия може да бъде изтеглен тук

    Сродни връзки