✅ Contêineres e componentes Monodevelop C # e GTK

Índice

GTK # por meio de containers nos permite controlar a posição dos widgets em uma janela para poder criar o desenho. Esses contêineres que possuem características diferentes e servem para orientar o design e a colocação dos componentes ou widget dentro de uma janela.
O recipientes principais está:

Recipientes com caixas horizontais ou verticais
Recipientes com tabelas
Container fixo
Molduras ou contêiner de molduras

Como usar os recipientes de acordo com as necessidades ou requisitos de nossa aplicação
Recipientes com caixas horizontais ou verticais
Se estamos acostumados a programar no Windows e sua metodologia de design de interface de arrastar e soltar, este tipo de contêiner é provavelmente melhor, já que os widgets ou componentes são posicionados na janela usando coordenadas x, e como no Windows e isso é apreciado.
Embora isso seja possível com Gtk e monodevelop, a melhor maneira de alinhar os widgets é com as caixas. Existem dois tipos de caixas horizontal ou HBox e vertical ou VBox. Este tipo de container não depende do tamanho da tela. Os containers HBox e VBox cuidam do redimensionamento automático da zona que um componente ocupa.
Vamos ver um exemplo com caixas horizontais ou verticais. Vamos criar um projeto C # e Gtk no Monodevelop.
Atribuímos a ele um contêiner Vbox e, na última linha, adicionamos um contêiner Hbox.

Então vamos adicionar um botão na última célula do Hbox. Nas propriedades, atribuímos o nome bt Aceitar e no rótulo o nome Aceitar.

Se executarmos o aplicativo a partir do Menu Executar> Iniciar Depuração ou com a chave F5, veremos que o botão está alinhado na área superior esquerda da tela, pois as outras células estão vazias, portanto, não são mostradas.

Para resolver isso podemos usar o container Aligment e colocá-lo nos lugares vazios, para manter o desenho da janela.

Executamos o aplicativo novamente a partir do menu Executar> Iniciar depuração ou com a tecla F5, veremos que o botão agora é mostrado onde o inserimos e respeita o layout da tela. Agora podemos continuar inserindo outros widgets.

Vamos adicionar alguns componentes como o Calendário na célula central do VBox e ele Barra de menu na célula superior do Vbox, O resultado é o seguinte:

Container com Tabelas
Este tipo de contêiner é uma grade com linhas e colunas que podem ser úteis quando precisamos criar uma grade onde podemos colocar widgets, como uma tela de entrada de dados. Vamos ver um exemplo com uma mesa. Vamos criar um projeto C # e Gtk no Monodevelop, vamos criar um formulário de entrada de dados.
Assinamos um container Vbox e na última linha adicionamos um container Hbox, como no projeto anterior adicionamos um Menubar e os botões abaixo, no centro adicionamos um container table.

O container padrão da tabela possui 3 linhas e 3 colunas, agora adicionaremos Widget levando em consideração que cada célula da tabela é redimensionada para o objeto que contém. Para adicionar ou remover linhas ou colunas, clicamos com o botão direito na linha e então vamos para a tabela de opções excluir ou inserir linhas ou colunas.
Vamos remover a última linha e, em seguida, na primeira célula da primeira linha, adicionaremos um contêiner Vox para os rótulos. Então, na segunda célula da primeira linha, adicionaremos um contêiner Vox para a Entrada ou caixas de texto.

Podemos definir as propriedades de cada controle para melhor posicioná-lo, no caso de Labels a propriedade terá que ser ajustada Preenchimento para ajustá-lo ao nível das caixas de texto, bastará um preenchimento de 5px em cada Label.

Vamos adicionar os componentes necessários para registrar e exibir a foto do usuário, para eles na primeira Vbox, clicar com o botão direito do mouse na célula da etiqueta do telefone permite inserir uma célula na vbox, também adicionaremos uma célula na outro vbox.
Agora vamos adicionar um etiqueta Foto e um widget Seletor de Arquivos Botão para selecionar o arquivo, também na terceira linha da tabela adicionaremos um widget de imagem que será o que mostrará a foto, devemos levar em consideração que a imagem está no diretório de compilação da aplicação neste caso Depurar que é gerado automaticamente durante a execução. A imagem selecionada tem 100 pixels de altura por 100 pixels de largura.

Container Fixo
Os contêineres fixos nos permitem arrastar e soltar o widget em posições fixas e com tamanhos fixos. Este contêiner não executa nenhum gerenciamento automático de layout, nem redimensiona os widgets. Eles são usados em alguns aplicativos onde são necessários widgets que mais tarde serão gerenciados por código, como jogos, aplicativos especializados que funcionam com diagramas ou gráficos como OpenGL ou 3D.
Vamos ver um exemplo onde colocaremos um container fixo e várias imagens.

Colocamos um widget de imagem no fundo, outro widget de imagem no fundo com um avião e outro widget de imagem no fundo com a imagem de um jogador de golfe. Cada imagem está em uma coordenada fixa que então poderíamos gerenciar as coordenadas por código para conseguir o efeito de movimento ou animação se fosse um jogo.
Molduras ou contêiner de molduras
Quadros ou Quadros como no Visual Studio o controle Groupbox é usado, eles são usados para conter um grupo de widgets dentro. O objetivo de um quadro é definir o widget do grupo por categorias ou seções relacionadas, opcionalmente pode ter um título. A posição do título e o estilo da caixa configurados a partir das propriedades.
O rótulo do título aparece no canto superior esquerdo do quadro. Se nenhum título for colocado, ele ficará vazio e o título não será exibido. O texto do rótulo pode ser alterado usando o Propriedade do rótulo.
Em um Quadro você pode combinar qualquer um dos contêineres acima e vice-versa.
Vamos criar uma tela Mestre / Detalhe, usando frames. Vamos criar um Projeto C # e Gtk em Monodevelop e assinamos um contêiner Vbox com 4 linhas e na primeira linha adicionamos um Barra de menu,
Na segunda linha, adicionamos um contêiner de quadro, o título do rótulo será produtos e atribuímos a ele um tipo de borda sombreada IN.

Dentro do quadro, adicionamos um contêiner de Tabela com 4 linhas e 3 colunas para criar um formulário de entrada de dados e na última linha central da tabela colocamos um Hbox com duas caixas para os botões Gravar Y Cancelar.
Na terceira linha do Vbox colocamos uma barra separadora com o widget Separador Horizontal e na última linha do Vbox colocaremos outro frame e uma Treeview.

Lembre-se de que para que tudo esteja alinhado corretamente, devemos tocar na propriedade de preenchimento de cada widget. Para preencher a Treeview que chamaremos de tvwlista, usaremos o código c # na classe Mainwindows, que será o seguinte:

 public MainWindow (): base (Gtk.WindowType.Toplevel) {Build (); // Eu crio as colunas e cabeçalhos da treeview // Eu crio a coluna do produto Gtk.TreeViewColumn Product col = new Gtk.TreeViewColumn (); colProducto.Title = "Produto"; // Eu crio a coluna de estoque Gtk.TreeViewColumn colStock = new Gtk.TreeViewColumn (); colStock.Title = "Estoque"; // Eu crio a coluna de preço Gtk.TreeViewColumn pricecol = new Gtk.TreeViewColumn (); colPrice.Title = "Preço"; // Eu adiciono as colunas e as intitulo para a treeview tvwlista.AppendColumn (colProduct); tvwlista.AppendColumn (colStock); tvwlista.AppendColumn (pricecol); // Eu crio um modelo de dados para armazenar e onde adiciono três dados do tipo text Gtk.ListStore store = new Gtk.ListStore (typeof (string), typeof (string), typeof (string)); // Eu atribuo o modelo ao TreeView tvwlista.Model = store; // Eu adiciono dados ao modelo store.AppendValues ("TABLET SAMSUNG", "5", "175"); store.AppendValues ("MACBOOK PRO", "10", "2680"); store.AppendValues ("SEGATE DISK 1 TB", "10", "85"); // Criamos uma célula que irá mostrar o produto Gtk.CellRendererText productCell = new Gtk.CellRendererText (); // Adicionamos a célula de dados do produto colProduct.PackStart (productCell, true); // Adiciona a célula de dados de estoque Gtk.CellRendererText cellStock = new Gtk.CellRendererText (); colStock.PackStart (cellStock, true); // Adiciona a célula de dados de preço Gtk.CellRendererText PriceCell = new Gtk.CellRendererText (); pricecol.PackStart (priceCell, true); // Adicionamos as células de dados a cada coluna e as linhas serão geradas // colProducto.AddAttribute (cellProducto, "text", 0); colStock.AddAttribute (cellStock, "text", 1); priceCol.AddAttribute (priceCell, "texto", 2); }

Em seguida, executamos e o resultado será o seguinte: