✅ Kontenery i komponenty Monodevelop C# i GTK

Spisie treści

GTK # za pomocą kontenerów pozwala nam kontrolować położenie widżetów w oknie, aby móc tworzyć projekt. Te kontenery, które mają różne cechy i służą do kierowania projektowaniem i umieszczaniem komponentów lub widżetów w oknie.
ten główne pojemniki są:

Kontenery ze skrzynkami poziomymi lub pionowymi
Pojemniki ze stolikami
Naprawiono pojemnik
Ramki lub pojemnik na ramki

Jak używać pojemników zgodnie z potrzebami lub wymaganiami naszej aplikacji?
Kontenery ze skrzynkami poziomymi lub pionowymi
Jeśli jesteśmy przyzwyczajeni do programowania w systemie Windows i jego metodologii projektowania interfejsu typu „przeciągnij i upuść”, ten rodzaj kontenera jest prawdopodobnie lepszy, ponieważ widżety lub komponenty są umieszczane w oknie za pomocą współrzędnych x i jak w systemie Windows i to jest doceniane.
Chociaż jest to możliwe w przypadku Gtk i monodevelop, najlepszym sposobem na wyrównanie widżetów jest użycie pól. Istnieją dwa rodzaje pudełek pozioma lub HBox i pionowa lub VBox. Ten rodzaj kontenera nie zależy od rozmiaru ekranu. Kontenery HBox i VBox dbają o automatyczną zmianę rozmiaru strefy zajmowanej przez komponent.
Zobaczmy przykład z polami poziomymi lub pionowymi. Stworzymy projekt C# i Gtk w Monodevelop.
Przypisujemy mu kontener Vbox i w ostatnim wierszu dodajemy kontener Hbox.

Następnie dodamy przycisk w ostatniej komórce Hbox. We właściwościach przypisujemy nazwę bt Akceptować a na etykiecie nazwa Akceptować.

Jeśli uruchomimy aplikację z Uruchom menu> Rozpocznij debugowanie lub klawiszem F5, zobaczymy, że przycisk jest wyrównany w lewym górnym obszarze ekranu, ponieważ inne komórki są puste, dlatego nie są wyświetlane.

Aby rozwiązać ten problem, możemy użyć kontenera Alignment i umieścić go w pustych miejscach, aby zachować projekt okna.

Ponownie uruchamiamy aplikację z menu Uruchom> Rozpocznij debugowanie lub za pomocą klawisza F5 zobaczymy, że przycisk jest teraz pokazany w miejscu, w którym go wstawiliśmy i przestrzega układu ekranu. Teraz możemy kontynuować wstawianie innych widżetów.

Dodajmy kilka komponentów, takich jak Kalendarz w centralnej komórce VBox i Pasek menu w górnej komórce Vbox, Wynik jest następujący:

Pojemnik ze stolikami
Ten rodzaj kontenera to siatka z wierszami i kolumnami, która może być przydatna, gdy musimy utworzyć siatkę, w której możemy umieszczać widżety, takie jak ekran wprowadzania danych. Zobaczmy przykład z tabelą. Stworzymy projekt C# i Gtk w Monodevelop, stworzymy formularz wprowadzania danych.
Podpisujemy kontener Vbox i w ostatnim rzędzie dodajemy kontener Hbox, tak jak w poprzednim projekcie dodajemy Menubar i przyciski poniżej, na środku dodajemy kontener tabeli.

Domyślny kontener tabeli ma 3 wiersze i 3 kolumny, teraz dodamy Widget, biorąc pod uwagę, że każda komórka w tabeli jest zmieniana na obiekt, który zawiera. Aby dodać lub usunąć wiersze lub kolumny klikamy prawym przyciskiem myszy wiersz, a następnie przechodzimy do opcji tabeli usuń lub wstaw wiersze lub kolumny.
Usuńmy ostatni wiersz, a następnie w pierwszej komórce pierwszego wiersza dodamy kontener Vox dla etykiet. Następnie w drugiej komórce pierwszego wiersza dodamy kontener Vox dla pola wpisu lub pól tekstowych.

Możemy zdefiniować właściwości dla każdej kontrolki, aby lepiej ją pozycjonować, w przypadku etykiet, właściwość będzie musiała zostać poprawiona Wyściółka aby dostosować go do poziomu pól tekstowych, wystarczy dopełnienie 5px w każdej etykiecie.

Zamierzamy dodać niezbędne komponenty do rejestracji i wyświetlenia zdjęcia użytkownika, dla nich w pierwszym Vbox, kliknięcie prawym przyciskiem myszy na komórce etykiety telefonu pozwala nam wstawić komórkę do vbox, dodamy również komórkę do inny vbox.
Teraz dodamy zdjęcie etykiety i widżet Wybór pliku Przycisk do wyboru pliku, Również w trzecim wierszu tabeli dodamy widżet Image który będzie tym który pokaże zdjęcie, musimy wziąć pod uwagę że obraz znajduje się w katalogu kompilacji aplikacji w tym przypadku Odpluskwić który jest generowany automatycznie podczas wykonywania. Wybrany obraz ma 100 pikseli wysokości i 100 pikseli szerokości.

Naprawiono pojemnik
Stałe kontenery pozwalają nam na przeciąganie i upuszczanie widgetu w stałych pozycjach io stałych rozmiarach. Ten kontener nie wykonuje żadnego automatycznego zarządzania układem ani nie zmienia rozmiaru widżetów. Są używane w niektórych aplikacjach, w których potrzebne są widżety, które później będą zarządzane przez kod, takie jak gry, specjalistyczne aplikacje pracujące z diagramami lub grafiką, takie jak OpenGL lub 3D.
Zobaczmy przykład, w którym umieścimy stały pojemnik i kilka obrazów.

Umieściliśmy widżet obrazu w tle, inny widżet obrazu w tle z samolotem i inny widżet obrazu w tle z wizerunkiem golfisty. Każdy obraz ma ustaloną współrzędną, dzięki czemu moglibyśmy zarządzać współrzędnymi za pomocą kodu, aby uzyskać efekt ruchu lub animacji, gdyby była to gra.
Ramki lub pojemnik na ramki
Ramki lub Ramki podobnie jak w Visual Studio wykorzystuje się kontrolkę Groupbox, służą one do zawierania wewnątrz grupy widżetów, Celem ramki jest zdefiniowanie widżetu grupowego według kategorii lub powiązanych sekcji, opcjonalnie może mieć tytuł. Położenie tytułu i styl pudełka konfiguruje się we właściwościach.
Etykieta tytułu pojawi się w lewym górnym rogu ramki. Jeśli nie zostanie wprowadzony żaden tytuł, będzie on pusty i tytuł nie będzie wyświetlany. Tekst etykiety można zmienić za pomocą Właściwość etykiety.
W Rama możesz połączyć dowolny z powyższych pojemników i odwrotnie.
Stwórzmy ekran Mistrz/Szczegóły, używając ramek. Stworzymy Projekt C# i Gtk w Monodevelop i podpisujemy kontener Vbox z 4 rzędami i pierwszy rząd dodajemy a Pasek menu,
W drugim wierszu dodajemy kontener ramki, tytułem etykiety będą produkty i przypisujemy jej zacieniowane obramowanie typu IN.

Wewnątrz ramki dodajemy kontener Table z 4 wierszami i 3 kolumnami, aby utworzyć formularz wprowadzania danych, a w ostatnim środkowym wierszu tabeli umieszczamy Hbox z dwoma polami na przyciski Grawerować Tak anulować.
W trzecim wierszu Vbox umieścimy pasek separatora z widżetem Horizontal Separator, a w ostatnim wierszu Vbox umieścimy kolejną ramkę i Treeview.

Pamiętaj, że aby wszystko było odpowiednio wyrównane, musimy dotknąć właściwości padding każdego widżetu. Aby wypełnić Treeview, który nazwiemy tvwlista, użyjemy kodu c# w klasie Mainwindows, który będzie wyglądał następująco:

 publiczne MainWindow (): podstawa (Gtk.WindowType.Toplevel) {Build (); // tworzę kolumny i nagłówki widoku drzewa // tworzę kolumnę produktu Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Produkt"; // tworzę kolumnę zapasową Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Zapas"; // tworzę kolumnę ceny Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Cena"; // Dodaję kolumny i zatytułuję je do tvwlista.AppendColumn (colProduct) widoku drzewa; tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (cenakol); // tworzę model danych do przechowywania i gdzie dodaję trzy dane typu text Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // przypisuję model do TreeView tvwlista.Model = store; // Dodaję dane do modelu store.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Tworzymy komórkę, która będzie wyświetlała produkt Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // Dodajemy komórkę danych produktu colProduct.PackStart (productCell, true); // Dodaj komórkę danych giełdowych Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, prawda); // Dodaj komórkę danych ceny Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, prawda); // Dodamy komórki danych do każdej kolumny i zostaną wygenerowane wiersze // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "tekst", 1); priceCol.AddAttribute (priceCell, "text", 2); }

Następnie wykonujemy, a wynik będzie następujący: