Programando Winforms avançados em C #

Neste tutorial de programação em C #, vou me concentrar nos controles avançados, como ComboBoxes, Grids e ListViews, e mostrando como você provavelmente os usará. Não estou tocando em dados nem em ligações até um tutorial posterior. Vamos começar com um controle simples, um ComboBox.

No coração de uma combinação, há uma coleção de itens e a maneira mais simples de preenchê-la é soltar uma combinação na tela, selecione propriedades (se não conseguir ver as janelas de propriedades, clique em Exibir no menu superior e depois em Janela de propriedades), localize itens e clique nas reticências botão. Você pode digitar as strings, compilar o programa e puxar o combo para baixo para ver as opções.

Agora pare o programa e adicione mais alguns números: quatro, cinco.. Até dez. Ao executá-lo, você verá apenas 8, porque esse é o valor padrão de MaxDropDownItems. Sinta-se livre para configurá-lo para 20 ou 3 e, em seguida, execute-o para ver o que faz.

É irritante que quando ele abre diz comboBox1 e você pode editá-lo. Não é isso que queremos. Localize a propriedade DropDownStyle e altere DropDown para DropDownList. (É um Combo!). Agora não há texto e não é editável. Você pode selecionar um dos números, mas ele sempre é aberto em branco. Como selecionamos um número para começar? Bem, não é uma propriedade que você pode definir em tempo de design, mas adicionar essa linha fará isso.

instagram viewer

Adicione essa linha no construtor Form1 (). Você precisa visualizar o código do formulário (no Solution Explorer, clique com o botão direito do mouse em From1.cs e clique em View Code. Encontre InitializeComponent (); e adicione essa linha imediatamente após isso.

Se você definir a propriedade DropDownStyle para o combo como Simples e executar o programa, não obterá nada. Não irá selecionar, clicar ou responder. Por quê? Porque, no momento do design, você deve agarrar a alça de estiramento inferior e aumentar o controle.

No exemplo 2, renomei o ComboBox para combo, alterei o combo DropDownStyle de volta para DropDown para que ele possa ser editado e adicionado um botão Adicionar chamado btnAdd. Cliquei duas vezes no botão Adicionar para criar um manipulador de eventos btnAdd_Click () e adicionei esta linha de eventos.

Agora, quando você executar o programa, digite um novo número, diga Onze e clique em adicionar. O manipulador de eventos recebe o texto digitado (na combinação. Texto) e o adiciona à coleção de itens do Combo. Clique no Combo e agora temos uma nova entrada Eleven. É assim que você adiciona uma nova string a um Combo. Para remover um é um pouco mais complicado, pois você precisa encontrar o índice da string que deseja remover e removê-lo. O método RemoveAt mostrado abaixo é um método de coleta para fazer isso. você apenas precisa especificar qual item no parâmetro Removeindex.

irá remover a string na posição RemoveIndex. Se houver n itens no combo, os valores válidos serão de 0 a n-1. Para 10 itens, valores 0..9.

Se isso não encontrar o texto, ele retornará -1, caso contrário, ele retornará o índice baseado em 0 da string na lista de combinação. Há também um método sobrecarregado de FindStringExact, que permite especificar de onde você inicia a pesquisa, para que você possa pular o primeiro, etc., se houver duplicatas. Isso pode ser útil para remover duplicatas em uma lista.

Clicar em btnAddMany_Click () limpa o texto do combo, depois limpa o conteúdo da coleção de itens do combo e chama o combo. AddRange (para adicionar as seqüências de caracteres da matriz de valores. Depois de fazer isso, ele define o SelectedIndex da combinação como 0. Isso mostra o primeiro elemento no combo. Se você estiver adicionando ou excluindo itens em uma ComboBox, é melhor acompanhar o item selecionado. Definir SelectedIndex como -1 oculta os itens selecionados.

O botão Adicionar lotes limpa a lista e adiciona 10.000 números. Eu adicionei combo. BeginUpdate () e combo, EndUpdate () chama o loop para impedir que qualquer cintilação do Windows tente atualizar o controle. No meu PC de três anos, leva pouco mais de um segundo para adicionar 100.000 números ao combo.

Este é um controle útil para exibir dados tabulares sem a complexidade de uma grade. Você pode exibir itens como ícones grandes ou pequenos, como uma lista de ícones em uma lista vertical ou mais útil como uma lista de itens e subitens em uma grade, e é isso que faremos aqui.

Depois de soltar um ListView em um formulário, clique na propriedade de colunas e adicione 4 colunas. Estes serão TownName, X, Y e Pop. Defina o texto para cada ColumnHeader. Se você não conseguir ver os títulos no ListView (depois de adicionar todos os 4), defina a propriedade View do ListView como Detalhes. Se você visualizar o código deste exemplo, navegue até onde diz o código do Windows Form Designer e expanda a região em que vê o código que cria o ListView. É útil ver como o sistema funciona e você pode copiar esse código e usá-lo você mesmo.

Você pode definir a largura de cada coluna manualmente, movendo o cursor sobre o cabeçalho e arrastando-o. Ou você pode fazê-lo no código visível depois de expandir a região do designer de formulários. Você deve ver um código como este:

Para a coluna da população, as alterações no código são refletidas no designer e vice-versa. Observe que, mesmo que você defina a propriedade Locked como true, isso afeta apenas o designer e, em tempo de execução, você pode redimensionar as colunas.

As ListViews também vêm com várias propriedades dinâmicas. Clique em (Propriedades dinâmicas) e marque a propriedade desejada. Quando você define uma propriedade para ser dinâmica, ela cria um arquivo .config XML e o adiciona ao Solution Explorer.

Fazer alterações no tempo de design é uma coisa, mas realmente precisamos fazer isso quando o programa está em execução. Um ListView é composto de 0 ou mais itens. Cada item (um ListViewItem) possui uma propriedade de texto e uma coleção de SubItems. A primeira coluna exibe o texto do item, a próxima coluna exibe SubItem [0] .text, depois SubItem [1] .text e assim por diante.

Adicionei um botão para adicionar uma linha e uma caixa de edição para o nome da cidade. Digite qualquer nome na caixa e clique em Adicionar linha. Isso adiciona uma nova linha ao ListView com o nome da cidade colocado na primeira coluna e nas próximas três colunas (SubItems [0..2]) são preenchidos com números aleatórios (convertidos em strings) adicionando essas strings a eles.

Agora defina a propriedade ListView Multiselect como false. Queremos selecionar apenas um item de cada vez, mas se você deseja remover mais de uma vez, é semelhante, exceto que você precisa fazer o inverso. (Se você executar um loop na ordem normal e excluir itens, os itens subsequentes ficarão fora de sincronia com os índices selecionados).

O menu do botão direito ainda não funciona, pois não temos itens de menu para exibi-lo. Então, clique com o botão direito do mouse em PopupMenu (abaixo do formulário) e você verá o Menu de contexto na parte superior do formulário, onde o editor de menus normal aparece. Clique nele e onde diz Digitar aqui, digite Remover item. A janela de propriedades mostrará um MenuItem, então renomeie para mniRemove. Clique duas vezes nesse item de menu e você deverá obter a função de código do manipulador de eventos menuItem1_Click. Adicione este código para que fique assim.

Se você perder de vista o item Remover, basta clicar no controle PopupMenu sozinho, sob o formulário no formulário Designer. Isso o trará de volta à vista.

No entanto, se você executá-lo e não adicionar um item e selecioná-lo, ao clicar com o botão direito do mouse, acessar o menu e clicar em Remover Item, haverá uma exceção porque não há nenhum item selecionado. Isso é uma programação ruim, então veja como você o corrige. Clique duas vezes no evento pop-up e adicione esta linha de código.

Um DataGridView é o componente mais complexo e mais útil fornecido gratuitamente com C #. Ele funciona com as duas fontes de dados (ou seja, dados de um banco de dados) e sem (ou seja, dados que você adiciona programaticamente). No restante deste tutorial, mostrarei como usá-lo sem fontes de dados. Para necessidades de exibição mais simples, você pode encontrar um ListView simples mais adequado.

Se você usou um controle DataGrid mais antigo, esse é apenas um dos esteróides: oferece mais tipos de colunas incorporados, pode trabalhar com dados internos e externos, mais personalização da exibição (e eventos) e oferece mais controle sobre o manuseio de células com congelamento de linhas e colunas.

Ao projetar formulários com dados de grade, é mais comum especificar diferentes tipos de colunas. Você pode ter caixas de seleção em uma coluna, texto somente leitura ou editável em outra e números dos cursos. Esses tipos de colunas também costumam ser alinhados de maneira diferente com os números geralmente alinhados à direita, para que os pontos decimais sejam alinhados. No nível da coluna, você pode escolher entre Botão, caixa de seleção, Caixa de combinação, Imagem, Caixa de texto e Links. se isso não for suficiente, você poderá desfigurar seus próprios tipos personalizados.

A maneira mais fácil de adicionar colunas é projetando no IDE. Como vimos antes, basta escrever o código para você e, quando tiver feito isso algumas vezes, talvez prefira adicionar o código você mesmo. Depois de fazer isso algumas vezes, ele fornece informações sobre como fazê-lo programaticamente.

Vamos começar adicionando algumas colunas, Solte um DataGridView no formulário e clique na pequena seta no canto superior direito. Em seguida, clique em Adicionar coluna. Faça isso três vezes. Será exibida uma caixa de diálogo Adicionar coluna, na qual você define o nome da coluna, o texto a ser exibido na parte superior da coluna e permite escolher seu tipo. A primeira coluna é YourName e é o TextBox padrão (dataGridViewTextBoxColumn). Defina o texto do cabeçalho como seu nome também. Crie a segunda coluna Age e use uma ComboBox. A terceira coluna é permitida e é uma coluna CheckBox.

Após adicionar todas as três, você verá uma linha de três colunas com uma combinação na do meio (Idade) e uma caixa de seleção na coluna Permitido. Se você clicar no DataGridView, no inspetor de propriedades, localize as colunas e clique em (coleção). Isso exibe uma caixa de diálogo na qual você pode definir propriedades para cada coluna, como cores individuais da célula, texto da dica da ferramenta, largura, largura mínima etc. Se você compilar e executar, notará que pode alterar as larguras das colunas e o tempo de execução. No inspetor de propriedades do DataGridView principal, você pode definir AllowUser como resizeColumns como false para impedir isso.

Vamos adicionar linhas ao controle DataGridView no código e ex3.cs no arquivo de exemplos possui esse código. Começando adicionando uma caixa TextEdit, uma ComboBox e um botão ao formulário com o DataGridView. Defina a propriedade DataGridView AllowUserto AddRows como false. Também uso rótulos e chamei a caixa de combinação cbAges, o botão btnAddRow e o TextBox tbName. Também adicionei um botão Fechar para o formulário e cliquei duas vezes para gerar um esqueleto do manipulador de eventos btnClose_Click. A adição da palavra Close () faz com que funcione.

Por padrão, a propriedade ativada do botão Adicionar Linha é configurada como falsa no início. Não queremos adicionar nenhuma linha ao DataGridView, a menos que haja texto na caixa Name TextEdit e na ComboBox. Criei o método CheckAddButton e, em seguida, gerei um manipulador de eventos Leave para a caixa de edição Name Text clicando duas vezes ao lado da palavra Leave nas propriedades quando estavam exibindo os eventos. A caixa Propriedades mostra isso na figura acima. Por padrão, a caixa Propriedades mostra propriedades, mas você pode ver os manipuladores de eventos clicando no botão relâmpago.

Você poderia usar o evento TextChanged em vez disso, embora isso chame o CheckAddButton () método para cada pressionamento de tecla, e não quando o controle é finalizado, isto é, quando outro controle é ganho foco. No Ages Combo, usei o evento TextChanged, mas selecionei o manipulador de eventos tbName_Leave em vez de clicar duas vezes para criar um novo manipulador de eventos.

Nem todos os eventos são compatíveis porque alguns eventos fornecem parâmetros extras, mas se você pode ver um manipulador gerado anteriormente, sim, pode usá-lo. É principalmente uma questão de preferência, você pode ter um manipulador de eventos separado para cada controle que você é usando ou compartilhando manipuladores de eventos (como eu fiz) quando eles têm uma assinatura de evento comum, ou seja, os parâmetros são os mesmo.

Renomeei o componente DataGridView para dGView por questões de clareza e clique duas vezes no AddRow para gerar um esqueleto do manipulador de eventos. Este código abaixo adiciona uma nova linha em branco, obtém o índice de linhas (é RowCount-1 como foi adicionado recentemente e RowCount é 0 com base) e, em seguida, acessa essa linha por meio de seu índice e define os valores nas células dessa linha para as colunas YourName e Era.

Ao criar um formulário, você deve pensar em termos de contêineres e controles e quais grupos de controles devem ser mantidos juntos. De qualquer maneira, nas culturas ocidentais, as pessoas leem do canto superior esquerdo para o canto inferior direito, facilitando a leitura dessa maneira.

Um contêiner é qualquer um dos controles que podem conter outros controles. Os encontrados na caixa de ferramentas incluem o painel, FlowLayoutpanel, SplitContainer, TabControl e TableLayoutPanel. Se não conseguir ver a caixa de ferramentas, use o menu Exibir e você a encontrará. Os contêineres mantêm os controles juntos e se você mover ou redimensionar o contêiner, isso afetará o posicionamento dos controles. Basta mover os controles sobre o contêiner no Form Designer e ele reconhecerá que o Contêiner está agora no comando.

Um painel é semelhante a um GroupBox, mas um GroupBox não pode rolar, mas pode exibir uma legenda e possui uma borda por padrão. Os painéis podem ter bordas, mas, por padrão, não. Eu uso GroupBoxes porque eles parecem mais agradáveis ​​e isso é importante porque:

Os painéis também são úteis para agrupar contêineres; portanto, você pode ter dois ou mais GroupBoxes em um painel.

Aqui esta uma sugestao para trabalhar com contêineres. Solte um contêiner dividido em um formulário. Clique no painel esquerdo e depois no direito. Agora tente remover o SplitContainer do formulário. É difícil até você clicar com o botão direito do mouse em um dos painéis e clicar em Selecionar SplitContainer1. Quando tudo estiver selecionado, você poderá excluí-lo. Outra maneira que se aplica a todos os controles e contêineres é pressione a tecla Esc para selecionar o pai.

Os contêineres também podem se aninhar. Basta arrastar um pequeno por cima de um maior e você verá uma fina linha vertical aparecer brevemente para mostrar que um está agora dentro do outro. Quando você arrasta o contêiner pai, o filho é movido com ele. O exemplo 5 mostra isso. Por padrão, o painel marrom claro não está dentro do contêiner; portanto, quando você clica no botão Mover, o GroupBox é movido, mas o painel não. Agora arraste o painel sobre o GroupBox para que ele fique completamente dentro do GroupBox. Quando você compila e executa dessa vez, clicar no botão Mover move os dois juntos.

Um TableLayoutpanel é um contêiner interessante. É uma estrutura de tabela organizada como uma grade 2D de células, onde cada célula contém apenas um controle. Você não pode ter mais de um controle em uma célula. Você pode especificar como a tabela aumenta quando mais controles são adicionados ou mesmo se não aumentam. Parece modelado em uma tabela HTML, porque as células podem se estender por colunas ou linhas. Até o comportamento de ancoragem dos controles filho no contêiner depende das configurações de margem e preenchimento. Veremos mais sobre âncoras na próxima página.

No exemplo Ex6.cs, comecei com uma tabela básica de duas colunas e especifiquei na caixa de diálogo Estilos de controle e linha (selecione o controle e clique no pequeno triângulo apontando para a direita localizado próximo ao canto superior direito para ver uma lista de tarefas e clicar no último) que a coluna da esquerda é 40% e a coluna da direita 60% da largura. Ele permite que você especifique as larguras das colunas em termos absolutos de pixels, em porcentagem, ou você pode simplesmente deixar o AutoSize. Uma maneira mais rápida de chegar a esta caixa de diálogo é apenas clicar na coleção ao lado de colunas na janela Propriedades.

Adicionei um botão AddRow e deixei a propriedade GrowStyle com o valor padrão AddRows. Quando a tabela fica cheia, ela adiciona outra linha. Como alternativa, você pode definir seus valores como AddColumns e FixedSize para que não cresça mais. No Ex6, quando você clica no botão Adicionar controles, chama o método AddLabel () três vezes e AddCheckBox () uma vez. Cada método cria uma instância do controle e depois chama tblPanel. Controles. Adicionar () Depois que o segundo controle é adicionado, o terceiro controle faz com que a tabela aumente. A imagem mostra depois que o botão Adicionar controle foi clicado uma vez.

Caso você esteja se perguntando de onde vêm os valores padrão nos métodos AddCheckbox () e AddLabel () que eu chamo, o controle era originalmente adicionado manualmente à tabela no designer e, em seguida, o código para criá-lo e inicializá-lo foi copiado de dentro deste região. Você encontrará o código de inicialização na chamada do método InitializeComponent depois de clicar no + à esquerda da região abaixo:

Você pode selecionar vários controles ao mesmo tempo mantendo pressionada a tecla Shift ao selecionar o segundo e os controles subsequentes, mesmo os de diferentes tipos. A janela Propriedades mostra apenas as propriedades comuns a ambas, para que você possa defini-las no mesmo tamanho, cor e campos de texto, etc. Mesmo os mesmos manipuladores de eventos podem ser atribuídos a vários controles.

Dependendo do uso, alguns formulários geralmente acabam sendo redimensionados pelo usuário. Nada parece pior do que redimensionar um formulário e ver os controles permanecerem na mesma posição. Todos os controles possuem âncoras que permitem "anexá-las" às 4 arestas, para que o controle se mova ou se estique quando uma aresta anexada for movida. Isso leva ao seguinte comportamento quando um formulário é esticado da borda direita:

Para botões como Fechar, tradicionalmente no canto inferior direito, o comportamento 3 é o necessário. ListViews e DataGridViews são melhores com 2 se o número de colunas for suficiente para estourar o formulário e precisar rolar). As âncoras superior e esquerda são o padrão. A janela de propriedades inclui um pequeno editor bacana que se parece com a bandeira da Inglaterra. Basta clicar em qualquer uma das barras (duas horizontais e duas verticais) para definir ou limpar a âncora apropriada, conforme mostrado na figura acima.

Uma propriedade que não recebe muita menção é a propriedade Tag e, no entanto, pode ser incrivelmente útil. Na janela Propriedades, você pode atribuir apenas texto, mas no seu código você pode ter qualquer valor que desça do Objeto.

Eu usei Tag para armazenar um objeto inteiro enquanto mostrava apenas algumas de suas propriedades em um ListView. Por exemplo, você pode querer mostrar apenas um Nome e número do cliente em uma lista Resumo do cliente. Mas clique com o botão direito do mouse no cliente selecionado e abra um formulário com todos os detalhes do cliente. Isso é fácil se você criar a lista de clientes lendo todos os detalhes do cliente na memória e atribuindo uma referência ao Objeto de Classe do Cliente no Tag. Todos os controles têm um Tag.

Um TabControl é uma maneira útil de economizar espaço de formulário com várias guias. Cada guia pode ter um ícone ou texto e você pode selecionar qualquer guia e exibir seus controles. O TabControl é um contêiner, mas contém apenas TabPages. Cada TabPage também é um contêiner que pode ter controles normais adicionados a ele.

No exemplo x7.cs, criei um painel de duas guias com a primeira guia chamada Controls, com três botões e uma caixa de seleção. A segunda página da guia é denominada Logs e é usada para exibir todas as ações registradas, incluindo clicar em um botão ou alternar uma caixa de seleção. Um método chamado Log () é chamado para registrar cada clique no botão etc. Ele adiciona a seqüência de caracteres fornecida a um ListBox.

Também adicionei dois itens de menus pop-up com o botão direito ao TabControl da maneira usual. Primeiro adicione um ContextMenuStrip ao formulário e defina-o na propriedade ContextStripMenu do TabControl. As duas opções de menu são Adicionar nova página e Remover esta página. No entanto, restringi a remoção da página para que apenas as guias recém-adicionadas possam ser removidas e não as duas originais.

Isso é fácil, basta criar uma nova página de guia, atribuir uma legenda para a Guia e adicioná-la à coleção TabPages do TabControl Tabs

Remover uma página é apenas uma questão de chamar TabPages. RemoveAt (), usando as guias. SelectedIndex para obter a guia atualmente selecionada.

Neste tutorial, vimos como alguns dos controles mais sofisticados funcionam e como usá-los. No próximo tutorial, continuarei com o tema da GUI, observarei o thread de trabalho em segundo plano e mostrarei como usá-lo.

instagram story viewer