✅ Monodevelop C # a GTK kontejnery a komponenty

Obsah

GTK # pomocí kontejnerů nám umožňuje ovládat polohu widgetů v okně, abychom mohli vytvořit design. Tyto kontejnery, které mají různé vlastnosti a slouží jako vodítko při návrhu a umístění komponent nebo widgetu v okně.
The hlavní kontejnery jsou:

Kontejnery s horizontálními nebo vertikálními boxy
Kontejnery s tabulkami
Opravený kontejner
Rámy nebo rámový kontejner

Jak používat kontejnery podle potřeb nebo požadavků naší aplikace
Kontejnery s horizontálními nebo vertikálními boxy
Pokud jsme zvyklí programovat pod Windows a jeho metodikou návrhu rozhraní drag-and-drop, je tento typ kontejneru pravděpodobně lepší, protože widgety nebo komponenty jsou umístěny v okně pomocí souřadnic x a jak v systému Windows a to se cení.
Ačkoli je to možné u Gtk a monodevelop, nejlepší způsob, jak zarovnat widgety, je s rámečky. Existují dva typy krabic horizontální nebo HBox a vertikální nebo VBox. Tento typ kontejneru nezávisí na velikosti obrazovky. Kontejnery HBox a VBox se starají o automatickou změnu velikosti zóny, kterou součást zabírá.
Podívejme se na příklad s vodorovnými nebo svislými rámečky. Vytvoříme projekt C # a Gtk v Monodevelop.
Přiřadíme mu kontejner Vbox a v posledním řádku přidáme kontejner Hbox.

Poté přidáme tlačítko do poslední buňky Hboxu. Ve vlastnostech přiřadíme název bt Přijmout a na štítku název Přijmout.

Pokud spustíme aplikaci z Nabídka Spustit> Spustit ladění nebo pomocí klíče F5, uvidíme, že tlačítko je zarovnáno v levé horní části obrazovky, protože ostatní buňky jsou prázdné, proto nejsou zobrazeny.

K vyřešení tohoto problému můžeme použít vyrovnávací kontejner a umístit jej na prázdná místa, abychom zachovali design okna.

Aplikaci opět spustíme z nabídky Spustit> Spustit ladění nebo s klávesou F5 uvidíme, že tlačítko je nyní zobrazeno tam, kam jsme jej vložili a respektuje rozložení obrazovky. Nyní můžeme pokračovat ve vkládání dalších widgetů.

Pojďme přidat některé komponenty jako Kalendář v centrální buňce VBox a Lišta menu v horní buňce Vbox, Výsledek je následující:

Kontejner s tabulkami
Tento typ kontejneru je mřížka s řádky a sloupci, která může být užitečná, když potřebujeme vytvořit mřížku, kam můžeme umístit widgety, například obrazovku pro zadávání dat. Podívejme se na příklad s tabulkou. Vytvoříme projekt C # a Gtk v Monodevelopu, vytvoříme formulář pro zadávání dat.
Podepíšeme kontejner Vbox a v posledním řádku přidáme kontejner Hbox, stejně jako v předchozím projektu přidáme Menubar a tlačítka níže, uprostřed přidáme kontejner tabulky.

Výchozí kontejner tabulky má 3 řádky a 3 sloupce, nyní přidáme Widget s přihlédnutím k tomu, že velikost každé buňky v tabulce se změní na objekt, který obsahuje. Chcete -li přidat nebo odebrat řádky nebo sloupce, klikněte pravým tlačítkem na řádek a poté přejděte na tabulku možností odstranit nebo vložit řádky nebo sloupce.
Odstraníme poslední řádek a pak do první buňky prvního řádku přidáme kontejner Vox pro štítky. Poté do druhé buňky prvního řádku přidáme kontejner Vox pro pole Vstup nebo textová pole.

Můžeme definovat vlastnosti pro každý ovládací prvek, abychom jej lépe umístili, v případě štítků bude nutné vlastnost vyladit Polstrování k úpravě na úroveň textových polí bude stačit odsazení 5 pixelů v každém štítku.

Chystáme se přidat potřebné komponenty pro registraci a zobrazení fotografie uživatele, pro ně v prvním Vboxu, kliknutí pravým tlačítkem na buňku štítku telefonu nám umožní vložit buňku do vboxu, také přidáme buňku do jiný vbox.
Nyní přidáme a štítek Foto a widget Výběr souborů Tlačítko pro výběr souboru, Také do třetí řady tabulky přidáme Image widget, který bude ten, který zobrazí fotografii, musíme vzít v úvahu, že obrázek je v tomto případě v adresáři kompilace aplikace Ladit který se generuje automaticky při provádění. Vybraný obrázek má výšku 100 pixelů a šířku 100 pixelů.

Opravený kontejner
Pevné kontejnery nám umožňují přetahovat widget do pevných pozic a s pevnými velikostmi. Tento kontejner neprovádí žádnou automatickou správu rozložení ani nemění velikost widgetů. Používají se v některých aplikacích, kde jsou potřeba widgety, které budou později spravovány kódem, jako jsou hry, specializované aplikace, které pracují s diagramy nebo grafikou, jako je OpenGL nebo 3D.
Podívejme se na příklad, kam vložíme pevný kontejner a několik obrázků.

Dali jsme Image Widget na pozadí, další Image Widget na pozadí s letadlem a další Image widget na pozadí s obrázkem golfisty. Každý obrázek je v pevné souřadnici, že pak bychom mohli spravovat souřadnice kódem, abychom dosáhli efektu pohybu nebo animace, pokud by to byla hra.
Rámy nebo rámový kontejner
Rámečky nebo Rámce jako v aplikaci Visual Studio se používá ovládací prvek Groupbox, slouží k tomu, aby uvnitř obsahoval skupinu widgetů. Účelem rámce je definovat widget skupiny podle kategorií nebo souvisejících sekcí, volitelně může mít název. Pozice nadpisu a styl pole se konfigurují z vlastností.
Popisek názvu se zobrazí v levém horním rohu rámečku. Pokud není zadán žádný název, bude prázdný a název se nezobrazí. Text štítku lze změnit pomocí Vlastnost štítku.
V Rám můžete libovolný z výše uvedených kontejnerů kombinovat a naopak.
Pojďme vytvořit obrazovku Master / Detailpomocí rámečků. Vytvoříme a Projekt C # a Gtk v Monodevelop a podepíšeme kontejner Vbox se 4 řádky a první řádek přidáme a Lišta menu,
Do druhého řádku přidáme kontejner rámce, název štítku bude produkty a přiřadíme mu stínovaný okraj typu IN.

Do rámečku přidáme kontejner Table se 4 řádky a 3 sloupci pro vytvoření formuláře pro zadávání dat a do posledního centrálního řádku v tabulce vložíme Hbox se dvěma políčky pro tlačítka Vyrýt Y zrušení.
Do třetí řady Vboxu vložíme oddělovací lištu s widgetem Horizontal Separator a do poslední řady Vbox vložíme další rámeček a Treeview.

Pamatujte, že aby bylo vše správně zarovnáno, musíme se dotknout vlastnosti výplně každého widgetu. K vyplnění Treeview, který budeme volat tvwlista, použijeme kód c # ve třídě Mainwindows, který bude následující:

 public MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // I create the columns and headers of the treeview // I create the product column Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Produkt"; // I create the stock column Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Sklad"; // I create the price column Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Cena"; // Přidám sloupce a pojmenuji je do treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Vytvořím datový model pro uložení a kam přidám tři data textového typu Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // Přiřadím model do TreeView tvwlista.Model = store; // Přidávám data do úložiště modelů.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues („MACBOOK PRO“, „10“, „2680“); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Vytvoříme buňku, která zobrazí produkt Gtk.CellRendererText productCell = nový Gtk.CellRendererText (); // Přidáme buňku produktových dat colProduct.PackStart (productCell, true); // Přidání datové buňky Gtk.CellRendererText cellStock = nový Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Přidat buňku cenových dat Gtk.CellRendererText PriceCell = nový Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Do každého sloupce přidáme datové buňky a vygenerují se řádky // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "text", 1); priceCol.AddAttribute (priceCell, "text", 2); }

Dále spustíme a výsledek bude následující: