ComponentOne FormDecorator for ASP.NET AJAX: Decorated Zones

Decorated Zones

You can control which form elements get decorated by using the DecorationZoneID property. To designate a decorated area simply set the HTML element’s ID to a value such as ZoneID and then assign the ZoneID to the DecorationZoneID property.

Note that you can define one zone. If you would like to use different visual styles for the decorated zones you must place a C1FormDecorator control for every zone you wish to decorate. For example if you wanted to have three decorated zones with three different visual styles then you would have a C1FormDecorator control for each zone.

The following sample code uses one C1FormDecorator control to define one decorated zone on the page. The left fieldset element’s ID is set to ZoneID so the DecorationZoneID property can apply the visual style, Office2007Blue, to the controls inside the fieldset element.

Sample Code

<cc1:C1FormDecorator ID="C1FormDecorator1" runat="server"

        UseEmbeddedVisualStyles="True" VisualStyle="Office2007Blue" DecorationZoneID="ZoneID" />

   

      <div >

                <div id="ZoneID" style="float: left; width: 289px; height: 360px;">

                    <fieldset>

                        <legend>Decorated</legend>

                        <div style="float: left; width: 250px; height: 79px;">

                            <asp:CheckBoxList ID="CheckBoxList1" runat="server">

                                <asp:ListItem>CheckBox1</asp:ListItem>

                                <asp:ListItem>CheckBox2</asp:ListItem>

               

                            </asp:CheckBoxList>

                        </div>

                        <div style="float: left; width: 250px; height: 65px;">

                            <asp:RadioButtonList ID="RadioButtonList1" runat="server">

                                <asp:ListItem>RadioButton1</asp:ListItem>

                                <asp:ListItem>RadioButton2</asp:ListItem>

                

                            </asp:RadioButtonList>

                        </div>

                <div style="float: left; width: 250px; height: 40px;">

<asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem>Item1</asp:ListItem>

            <asp:ListItem>Item2</asp:ListItem>

</asp:DropDownList>

                  </div>

                         <div style="float: left; width: 250px; height: 120px; color: #000; font-size: 1.3em;">

                            <h3 style="color: #000; padding: 0; margin: 0;">

                                H3</h3>

                            <br />

                            <h4 style="color: #000; padding: 0; margin: 0;">

                                H4</h4>

                            <br />

                            <h5 style="color: #000; padding: 0; margin: 0;">

                                H5</h5>

                        </div>

                    </fieldset>

                </div>

                <div style="float: left; width: 264px; height: 360px;">

                    <fieldset >

                        <legend>Undecorated</legend>

                        <div style="float: left; width: 250px; height: 91px;">

                            <textarea cols="1" rows="3" style="width: 250px">TextArea</textarea>

                        </div>

                        <div style="float: left; width: 250px; height: 55px;">

                            <div style="width: 80px; float: left;">

                                <input type="button" value="button" style="width: 70px;" />

                            </div>

                            <div style="width: 80px; float: left;">

                                <input type="reset" value="reset" style="width: 70px;" />

                            </div>

                            <div style="width: 80px; float: left;">

                                <input type="submit" value="submit" style="width: 70px;" />

                            </div>

                        </div>

                        <div style="float: left; width: 250px; height: 120px; color: #000; font-size: 1.3em;">

                            <h3 style="color: #000; padding: 0; margin: 0;">

                                H3</h3>

                            <br />

                            <h4 style="color: #000; padding: 0; margin: 0;">

                                H4</h4>

                            <br />

                            <h5 style="color: #000; padding: 0; margin: 0;">

                                H5</h5>

                        </div>

                    </fieldset>

                </div>

                  </div>

                <div style="width: 660px; height: 60px; float: left;">

                </div>


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.