[My Blog] | [Code Projects Home] | [skmMenu] | [RssFeed]

Demo of the RoundedCorners Web Control

This page illustrates using the RoundedCorners Web control I (Scott Mitchell) created. This Web control creates a box with rounded corners, dynamically creating the corner images (if needed) using GDI+. The following shows the RoundedCorners control's output alongside its markup in the ASP.NET page.


	This is a simple example with text in the rounded corners box. It has a width explicitly set to 150 pixels, and the images are anti-aliased.


<skm:roundedcorners id="RoundedCorners1" runat="server" BackgroundBackColor="white"

     BackColor="#FFE0C0" BorderColor="Black" BorderStyle="Solid" 

     BorderWidth="2px" Font-Names="Verdana"

     ImageDirectory="/Images/" Font-Size="12px" 

     Width="150px" Padding="1px" CornerHeight="16px" TextHorizontalAlign="Center">



    This is a simple example with text in the rounded corners box.  It has a width

    explicitly set to 150 pixels, and the images are anti-aliased.



</skm:roundedcorners>


<skm:roundedcorners id="RoundedCorners2" runat="server" 

    BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" Font-Names="Verdana"

    ImageDirectory="/Images/" Font-Size="11px" Width="150px" Padding="1px" TextHorizontalAlign="Left"

    ShowTitle="True" Title="Hello, World!" TitleStyle-BackColor="Salmon" TitleStyle-Font-Bold="True" CornerHeight="18px"

    TitleStyle-Font-Size="13px" TitleStyle-HoritzontalAlign="Right">


      <asp:Label runat="server">Here's an example with some other Web controls present:</asp:Label><br />

      <asp:DropDownList runat="server">

        <asp:ListItem>ASP.NET</asp:ListItem>

        <asp:ListItem>is</asp:ListItem>

        <asp:ListItem>neat!</asp:ListItem>

      </asp:DropDownList>

      <br />

      <asp:TextBox runat="server" />


</skm:roundedcorners>

	Hello, World!
	Here's an example with some other Web controls present, and a Title!

	Sales
	You can also opt to not round the bottoms, if that's what floats your boat.


<skm:roundedcorners id="RoundedCorners3" runat="server" 

    ShowTitle="True" RoundedBottom="False"

    BackColor="lightyellow" BorderColor="Goldenrod" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana"

    ImageDirectory="/Images/" Font-Size="11px" Width="125px" Padding="5px"

    Title="Sales" TitleStyle-BackColor="Goldenrod" TitleStyle-Font-Bold="True" CornerHeight="17px"

    TitleStyle-Font-Size="13px" TitleStyle-HoritzontalAlign="Left">


        You can also opt to not round the bottoms, if that's what floats your boat.


</skm:roundedcorners>


<skm:roundedcorners id="RoundedCorners4" runat="server"  CornerHeight="20px"

     BackColor="lightblue" BorderColor="navy" BorderStyle="Solid" BorderWidth="6px" Font-Names="Arial"

     ImageDirectory="/Images/" Padding="3px" TextHorizontalAlign="Center">


        This is another example <b>without</b> a specifically set width.  Notice that table flows here nicely.

        The <code>BorderWidth</code> is six pixels.


</skm:roundedcorners>


	This is another example without a specifically set width. Notice that table flows here nicely. The `BorderWidth` is six pixels.

Anti-Aliasing Demo
The control on the left is anti-aliased, the one on the right is not.


	This is anti-aliased.


	This is not anti-aliased.

[Download the Complete Source Code for this Web Control] | [My Blog] | [About Me]