Mudar o style dos objetos

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Nesse artigo iremos ver como mudar o style dos objetos nos eventos onFocus e onBlur. Vamos ultilizar na mesma os conceitos de classes e temas

Como trocar a cor dos objetos TextBox, ListBox e DropDownList
nos eventos OnFocus e OnBlur.

 

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.

figura01.gif
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.

 
figura08.gif
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.

figura02.gif

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.
O arquivo ja abre com a seguinte StyleSheet

body {
}
para editar clique com o botão direito conforme na figura 03 e 04

figura03.gif
Figura 03

figura04.gif

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
figura05.gif
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
figura06.gif
Figura 06
 

figura09.gif

Listagem 02
 
Vamos editar agora o arquivo SkinFile.skin que deve ficar conforme a nossa listagem 03

figura10.gif

Listagem 03
 
Vamos agora editar a página default.aspx conforme listagem 04, vamos usar as styles criadas no nosso arquivo StyleSheet.css .
 figura13.gif
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.
figura12.gif
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

figura11.gif
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
figura07.gif
Figura 07
 
Espero que tenham gostado do nosso artigo e até o próximo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?