Talvez alguns amigos não sejam muito claros sobre temas e skins. Vamos primeiro apresentar temas e skins.
1. Introdução:
Basta olhar para os nomes Temas e Skins e você saberá para que eles são usados. Agora vamos falar sobre para que eles são usados (como você ainda pode dizer,~_~) quando você conhece todos eles? Temas e estilos de página sem modificar nosso código e arquivos de página.
Os arquivos de temas são colocados separadamente em uma pasta App_Themes e são completamente separados do seu programa.
2. Como usar temas e skins:
Vejamos primeiro um exemplo muito simples:
App_Themesdefault1.skin código do arquivo:
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx: Código do arquivo:
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="servidor">
<title>Página com exemplo de tema aplicado</title>
</head>
<corpo>
<form id="form1" runat="servidor">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />
</form>
</body>
</html>
Você pode ver que não escrevemos nenhum código para controlar o estilo em default.aspx, mas quando o executamos, descobrimos que as palavras no rótulo ficaram em negrito vermelho. Este é o exemplo de tema mais básico.
Pasta App_Themes:
A pasta App_Themes está localizada no diretório raiz do programa e deve ser uma subpasta do nome do tema. A subpasta pode conter vários arquivos .skin e .css. Na figura abaixo são criados dois Temas, denominados default e default2:
Usar temas
1. Aplique o tema a uma página:
Se você deseja aplicar um tema a uma determinada página, modifique <%@ Page Theme="..." %> diretamente no arquivo aspx. Por exemplo, se você deseja aplicar o tema default2 a esta página, defina <%. @ Page Theme="default2" %> OK
2. Aplique o mesmo tema a todas as páginas:
Se você quiser usar o mesmo tema em todas as páginas, adicione a frase <pages theme="..."/> sob o nó <system.web> no web.config
3. Deixe o controle não aplicar o tema:
No primeiro exemplo, vimos que os estilos de dois rótulos foram alterados, o que significa que o estilo do arquivo .skin entrou em vigor em todos os rótulos da página. Mas às vezes queremos que um determinado Label não aplique o estilo em .skin. Nesse caso, basta definir a propriedade EnableTheming do Label como false.
Talvez você também queira que rótulos diferentes exibam estilos diferentes. Você só precisa definir o atributo SkinID do rótulo. Veja o exemplo abaixo:
App_Themesdefault1.skin
<asp:label runat="server" font-bold="true" forecolor="Red" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
deafult.aspx
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="servidor">
<title>Página com exemplo de tema aplicado</title>
</head>
<corpo>
<form id="form1" runat="servidor">
<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />
<asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />
</form>
</body>
</html>
Após a execução, você descobrirá que os estilos de exibição dos dois rótulos são diferentes.
4. Outros métodos:
Como mencionado anteriormente, usar <%@ Page Theme="..." %> no cabeçalho do arquivo aspx para usar o tema e usar este método para aplicar o estilo no tema substituirá o estilo do atributo de controle que você escreveu em aspx. por exemplo:
App_Themesdefault1.skin
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http ://www.w3.org/1999/xhtml ">
<head id="Head1" runat="servidor">
</head>
<corpo>
<form id="form1" runat="servidor">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />
</form>
</body>
</html>
Como resultado da operação, a cor de fundo de todos os rótulos fica vermelha.
Usar <%@ Page StyleSheetTheme="..." %> para aplicar um tema não substituirá o atributo de estilo que você escreveu no arquivo aspx:
a ordem na qual o controle aplica o atributo de estilo é a seguinte:
a. Estilo referenciado por StyleSheetTheme
b. Propriedades de controle definidas por código (substituir StyleSheetTheme)
c. O estilo referenciado por Tema (abrangendo os 2 primeiros)
tema contém CSS:
Arquivos .css também podem ser usados em temas. Quando você coloca o arquivo .css em um diretório de tema, seu .css será aplicado automaticamente à página que usa este tema.
3. O código de fundo pode facilmente alterar a aparência do site. .
O que mencionei acima é aplicar temas em arquivos aspx ou web.config. No entanto, é obviamente inconveniente usar o método acima para alterar skins em um site como um blog onde cada usuário tem um skin diferente.
A seguir será apresentado como referenciar dinamicamente o tema no código de fundo para resolver a situação acima. O tema deve ser aplicado o mais cedo possível quando a página for solicitada, portanto, devemos escrever o código no evento Page_PreInit. , apenas uma frase:
Página.Theme = "...";
Aqui só precisamos ler os diferentes nomes de temas definidos por cada usuário no banco de dados para perceber facilmente que cada usuário tem um skin diferente.
------------------------------------------
As informações acima são todas opiniões e experiências pessoais. Se houver algo errado, por favor, me dê seu conselho.