ComponentOne SuperPanel for ASP.NET AJAX: SuperPanel for ASP.NET AJAX Task-Based Help > Customizing C1SuperPanel's Appearance > Applying the Visual Style to Children Elements in the SuperPanel

Applying the Visual Style to Children Elements in the SuperPanel

You can apply the same visual style you used for the C1SuperPanel control to all of your child elements in the C1SuperPanel control. This will make your UI have the same look and feel.

You can easily apply the visual style to children elements in Source view, from the Properties window, and in code.

In Source View

In Source view add ApplyVisualStyleToChildren="True" and VisualStyle="Office2007Black" to the <cc1:C1SuperPanel> tag. Also add <ContentTemplate></ContentTemplate> tags to include the C1Menu control in the C1SuperPanel so it appears similar to the following:

 

<cc1:C1SuperPanel ID="C1SuperPanel1" runat="server"

            ApplyVisualStyleToChildren="True" Height="185px" UseEmbeddedVisualStyles="True"

            VisualStyle="Office2007Black" VisualStylePath="~/C1WebControls/VisualStyles"

            Width="701px">

            <ContentTemplate>

                <cc2:C1Menu ID="C1Menu1" runat="server" UseEmbeddedVisualStyles="True"

                    VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles">

                    <Items>

                        <cc2:C1MenuItem runat="server" Text="LinkItem1">

                        </cc2:C1MenuItem>

                        <cc2:C1MenuItem runat="server" Text="LinkItem2">

                            <Items>

                                <cc2:C1MenuItem runat="server" Text="LinkItem1">

                                </cc2:C1MenuItem>

                                <cc2:C1MenuItem runat="server" Text="LinkItem2">

                                </cc2:C1MenuItem>

                                <cc2:C1MenuItem runat="server" Text="LinkItem3">

                                </cc2:C1MenuItem>

                                <cc2:C1MenuItem runat="server" Text="LinkItem4">

                                </cc2:C1MenuItem>

                            </Items>

                        </cc2:C1MenuItem>

                        <cc2:C1MenuItem runat="server" Text="LinkItem3">

                            <Items>

                                <cc2:C1MenuItem runat="server" Text="LinkItem1">

                                </cc2:C1MenuItem>

                                <cc2:C1MenuItem runat="server" Text="LinkItem2">

                                </cc2:C1MenuItem>

                            </Items>

                        </cc2:C1MenuItem>

                        <cc2:C1MenuItem runat="server" Text="LinkItem4">

                        </cc2:C1MenuItem>

                    </Items>

                </cc2:C1Menu>

            </ContentTemplate>

            <PanelBehaviorSettings>

                <VScroller Visibility="None">

                </VScroller>

            </PanelBehaviorSettings>

        </cc1:C1SuperPanel>

In Design View

You can modify the ApplyVisualStyleChildren property from the Properties window:

1.   Add the C1SuperPanel control to your page.

2.   Drag the C1Menu icon to the C1SuperPanel control so it appears within the C1SuperPanel control.

3.   Added some items to the C1Menu control.

4.   Click on the C1SuperPanel to select it.

5.   Navigate to the Properties window and select the drop-down arrow next to the VisualStyle property.

6.   Select a style to apply, for example Vista.

7.   Locate the ApplyVisualStyletoChildren property and set it to True.

 This task illustrates the following:

The child control, C1Menu, has the same visual style as the C1SuperPanel control to make it have the same look and feel.


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