Desenvolvimento - C#

C# - Desenvolvendo um componente Gauge

Como programador do bom Delphi 5.0, senti falta de um componente chamado Gauge que tínhamos para mostrar a progressão de um determinado processamento. Neste artigo vou demonstrar o desenvolvimento desse componente.

por Rener Silva de Menezes



Como programador do bom Delphi 5.0, senti falta de um componente chamado Gauge que tínhamos para mostrar a progressão de um determinado processamento.

Neste artigo vou demonstrar o desenvolvimento desse componente, utilizando basicamente o namespace System.Drawing para desenhar o Gauge.

O preenchimento do Gauge é do tipo gradiente.

private Brush GetFundoGradiente()

{
RectangleF recF = new RectangleF((float) 0f, 0f, calculaPercentual(), (float) base.Size.Height);

LinearGradientBrush gradiente = new LinearGradientBrush(recF, Inicial, Final, (float) 270f);

float[] Intensidades = {0.0f, 0.3f, 1.0f};

float[] Posicoes = {0.0f, 0.2f, 1.0f};

Blend blend = new Blend();

blend.Factors = Intensidades;

blend.Positions = Posicoes;

gradiente.Blend = blend;

return gradiente;

}

Esse método retorna um objeto LinearGradientBrush, onde foi passado o retângulo, as cores inicial e final e o ângulo da linha do gradiente. Além disso, a propriedade Blend do objeto gradiente recebe o objeto blend que determina a intesidade e as posições das cores do gradiente.

Para calcular o percentual de progressão do Gauge, foi utilizado regra de 3 simples, vejamos.

private int calculaPercentual()

{

int x, z;

z = base.Width * Valor;

x = z / 100;

return x;

}

Por exemplo, se o tamanho do Gauge for de 200px e o percentual for 20%, para determinarmos o tamanho do preenchimento aplicamos a regra da seguite forma:

200 = 100
X = 20

X = 4000/100

X = 40

Ou seja, o tamanho do preenchimento será de 40 px.

No evento Paint do componente executamos o seguinte código para desenhá-lo:

private void Gauge_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{

Graphics graphics1 = e.Graphics;

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

graphics1.DrawRectangle(pen1,(float) 0f, 0f, base.Width, (float) base.Size.Height);

if (Valor > 0)

{
graphics1.FillRectangle(this.GetFundoGradiente(), (float) 0f, 0f, calculaPercentual(), (float) base.Size.Height);

}
graphics1.DrawString(Convert.ToString(Valor) + "%", this.Font,
new SolidBrush(this.ForeColor),(float) base.Size.Width/2 - 9f,
(float) base.Size.Height/2 - 7f);

}

Inicialmente desenhamos um retângulo do tamanho do componente, com a cor da borda selecionada pelo usuário através da propriedade Borda. Posteriormente é feita uma verificação se a propriedade Valor é maior do que 0. Se for, então o retângulo será preenchido com o gradiente de acordo com percentual calculado. Mais abaixo no código, o texto contendo a propriedade Valor e o símbolo de "%" são desenhados, com a fonte e a cor selecionadas nas propriedades Font e ForeColor respectivamente. Vejam as figuras abaixo.

Faça o download do código, clique aqui.

Rener Silva de Menezes

Rener Silva de Menezes