Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果

RoundedCorners是AtlasControlToolkit中的一个Extender，利用它可以轻松地为ASP.NET中的控件加上圆角效果。

 

主要内容

1．RoundedCorners介绍

2．简单示例

 

一．RoundedCorners介绍

RoundedCorners是AtlasControlToolkit中的一个Extender，利用它可以轻松地为ASP.NET中的控件加上圆角效果。简单的示例代码如下：

< atlasToolkit:RoundedCornersExtender  ID ="rce"  runat ="server" >

     < atlasToolkit:RoundedCornersProperties 

         Color ="#ff0000"  

        TargetControlID ="Panel1"  

        Radius ="10" >

     </ atlasToolkit:RoundedCornersProperties >

</ atlasToolkit:RoundedCornersExtender >

它的属下如下：

属性	描述
TargetControlID	要添加圆角效果的目标控件ID
Radius	圆角的半径，以px为单位，默认值为5px
Color	可以设置颜色

二．简单示例

RoundedCorners的使用非常简单，下面看一个例子。新建Web Site后，在ASPX页面的顶部加入：

<% @ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit"  %>

添加一个Panel作为我们的目标控件，即要添加圆角效果的控件：

< asp:Panel  ID ="Panel1"  runat ="server"  Width ="300px"  CssClass ="roundedPanel" >

     < div  style ="padding:10px;text-align:center" >

         < div  style ="padding:5px; border:solid black thin;background-color:#B4B4B4;" >

         < asp:Image  ID ="Image1"  runat ="server"  ImageUrl ="atlas_title.jpg"   />< br  />

         </ div >

     </ div >

</ asp:Panel >

添加RoundedCornersExtender，设置相关的属性如下：

< atlasToolkit:RoundedCornersExtender  ID ="rce"  runat ="server" >

     < atlasToolkit:RoundedCornersProperties 

         Color ="#ff0000"  

        TargetControlID ="Panel1"  

        Radius ="10" >

     </ atlasToolkit:RoundedCornersProperties >

</ atlasToolkit:RoundedCornersExtender >

用到的CSS样式：

< style  type ="text/css" >

    .roundedPanel

    {}{    
        width:300px; 

        background-color:#5377A9;    

        color:white;

        font-weight:bold;        
    }

</ style >

编译后运行效果如下：

不添加圆角效果时的效果：

完整示例代码下载：http://files.cnblogs.com/Terrylee/RoundedCornersDemo.rar

转载于:https://www.cnblogs.com/Terrylee/archive/2006/08/09/Atlas_RoundedCorners_Extender.html