[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]