Applying Themes dynamically at run time
In this article we are going to focus on how to apply themes based on user choice. We will apply theme(style,skin) dynamically to a page at runtime in the Page_PreInit event of the Page using Theme property of the Page class.
In this article we are going to focus on how to apply themes based on user choice. We will apply theme dynamically to a page at runtime in the Page_PreInit event of the Page.
A Theme is a collection of styles,images,skins that define how the controls or your web page appear. Using a Theme we can easily change the overall appearance of a website.
Step 1:Create a New Website
Open Microsoft Visual Studio ->File -> New Website -> Visual C# -> Name:ThemesDemo.
Step 2:Add App_Themes folder to the website
Right-click the website in the Solution Explorer,
select Add ASP.NET Folder -> click Theme.
Create two theme folders namely: BlueTheme and PinkTheme. In order to add the second theme: right-click the App_Themes folder -> click Add ASP.NET Folder -> click Theme.
Step 3:Adding Styles and skin files to the Themes
Inside the BlueTheme theme folder, add the Chrysanthemum.jpg image from the attached source code. similarly Add the Desert.jpg image to the PinkTheme theme.
Add a .skin file to the BlueTheme theme and name it Logo. Then add skins for the Image and a Button control as shown below:
<asp:Image ImageUrl="~/App_Themes/BlueTheme/Chrysanthemum.jpg"
SkinID="Logo" runat="server" />
<asp:Button runat="server"
BorderColor="Blue" BorderWidth="1pt" BackColor="Blue" ForeColor="White" />
Add a .skin file to the PinkTheme theme and name it Logo. Then add skins for the Image and a Button control as shown below:
<asp:Image ImageUrl="~/App_Themes/PinkTheme/Desert.jpg"
SkinID="Logo" runat="server" />
<asp:Button runat="server"
BorderColor="Pink" BorderWidth="1pt" BackColor="Pink" ForeColor="Black" />
Now add a style sheet(StyleSheet.css) to the BlueTheme theme. In the style sheet, we will set the styles for the default font and font size for the HTML body of the webpage as shown below:
body
{
font-family : Verdana;
font-size : 11pt;
}
Similarly add a style sheet(StyleSheet.css) to the PinkTheme theme. In the style sheet, we will set the styles for the default font and font size for the HTML body of the webpage as shown below:
body
{
font-family : Verdana;
font-size : 13pt;
}
Step 4:Applying Theme to the page
Add a WebForm to the website (Right click ThemesDemo site ->click Add ->WebForm -> Name:BTPage.aspx. Now write the below code in the aspx page form tag:
<div> <asp:Image ID="Image1" SkinID="Logo" Width="80px" Height="80px" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Theme Demo"
CssClass="button" />
</div>
In the Page directive set the Theme="BlueTheme" as shown below:
<%@ Page Language="C#" AutoEventWireup="true" Theme="BlueTheme" CodeFile="BTPage.aspx.cs" Inherits="BTPage" %>
Step 5:Applying Theme dynamically to the page
Double Click on the Button "btnSubmit" to generate event handler for the click event of the button. Then add the below code in the BTPage.aspx.cs file:
protected void Page_PreInit(object sender, EventArgs e)
{
if(Session["theme"]!= null)
{
Page.Theme = (string)Session["theme"];
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string theme = Page.Theme;
if (theme == "BlueTheme")
Session["theme"] = "PinkTheme";
else
Session["theme"] = "BlueTheme";
Server.Transfer(Request.Path);
}
Note that we are changing the Theme of the page using Theme property of the page in the Page_PreInit event of the page. You cannot change the theme in any other page event.
In the btnSubmit_Click event, when the user clicks the button, we are storing the current page theme in the "theme" string variable. If the current applied theme is BlueTheme then we are saving the new theme(PinkTheme) is a Session variable else if the current applied theme is PinkTheme then we are saving the new theme(BlueTheme) is a Session variable and then redirecting the user to the same page which will apply the theme by taking the valur from the Session variable(Session["theme"])
BlueTheme output:
PinkTheme output:
If you want to apply a common theme to all the page of a website, You can apply the theme in the web.config file in the pages element as shown below:
<%@ Page Theme="SampleTheme" %>
An important point to note is that this setting will override the control properties in the webpage.
Follow