Como trocar a cor dos objetos TextBox, ListBox e DropDownList |
Neste artigo usaremos classes e temas para aprimoramos mais nossas técnicas. Vamos criar um novo projeto website usando a linguagem c#, no solution explorer vamos clicar com o botão direito do mouse e vamos para a opção Add ASP.NET Folder conforme a figura 1. |
Figura 01 |
Dentro da pasta App_Code vamos adicionar um novo item do tipo Class que vamos dar o nome de ChangeColorControls.cs, na classe vamos colocar o condigo conforme a listagem 01. |
Listagem 01 |
A função SetColorConttrol(WebControl ctrl, string strFocus, string strBlur) muda a cor de apenas um objeto os parametros são: WebControl ctrl -> nome do objeto que ira sofre a alteração de cor string strFocus -> nome da StyleSheet que será usada pode ser usado ' string strBlur -> nome da StyleSheet que será usada pode ser usado ' A função SetColorAllControls(Control parent, string StrFocus, string strBlur) varre a pagina em busca dos ojetos e chama a função SetColorControl para ser executada os parametros usados são: Control parent -> nome do control que será varrido, usamos this para varrer toda a página string strFocus -> nome da StyleSheet que será usada pode ser usado ' string strBlur -> nome da StyleSheet que será usada pode ser usado ' |
Agora vamos adicionar a pasta onde ficar o nosso tema, faça conforma a figura 02 adicione a pasta theme. |
Figura 02 |
Podemos dar qualquer nome a pasta theme, no exemplo vou deixar como Theme1 mesmo, agora vamos adicionar os seguintes items o StyleSheet.css e SkinFile.skin, vamos editar o arquivo StyleSheet.css. |
Figura 03 |
Figura 04 |
Na figura 04 aparece a janela onde podemos configura cada item da nossa StyleSheet para criar uma nova StyleSheet clique com o botão direito e depois em Add Style Rule conforme a figura 05 |
Figura 05 |
Na janela da figura 06 aparecerá as opções de Style Rule que podemos criar no nosso exemplo são usadas as opção Class name que são todas que começam com um ponto na frente e as Elemet ID que são todas que começam com a # na frente. Veja a listagem 02 de como deve ficar o nosso arquivo StyleSheet.css |
Figura 06 |
|
Listagem 02 |
Vamos editar agora o arquivo SkinFile.skin que deve ficar conforme a nossa listagem 03 |
|
Listagem 03 |
Vamos agora editar a página default.aspx conforme listagem 04, vamos usar as styles criadas no nosso arquivo StyleSheet.css . |
Listagem 04 |
Observe que as divs são criadas usando o ID de cada uma com os nomes das nossas Styles, isso se da para que cada div pegue as configurações da Style que se refere, vamos compilar e rodar o projeto. Note que as configurações das Styles ainda não foram aplicadas isso se deve porque devemos ainda fazer uma modificação no nosso arquivo webconfig conforme a listagem 05 que deve ser feita dentro da chave <system.web> lembando que a opção theme se refere ao nome da pasta theme criada no projeto note que agora sua pagina ja esta com as configurações das Styles. |
Listagem 05 |
Vamos agora colocar nossas funções para funcionar vamos editar o evento Page_Load do nosso arquivo defatult.aspx.cs conforme a listagem 06 |
Listagem 06 |
Note que fazemos referencia a nossa classe no using Skynet o que nos habilita a usar as funções da classe no evento Page_Load confoem a listagem 06 acima. vamos executar o projeto e ver como fica figura 07 |
Figura 07 |
Espero que tenham gostado do nosso artigo e até o próximo. |