✅ Monodevelop C # и GTK контейнери и компоненти

Съдържание

GTK # чрез контейнери ни позволява да контролираме позицията на приспособленията в прозорец, за да можем да създадем дизайна. Тези контейнери, които имат различни характеристики и служат за ръководство при проектирането и поставянето на компонентите или джаджата в прозорец.
The основни контейнери са:

Контейнери с хоризонтални или вертикални кутии
Контейнери с маси
Фиксиран контейнер
Рамки или рамков контейнер

Как да използваме контейнерите според нуждите или изискванията на нашето приложение
Контейнери с хоризонтални или вертикални кутии
Ако сме свикнали да програмираме под Windows и неговата методология за проектиране на интерфейс с плъзгане и пускане, този тип контейнер вероятно е по-добър, тъй като приспособленията или компонентите са позиционирани в прозореца с помощта на координати x и как в Windows и това се оценява.
Въпреки че това е възможно с Gtk и monodevelop, най -добрият начин за подравняване на приспособленията е с кутиите. Има два вида кутии хоризонтално или HBox и вертикално или VBox. Този тип контейнер не зависи от размера на екрана. Контейнерите HBox и VBox се грижат за автоматичното преоразмеряване на зоната, която компонентът заема.
Нека видим пример с хоризонтални или вертикални кутии. Ще създадем проект на C # и Gtk в Monodevelop.
Присвояваме му Vbox контейнер и в последния ред добавяме Hbox контейнер.

След това ще добавим бутон в последната клетка на Hbox. В свойствата присвояваме името bt Да приеме и в етикета името Да приеме.

Ако стартираме приложението от Изпълнете менюто> Стартиране на отстраняване на грешки или с ключа F5, ще видим, че бутонът е подравнен в горната лява част на екрана, тъй като другите клетки са празни, поради което не се показват.

За да разрешим това, можем да използваме контейнера Aligment и да го поставим на празните места, за да поддържаме дизайна на прозореца.

Пускаме приложението отново от менюто Изпълнение> Стартиране на отстраняване на грешки или с клавиша F5, ще видим, че бутонът вече е показан там, където сме го вмъкнали и зачита оформлението на екрана. Сега можем да продължим с вмъкването на други джаджи.

Нека добавим някои компоненти като Календар в централната клетка на VBox и MenuBar в горната клетка на Vbox, Резултатът е следният:

Контейнер с маси
Този тип контейнер е мрежа с редове и колони, които могат да бъдат полезни, когато трябва да създадем мрежа, където можем да поставим приспособления, като например екран за въвеждане на данни. Нека да видим пример с таблица. Ще създадем проект на C # и Gtk в Monodevelop, ще създадем формуляр за въвеждане на данни.
Подписваме контейнер Vbox и в последния ред добавяме контейнер Hbox, както в предишния проект добавяме лента с менюта и бутоните по -долу, в центъра добавяме контейнер за таблица.

Контейнерът за таблица по подразбиране има 3 реда и 3 колони, сега ще добавим Widget, като вземем предвид, че всяка клетка в таблицата се преоразмерява до обекта, който съдържа. За да добавите или премахнете редове или колони, щракнете с десния бутон върху реда и след това отидете в таблицата с опции изтриване или вмъкване на редове или колони.
Нека премахнем последния ред и след това в първата клетка на първия ред ще добавим Vox контейнер за етикетите. След това във втората клетка на първия ред ще добавим Vox контейнер за Entry или текстови полета.

Можем да дефинираме свойствата на всяка контрола, за да я позиционираме по -добре, в случай на Labels, свойството ще трябва да бъде променено Подплата за да го регулирате до нивото на текстовите полета, с пълнеж от 5px във всеки етикет ще бъде достатъчно.

Ще добавим необходимите компоненти за регистриране и показване на снимката на потребителя, за тях в първия Vbox, щракването с десния бутон върху клетката на етикета на телефона ни позволява да вмъкнем клетка във vbox, ние също ще добавим клетка към друг vbox.
Сега ще добавим а етикет Снимка и джаджа Избор на файлове Бутон за избор на файла, Също така в третия ред на таблицата ще добавим джаджа за изображение, която ще бъде тази, която ще покаже снимката, трябва да вземем предвид, че изображението е в директорията за компилация на приложението в този случай Отстраняване на грешки който се генерира автоматично при изпълнение. Избраното изображение е с височина 100px и ширина 100px.

Фиксиран контейнер
Фиксираните контейнери ни позволяват да плъзгаме и пускаме джаджа в фиксирани позиции и с фиксирани размери. Този контейнер не извършва никакво автоматично управление на оформлението, нито променя размера на приспособленията. Те се използват в някои приложения, където са необходими джаджи, които по -късно ще се управляват от код като игри, специализирани приложения, които работят с диаграми или графики като OpenGL или 3D.
Нека видим пример, в който ще поставим фиксиран контейнер и няколко изображения.

Поставихме Image Widget на заден план, друг Image Widget на заден план със самолет и друг Image Widget на заден план с изображение на голфър. Всяко изображение е с фиксирана координата, след което можем да управляваме координатите по код, за да постигнем ефекта на движение или анимация, ако беше игра.
Рамки или контейнер на рамката
Рамки или рамки, както във Visual Studio се използва контролата Groupbox, те се използват, за да съдържат група приспособления вътре. Целта на рамката е да дефинира джаджа за група по категории или свързани секции, по избор може да има заглавие. Позицията на заглавието и стилът на кутията се конфигурират от свойствата.
Етикетът на заглавието се появява в горния ляв ъгъл на рамката. Ако не бъде поставено заглавие, то ще бъде празно и заглавието няма да се показва. Текстът на етикета може да бъде променен с помощта на Собственост на етикета.
В Кадър можете да комбинирате някой от горните контейнери и обратно.
Нека създадем екран Майстор / Детайл, използвайки рамки. Ще създадем a C # и Gtk проект в Monodevelop и ние подписваме Vbox контейнер с 4 реда и първият ред добавяме a Менюбар,
Във втория ред добавяме рамков контейнер, заглавието на етикета ще бъде продукти и му присвояваме засенчена рамка тип IN.

Вътре в рамката добавяме контейнер за таблица с 4 реда и 3 колони, за да създадем формуляр за въвеждане на данни, а в последния централен ред в таблицата поставяме Hbox с две кутии за бутоните Гравиране Y Отказ.
В третия ред на Vbox поставяме разделителна лента с приспособлението Horizontal Separator и в последния ред на Vbox ще поставим друга рамка и Treeview.

Не забравяйте, че за да бъде всичко правилно подравнено, трябва да докоснем свойството за пълнене на всяка джаджа. За да запълним Treeview, който ще наречем tvwlista, ще използваме c # код в класа Mainwindows, който ще бъде следният:

 публичен MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Създавам колоните и заглавките на дървовидния // Създавам продуктовата колона Gtk.TreeViewColumn Продукт col = нов Gtk.TreeViewColumn (); colProducto.Title = "Продукт"; // Създавам колона за акции Gtk.TreeViewColumn colStock = нов Gtk.TreeViewColumn (); colStock.Title = "Запас"; // Създавам ценовата колона Gtk.TreeViewColumn pricecol = нов Gtk.TreeViewColumn (); colPrice.Title = "Цена"; // Добавям колоните и ги заглавям към дървовидния tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Създавам модел на данни за съхранение и където добавям три данни от тип текст Gtk.ListStore store = new Gtk.ListStore (typeof (низ), typeof (низ), typeof (низ)); // Присвоявам модела на TreeView tvwlista.Model = store; // Добавям данни към магазина за модели.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Създаваме клетка, която ще показва продукта Gtk.CellRendererText productCell = нов Gtk.CellRendererText (); // Добавяме клетката с данни за продукта colProduct.PackStart (productCell, true); // Добавяне на клетка с данни за акции Gtk.CellRendererText cellStock = нов Gtk.CellRendererText (); colStock.PackStart (cellStock, вярно); // Добавете клетката с ценови данни Gtk.CellRendererText PriceCell = нов Gtk.CellRendererText (); pricecol.PackStart (priceCell, вярно); // Добавяме клетките с данни към всяка колона и редовете ще бъдат генерирани // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "текст", 1); priceCol.AddAttribute (priceCell, "текст", 2); }

След това изпълняваме и резултатът ще бъде следният: