Working with Themes and Skins in ASP.NET using VB.NET

Posted in VB.NET | ASP.NET USING VB.NET on November 06, 2019

Tags: Themes and Skins, Skins in VB.NET, Themes in VB.NET, VB.NET, ASP.NET

In this article you will learn that how to use Themes and skins and also about Themes for centralized look/feel.

4939

Introduction

In this article I am explaining about themes and skin. Themes provides an easy way to "skin" the controls in your web-app. There are two major benefits that this functionality provides.
The First is that it allows you to design multiple "looks" or "skins" for your application and to easily switch between those skins and in my opinion second or a bigger benefit is actually that it allows you a central place to control the look/feel of your web application. Even if you only have one such look.

Getting Started

Themes apply to specific control or group of controls. The process is "choreographed" by the user of SkinIDs and a themes folder. To create a simple theme do the following.

Simply create a new ASP.NET web application.
Open the Default aspx page and place a control (say Button). Your page will look like below.
Click on the Button on the Design view and set the SkinId property to MyButtonId.
Switch to the solution Explorer.
Right-Click on the Project and click add new ASP.NET Folder and in folder option select Themes.
Give name MyTheme to Theme1.
Right-Click on MyTheme and click add new item.
Select a skin file from the list of options and name it MyButton. Skin or whatever you want.
Switch the Source code view of the aspx page and add theme=MyTheme to the @page tag like below code.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.VB"
Theme="MyTheme" Inherits="_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="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server"
                    OnClick="Button1_Click" SkinID="MyButtonID"
            Text="Button" /></div>
    </form>
</body>
</html>
Next copy the Button tag from the source code.
Paste the Button tag into the new skin file and remove the ID property and change the Text property to "click to update page title with current date/time" so that the code will look like below.

<%--
Default skin template. The following skins are provided as examples only.
1. Named control skin. The SkinId should be uniquely defined because
   duplicate SkinId's per control type are not allowed in the same theme.

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Default skin. The SkinId is not defined. Only one default
   control skin per control type is allowed in the same theme.

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%>
<asp:Button runat="server" SkinID="MyButtonId" Text="Click to update the page title with current date/time" />
Switch back to the design view of aspx page, Double click on Button and attach the below code.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        Button1.Text = DateTime.Now.ToShortDateString()
    End Sub
    Protected Overrides Sub OnPreInit(ByVal e As EventArgs)
        MyBase.OnPreInit(e)
        If IsPostBack Then
            Page.Theme = ""
        End If
    End Sub
Now run your application. You will see that the Button says "click to update page title with current date/time" rather than "Button" which is what is says in the Design time. It is getting the Text from the Theme.