本文主要是介绍21.2 DropShadow阴影控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
------http://book.csdn.net/bookfiles/305/10030512731.shtml
21.2 DropShadow阴影控件
本章主要介绍DropShadow阴影的组成及应用，其中最主要的是学习动态设置，DropShadow阴影控件的各个属性。
21.2.1 简介
DropShadow阴影控件主要的功能如下：
l 锐化边角效果：可以让Panel等控件的边角圆滑。
l 阴影效果：让指定的控件具备阴影效果。
l 阴影透明：此设置是专门针对控件的阴影，设置透明度，如果控件没有阴影，则此功能也不存在。
通过以上的功能，现在来了解DropShadow的属性，如下所示。
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />
其中各属性的意义如下：
l TargetControlID：要应用阴影的控件ID。
l Opacity：阴影的透明度。最大值为1，默认为0.5。
l Rounded：是否锐化目标控件的边角。
l TrackPosition：追随目标控件的位置，此属性一般应用在控件被拖动，或有其他移动的时候。
注意以上并没有定义是否显示阴影的属性，因为DropShadow默认显示阴影，在实际应用中，可以通过控制其Width属性，设置阴影的宽度，如果不想显示阴影，可以将Width设置为0。DropShadow阴影控件的应用效果如图21-6所示。
图21-6 DropShadow阴影控件的应用效果
21.2.2 简单应用实例
DropShadow阴影控件只有4个主要属性：TargetControlID、Opacity、Rounded和Width。本节利用这4个属性，为Panel面板设置一个好看的样式。实例的演示步骤如下：
（1）打开VS2005，新建一个AJAX Control Toolkit网站，命名为“AjaxDropShadowCtrl”。
（2）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Simple”。
（3）切换到窗体的设计视图，添加一个ScriptManager。
（4）本例实现的是Panel的阴影效果，在视图中添加一个Panel和一个阴影控件DropShadowExtender。
（5）设置阴影控件的属性，如下所示。主要设置了锐化效果和阴影透明度。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
Width="5"
Rounded="true"
Radius="9"
Opacity="0.6">
</ajaxToolkit:DropShadowExtender>
（6）页面的最终设计效果如图21-7所示
图21-7 DropShadow简单实例的设计效果
（7）按“Ctrl+S”保存设计，将此页设置为起始页。
（8）按F5运行程序，可以发现Panel出现了阴影效果，并且边角圆滑。效果如图21-8所示。
图21-8 DropShadow简单实例的运行效果
21.2.3 动态设置DropShadow控件
在实际应用中，用户通常喜欢自定义设置DropShadow的属性，这就需要了解如何动态设置DropShadow。本节学习两种方法实现DropShadow的动态设置。
1．客户端的动态设置
在程序运行的过程中，无法在客户端使用getDocumentById方法，获取控件DropShadow，必须使用AJAX类库的方法“$find”，否则无法获取客户端的阴影控件。要使用方法“$find”，必须设置控件的“”属性，如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" BehaviorID="DropShadowBehavior1" runat="server"></ajaxToolkit:DropShadowExtender>
然后在客户端的访问中，使用“$find('DropShadowBehavior1')”来获取客户端的AJAX控件。下面一个简单的实例，演示如何在客户端设置DropShadow控件的属性。
（1）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Client.aspx”。
（2）切换到窗体的设计视图。添加ScriptManager控件。
（3）在视图中添加一个Panel和一个HTML Button按钮。其中按钮控件用来动态设置Panel的属性。这两个控件的属性设置如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="101px" Width="288px"></asp:Panel>
<input id="Button1" style="width: 116px" type="button" value="应用配置" />
（4）添加关键的阴影控件“DropShadowExtender”，当前只需要设置其两个属性“TargetControlID”和“BehaviorID”，代码如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
BehaviorID="DropShadowBehavior1">
</ajaxToolkit:DropShadowExtender>
（5）双击“应用配置”按钮，为按钮设置Click事件，事件代码如清单21-9所示。
代码清单21-9 客户端动态更改阴影控件的属性
<script language="javascript" type="text/javascript">
<!--
function Button1_onclick()
{
var drop=$find("DropShadowBehavior1");
//阴影宽度
drop.set_Width(8);
//显示锐化效果
drop.set_Rounded(true);
//阴影透明度
drop.set_Radius(8);
//锐化幅度
drop.set_Opacity(0.7);
}
// -->
</script>
（6）页面设计的最终效果如图21-9所示。
图21-9 客户端动态设置阴影属性的设计视图
（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。
（8）按F5运行程序，运行效果如图21-10所示。
图21-10 客户端动态设置阴影属性的初始效果
（9）单击“应用阴影”按钮，此时调用客户端的Click事件，最终效果如图21-11所示。
图21-11 客户端动态设置阴影效果
2．服务器端的动态设置
服务器端更改阴影控件的属性，需要避免页面的刷新，本例不再需要调用AJAX类库中的方法，因为服务器端可以直接获取阴影控件。服务器端更改阴影控件属性的演示步骤如下：
（1）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Server.aspx”。
（2）切换到窗体的设计视图。添加ScriptManager控件。
（3）在视图中添加一个Panel和一个Button按钮。其中按钮控件用来动态设置Panel的属性。这两个控件的属性设置如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="Gainsboro" Height="101px" Width="288px" BorderColor="#C00000"></asp:Panel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="应用配置" Width="142px" />
（4）添加关键的阴影控件“DropShadowExtender”，当前只需要设置属性“TargetControlID”,代码如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
</ajaxToolkit:DropShadowExtender>
（5）双击“应用配置”按钮，为按钮设置Click事件，事件代码如清单21-10所示。
代码清单21-10 服务器端动态更改阴影控件的属性
protected void Button1_Click(object sender, EventArgs e)
{
//动态修改阴影控件的属性
DropShadowExtender1.Opacity = 0.7F;//透明度
DropShadowExtender1.Radius =7;//锐化幅度
//是否启用锐化效果
DropShadowExtender1.Rounded = true;
DropShadowExtender1.Width =7;//阴影的宽度
}
（6）在视图中添加一个UpdatePanel，主要是避免刷新效果。页面设计的最终效果如图21-12所示。
图21-12 服务器端动态设置阴影属性的设计视图
（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。
（8）按F5运行程序，运行效果如图21-13所示。
图21-13 服务器端动态设置阴影属性的初始效果
（9）单击“应用阴影”按钮，此时调用服务器端的Click事件，最终效果如图21-14所示。
图21-14 服务器端动态设置阴影效果
21.2.4 高级应用：与Profile结合保存用户的个性
本例要使用AJAX类库提供的ProfileService，实现个性化属性的保存，通过DropShadow和ProfileService结合的方式，演示如何允许用户定制自己的个性显示。本例需要用到的关键技术如下：
（1）Profile类：ASP.NET 2.0中用来在服务器端，获取Profile定义的类。
（2）Sys.Services.ProfileService：AJAX类库中用来获取Profile定义的类。
（3）ASP.NET 2.0中用户登录和注册的组件。
（4）设置登录验证的Web.Config配置。
（5）启用个性化服务的Web.Config配置。
因为本例的步骤繁多，请先参考本例的实现流程，如图21-15所示。
图21-15 DropShadow高级应用的演示流程
1．登录验证
为了保存每个用户的个性定义，本例的页面要求用户登录才能访问，只有这样，用户才能保存自己的个性。实现登录验证的步骤如下：
（1）在网站根目录下，添加一个Web窗体，命名为“Login.aspx”。
（2）在窗体的设计视图中，添加一个登录控件组中的“Login”控件，用来实现用户的登录验证。
（3）如果用户不存在，还必须提供一个注册界面。在视图中添加一个HyperLink控件，导航到注册页面。
（4）登录界面的效果如图21-16所示。
图21-16 登录界面
（5）在网站根目录下，添加注册需要的窗体，名为“Register.aspx”页。修改其属性“ContinueDestinationPageUrl”为“~/Login.aspx”。表示注册完成后，返回到登录窗体。
（6）注册页面的最终设计效果如图21-17所示。
图21-17 注册界面
（7）设计完注册和登录界面后，现在修改Web.Config配置，实现用户的注册管理。在“system.web”节点下，添加登录验证需要的一些条件，如清单21-11所示。
代码清单21-11 登录验证的配置
<authentication mode="Forms">
<forms defaultUrl="Default.aspx"
loginUrl="Login.aspx"
protection="All"/>
</authentication>
<authorization>
<deny users="?"/>
<allow users="*"/>
</authorization>
（8）由于注册界面不需要登录，所以还需要单独配置，在“configuration”节点下，添加如下代码。
<location path="Register.aspx">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
（9）按“Ctrl+S”保存所有的配置。
2．启用个性化配置
在应用Profile之前，必须在配置文件中启用其定义，如果要调用AJAX中的ProfileService服务，也必须启用此服务。启用个性化配置的步骤如下：
（1）打开Web.Config文件，在“system.web”节点下，添加启用ASP.NET 2.0 Profile的配置。代码如清单21-12所示。设置了Profile的4个属性，这些属性对应于DropShadow控件的属性。
代码清单21-12 登录验证的配置
<profile enabled="true">
<properties>
<add name="shadow" defaultValue="0" />
<add name="round" defaultValue="true"/>
<add name="radius" defaultValue="2"/>
<add name="opacity" defaultValue=".8"/>
</properties>
</profile>
（2）启用AJAX的ProfileService服务，修改“system.web.extensions”节点的内容如清单21-13所示。注意要设置Profile属性的读写权限。
代码清单21-13 启用个性化的配置
<system.web.extensions>
<scripting>
<webServices>
<profileService enabled="true"
readAccessProperties="shadow,round,radius,opacity"
writeAccessProperties="shadow,round,radius,opacity"/>
</webServices>
</scripting>
</system.web.extensions>
（3）修改完毕后，按“Ctrl+S”保存配置。
修改配置文件时一定要注意，不能有任何错误，否则会导致程序无法正常运行。
3．用户定制属性的窗体
实现了登录验证和个性配置后，现在开始创建用户定制属性的窗体。创建步骤如下：
（1）打开默认生成的Default.aspx页面。
（2）切换到设计视图。添加UpdatePanel、Panel和DropShadowExtender。设置DropShadowExtender的“TargetControlID”属性为“Panel1”。
（3）在页面上添加一些文本控件，让用户自定义阴影控件的属性。最终的页面设计如图21-18所示。
图21-18 用户定制DropShadow控件的设计视图
（4）窗体中的按钮“保存配置”，属于Html Button控件。切换到源代码视图，为其添加Click事件，代码如下所示。
<asp:Button ID="Button1" runat="server" Text="保存配置" Width="137px" OnClientClick="SaveProfile();" />
（5）事件方法“SaveProfile”调用自文件“Profile.js”，所以必须在ScriptManager中引用此文件，代码如下所示。
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/JS/Profile.js" />
</Scripts>
</asp:ScriptManager>
（6）在网站根目录下，新建一个文件夹“JS”。在此文件夹下添加一个Jscript文件，名为“Profile.js”。此文件的主要内容就是调用AJAX类库中的ProfileService。文件的内容如清单21-14所示。
代码清单21-14 调用AJAX类库中的ProfileService的方法
//加载个性化配置的方法-调用个性化服务的方法
function LoadProfile()
{
Sys.Services.ProfileService.load(null,
OnLoadCompleted, OnProfileFailed, null);
}
//保存个性化配置-调用个性化服务的方法
function SaveProfile()
{
//阴影没有直接的属性，通过设置宽度解决
Sys.Services.ProfileService.properties.shadow =
( GetElementById("Shadowchk").checked?5:0);//是否阴影
Sys.Services.ProfileService.properties.round =
GetElementById("Roundchk").checked; //是否锐化
Sys.Services.ProfileService.properties.radius =
GetElementById("txtradius").value;//锐化度
Sys.Services.ProfileService.properties.opacity =
GetElementById("txtopacity").value; //阴影透明度
Sys.Services.ProfileService.save(null,
OnSaveCompleted, OnProfileFailed, null);//保存
}
//读取个性配置并应用其内容
function OnLoadCompleted(numProperties, userContext, methodName)
{
//首先获取页面中的阴影控件
var drop = $find('DropShadowBehavior1');
//显示阴影效果
drop.set_Width(eval(Sys.Services.ProfileService.properties.shadow));
//显示锐化效果
drop.set_Rounded(Sys.Services.ProfileService.properties.round=="True"?true:false);
//阴影透明度
drop.set_Radius(eval(Sys.Services.ProfileService.properties.radius));
//锐化幅度
drop.set_Opacity(parseFloat(Sys.Services.ProfileService.properties.opacity));
}
//保存配置成功后调用的方法
function OnSaveCompleted(numProperties, userContext, methodName)
{
LoadProfile();//加载配置
}
//配置加载失败时调用的方法
function OnProfileFailed(error_object, userContext, methodName)
{
alert("配置服务调用失败： " + error_object.get_message());
}
//javascript的方法getElementById被封装成C#用法
function GetElementById(elementId)
{
var element = document.getElementById(elementId);
return element;
}
//判断是否正确加载了ajax类库
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
（7）打开Default.aspx的代码视图，在Page_Load中添加窗体初加载时DropShadowExtender的显示样式。这些内容都是通过Profile类，从用户定义的配置中获取的。代码如清单21-15所示。
代码清单21-15 服务器端获取用户的个性定义代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//页面初始化时，加载个性定义
DropShadowExtender1.Opacity = float.Parse( Profile.opacity);//透明度
DropShadowExtender1.Radius = int.Parse(Profile.radius);//锐化幅度
//是否启用锐化效果
DropShadowExtender1.Rounded = (Profile.round == "True" ? true : false);
DropShadowExtender1.Width = int.Parse(Profile.shadow);//阴影的宽度
//设置页面上各元素的显示
if (DropShadowExtender1.Rounded)
Roundchk.Checked = true;//是否锐化
if (DropShadowExtender1.Width !=0)
Shadowchk.Checked=true;//是否阴影
txtopacity.Text=DropShadowExtender1.Opacity.ToString();//透明度
txtradius.Text= DropShadowExtender1.Radius.ToString();//锐化幅度
}
}
（8）按“Ctrl+S”保存所有的设计。将Default.aspx设置为起始页。
（9）按F5运行程序。首先是登录窗体，如图21-19所示。如果没有注册用户，请先单击“注册”链接。
图21-19 登录运行界面
（9）输入用户名和密码，单击“登录”按钮。此时打开用户定制窗体，如图21-20所示。
图21-20 用户定制控件属性的界面
（10）输入控件的各个属性，单击“应用配置”按钮，此时界面中的阴影控件发生了变化，变化的格式便是用户刚刚定义的属性。
（11）单击“注销”链接，界面切换到登录窗口，重新登录窗口，可以发现阴影控件的样式依然是用户定义的内容。同时自定义的属性，在对应的文本控件上都有体现。效果如图21-21所示。
图21-21 显示的用户定制内容
通过Profile和DropShadow结合的方式，本例实现了用户定制DropShadow的功能。这些功能多用在个性化网站内，促进网站与用户的交互。
这篇关于21.2 DropShadow阴影控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
