C# - Componente Gauge na coluna do DataGrid

Recentemente desenvolvi um componente Gauge em C# parecido com o compenente do Delphi 5.0. Hoje vou mostrar como fazer esse componente dentro do DataGrid.

por Rener Silva de Menezes

Recentemente desenvolvi um componente Gauge em C# parecido com o compenente do Delphi 5.0. Clique aqui para ver o artigo.

Hoje vou mostrar como fazer esse componente dentro do DataGrid.

1 - Desenvolvendo a Nova Coluna.

Criei uma classe chamada DataGridGaugeColumn que herda as características da classe DataGridTextBoxColumn.

Nessa nova classe temos as seguintes propriedades:

• Fonte - Para formartar a fonte do Gauge.
• CorFundo - É a cor que indica a aparência do fundo.
• CorIncial - É a cor inicial do gradiente.
• CorFinal - É a cor final do gradiente.
• CorFonte - É a cor da fonte do Gauge.
• MostraLabel - Este é um flag que indica se o percentual (texto) deve aparecer ou não.
• CorBorda - É a cor da borda do Gauge.

O método GetFundoGradiente retorna o preenchimento do percentual do Gauge de acordo com o valor do registro. (Leia o artigo anterior)

O método Paint da classe pai foi reescrito para a nova funcionalidade. Vejamos:

protected override void Paint(Graphics g, Rectangle bounds, CurrencyManager source, int rowNum, Brush backBrush, Brush foreBrush, bool alignToRight)

{

int valor = RetornaTexto(this.GetColumnValueAtRow(source, rowNum));

if (valor >= 0 && valor <= 100)

{

Pen pen1 = new Pen(CorBorda, 2f);

g.DrawRectangle(pen1, bounds);

g.FillRectangle(new SolidBrush(CorFundo), bounds);

if (valor != 0)

{

g.FillRectangle(this.GetFundoGradiente(calculaPercentual(valor), bounds), bounds.X, bounds.Y, calculaPercentual(valor), bounds.Height);

}

if (MostraLabel)

{

g.DrawString(valor + "%", this.Fonte, new SolidBrush(CorFonte),bounds.X + bounds.Width / 2 - this.Fonte.Size, bounds.Y + bounds.Height / 2 - this.Fonte.Size);

}

}

else

{

MessageBox.Show("Valor inválido para a coluna Gauge.", "DataGridGaugeColumn", MessageBoxButtons.OK, MessageBoxIcon.Error);

}

}

O valor da coluna do registro atual é armazenado na variável valor. É feita uma verificação para saber se o valor está dentro dos limites permitidos, ou seja, maior ou igual a 0 (zero) e menor ou igual a 100 (cem). Um retângulo é desenhado para representar as bordas, e depois preenchido com a cor de fundo. Novamente é feita uma verificação no valor, agora para saber se ele é diferente de 0 (zero). Se for verdadeiro, o retângula é preenchido com o gradiente. Se o flag para mostrar o percentual estiver habilitado, o texto aparecerá dentro do Gauge, indicando até onde foi concluído.

2 - Utilizando a coluna Gauge.

Uma tabela com alguns registros foi criada para ilustrar o exemplo. Posteriormente utilizando o método AdicionaEstilos() são criados os estilos das colunas do DataGrid. Vejamos:

private void AdicionaEstilos()

{

DataGridTableStyle dtsEstilo = new DataGridTableStyle();

dtsEstilo.MappingName = "Tarefas";

dtsEstilo.AlternatingBackColor = Color.LightGray;

DataGridColumnStyle coluna;

coluna = new DataGridTextBoxColumn();

coluna.MappingName = "Codigo";

coluna.HeaderText = "Código";

coluna.Width = 60;

dtsEstilo.GridColumnStyles.Add(coluna);

coluna = new DataGridTextBoxColumn();

coluna.MappingName = "Descricao";

coluna.HeaderText = "Descrição da Tarefa";

coluna.Width = 200;

dtsEstilo.GridColumnStyles.Add(coluna);

DataGridGaugeColumn colunaGauge;

colunaGauge = new DataGridGauge.DataGridGaugeColumn();

colunaGauge.MappingName = "Percentual";

colunaGauge.HeaderText = "Percentual";

colunaGauge.Width = 150;

colunaGauge.Fonte = new Font("Arial", 8, FontStyle.Bold);

dtsEstilo.GridColumnStyles.Add(colunaGauge);

dataGrid1.TableStyles.Add(dtsEstilo);

}

Existem 3 (três) colunas, uma para código, outra para a descrição da tarefa e uma terceira para o Gauge. Observe que, nesse momento posso utilizar todas as propriedades descritas anteriormente para modificar a aparência do Gauge.

Veja abaixo uma imagem do componente em tempo de execução.

Clique aqui para fazer o download do código.