Skip to main content

Posts

Showing posts with the label rounded panel

Dynamic Rounded Panel

This is another variant of the rounded panel creation (the first one you can see here ), that uses images to present curved corners. To be more precise, the only image is used, the one that is build based on the specified circle radius, the background color, the border color and width. The panel appearance varies according to all these parameters and can be dynamically changed in runtime. Picture 1. The structure of the top part of the rounded panel a - the left part where the upper left part of the image is shown. b - the middle that is filled with the background color and contains a block element (d). The d element imitates the image border. c - the right part where the upper right part of the image is shown. Of course, the middle can be simpler if to use the only block that is filled with the background color and has the upper border. But different browsers interpret borders ambiguously, some of them enlarge total height of the block element. It caused a small complication of th...

Rounded Panel without Images

Panels with rounded borders are widely used in the web site design. So widely that it is hard to add something new. I just try to wrap existing ideas in the form of a web control. Features: Can be set radius of the circle, back color and border color Without images (pure HTML) Only 130 lines of code Easy to use (see examples below this article) <cc:RoundedPanel ID="RoundedPanel1" runat="server" CssClass="r1" BorderColor="Gold" BackColor="Beige" Radius="9"></cc:RoundedPanel> I inherit control from WebControl. Mainly it will be a container for another elements so it needs PersistChildrenAttribute and ParseChildrenAttribute to be set correctly. BackColor and BorderColor properties have been defined in the base class, only radius of circle has to be added. [PersistChildren(true), ParseChildren(false), ToolboxData("<{0}:RoundedPanel runat=\"server\"></{0}:RoundedPanel>"), Designer(typ...