namespace WebUC.ThemeDemo.Controls
{
[
ParseChildren(true)
]
///
/// 换皮肤控件基类
///
public abstract class SkinnedWebControl : WebControl, INamingContainer
{
string skinFilename = null;
protected override void CreateChildControls()
{
Control skin;
// 装载用户控件文件
skin = LoadSkin();
// 初始化控件和对控件绑定
InitializeSkin(skin);
Controls.Add(skin);
}
///
/// 装载用户控件文件
///
///
protected Control LoadSkin()
{
Control skin;
// 用户控件文件默认放在Themes目录下
string skinPath = "Themes/" + SkinFilename;
// 是否定义了用户控件文件?
if (SkinFilename == null)
throw new Exception("必须定义SkinFilename属性,指定用户控件文件路径");
// 通过Page.LoadControl(defaultSkinPath)方法,从用户控件文件中获取 UserControl 对象
try
{
skin = Page.LoadControl(skinPath);
}
catch (FileNotFoundException)
{
throw new Exception("用户控件文件未找到!");
}
return skin;
}
///
/// 初始化控件,并绑定控件数据
///
///
protected abstract void InitializeSkin(Control skin);
///
/// 用户控件文件路径
///
public string SkinFilename
{
get { return skinFilename; }
set { skinFilename = value; }
}
}
}
第三步:创建Themes目录,并创建两个用户控件文件Login.ascx和Login1.ascx。布局样式不同,但是都必须包含以下控件:
TextBox Username
TextBox Password
Button LoginButton
Label Result
Login.ascx
阅读代码编辑代码运行效果复制HTML代码保存代码
登陆页的默认皮肤样式
用户名:
密 码:
登陆页的默认皮肤样式
用户名:
密 码:
Login1.ascx
阅读代码编辑代码运行效果复制HTML代码保存代码登陆页的皮肤样式1
用户名:
密 码:
登陆页的皮肤样式1
用户名:
密 码:
第四步:创建Login控件Login.cs
复制C#代码保存代码using System;
using System.Web;
using System.Web.UI.WebControls;
namespace WebUC.ThemeDemo.Controls
{
///
/// 登陆控件,继承自SkinnedWebControl
///
public class Login : SkinnedWebControl
{
string skinFilename = "Login.ascx"; // 指定默认皮肤样式
TextBox username; // 帐号输入框
TextBox password; // 密码输入框
Button loginButton; // 登陆按钮
Label result; // 显示登陆结果
public Login()
{
if (SkinFilename == null)
SkinFilename = skinFilename;
}
///
/// 重写InitializeSkin,初始化控件和对控件进行绑定
///
///
protected override void InitializeSkin(System.Web.UI.Control skin)
{
// 查找ascx页中ID是username的textbox控件
username = (TextBox) skin.FindControl("Username");
// 绑定数据
username.Text = "demo";
// 查找ascx页中ID是password的textbox控件
password = (TextBox) skin.FindControl("Password");
// 绑定数据
password.Attributes.Add("value", "demo");
// 初始化Result控件
result = (Label) skin.FindControl("Result");
// 找到登陆按钮
loginButton = (Button) skin.FindControl("LoginButton");
loginButton.Click += new System.EventHandler(LoginButton_Click); // 绑定登陆按钮的Click事件
}
///
/// 响应登陆按钮事件
///
///
///
public void LoginButton_Click(Object sender, EventArgs e)
{
if (username.Text == "demo" && password.Text == "demo")
result.Text = "登陆成功!";
else
result.Text = "登陆失败,用户名密码不匹配!";
}
}
}
第五步:新建两个aspx页,分别把两种风格的登陆控件加入。
Login.aspx
复制ASPX代码保存代码<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %>
换皮肤控件测试——默认皮肤
<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %>
换皮肤控件测试——默认皮肤
Login1.aspx
复制ASPX代码保存代码<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %>
换皮肤控件测试——另一皮肤
<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %>
换皮肤控件测试——另一皮肤
最后,分别运行看看效果:)