Adding content to the C1SuperPanel control is as simple as clicking in the body of the control and typing text or adding controls. The following steps assume you've completed the Step 1 of 4: Adding C1SuperPanel to the Page topic.
Complete the following steps to add content to C1SuperPanel:
1. In Source view add the following markup within the <div> tag that appears right after the </asp:ScriptManager> tag to create the elements class to get the style for the elements that will appear within the C1SuperPanel control.
<div class="elements">
<div style="padding: 25px;">
2. Add the following tags within the <cc1:C1Superpanel> tag to add a button and textboxes to set the Height and Width properties.
Width="300px" Height="300px"
3. In Source view add the <ContentTemplate></ContentTemplate> tags within the <cc1:C1SuperPanel></cc1:C1SuperPanel> tags to create a content template for C1SuperPanel. Within the tags create a class to define the style of the elements within the content template. Your source code should appear like the following:
<ContentTemplate>
<ul class="elements" style="height: 1011px; width: 1820px;">
<li><p>0</p><a href="#" title="" class="back">go back</a></li><li><p>1</p><a href="#" title="" class="back">go back</a></li><li><p>2</p><a href="#" title="" class="back">go back</a></li><li><p>3</p><a href="#" title="" class="back">go back</a></li><li><p>4</p><a href="#" title="" class="back">go back</a></li><li><p>5</p><a href="#" title="" class="back">go back</a></li><li><p>6</p><a href="#" title="" class="back">go back</a></li><li><p>7</p><a href="#" title="" class="back">go back</a></li><li><p>8</p><a href="#" title="" class="back">go back</a></li><li><p>9</p><a href="#" title="" class="back">go back</a></li><li><p>10</p><a href="#" title="" class="back">go back</a></li><li><p>11</p><a href="#" title="" class="back">go back</a></li><li><p>12</p><a href="#" title="" class="back">go back</a></li><li><p>13</p><a href="#" title="" class="back">go back</a></li><li><p>14</p><a href="#" title="" class="back">go back</a></li><li><p>15</p><a href="#" title="" class="back">go back</a></li><li><p>16</p><a href="#" title="" class="back">go back</a></li><li><p>17</p><a href="#" title="" class="back">go back</a></li><li><p>18</p><a href="#" title="" class="back">go back</a></li><li><p>19</p><a href="#" title="" class="back">go back</a></li><li><p>20</p><a href="#" title="" class="back">go back</a></li><li id="t1"><p>21</p><a href="#" title="" class="back">go back</a></li><li><p>22</p><a href="#" title="" class="back">go back</a></li><li><p>23</p><a href="#" title="" class="back">go back</a></li><li><p>24</p><a href="#" title="" class="back">go back</a></li><li><p>25</p><a href="#" title="" class="back">go back</a></li><li><p>26</p><a href="#" title="" class="back">go back</a></li><li><p>27</p><a href="#" title="" class="back">go back</a></li><li><p>28</p><a href="#" title="" class="back">go back</a></li><li><p>29</p><a href="#" title="" class="back">go back</a></li>
</ul>
</ContentTemplate>
</cc1:C1SuperPanel>
</div>
</div>
4. Add the following style markup between the <head> and </head> tags at the top of the document:
<style type="text/css">
.elements ul
{
padding: 0px;
margin: 0px;
}
.elements ul li {
background-color:#DDDDDD;
border:1px solid black;
font-weight:bolder;
height:100px;
padding:50px;
position:relative;
text-align:center;
width:200px;
}
.elements li {
float:left;
list-style: none none outside;
}
</style>
5. In design view notice that the elements within C1SuperPanel’s content template are styled.
Run your application and observe:
Notice how horizontal and vertical scrollbars automatically appear since the default value for the Visibility property is “Auto”. The style of the scrollbars takes the style of the Arctic visual style since the UseCustomScrollBar property is set to True.
Also notice the horizontal button location appears in the middle and the horizontal scrollbar location appears at the bottom. These are the default settings for the ButtonLocation and ScrollbarLocation properties.
The vertical button location for the vertical scrollbar appears in the center and the vertical scrollbar location appears to the right. These are the default settings for the ButtonLocation and ScrollbarLocation properties.
In this step you added content to C1SuperPanel control. In the next step you'll customize the scroll settings for C1SuperPanel.
|
