1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Border.aspx.cs" Inherits="ZeeControls2Demo.LayoutExamples.Border" Theme="Default" %>
2
3 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9 <title>Border Layout</title>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14 <cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" FitParent="FitWindow"
15 Height="731px" Orientation="Horizontal" Width="910px"><Panels>
16 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
17 North
18 </Content>
19 </cc1:WebSplitterPanel>
20 <cc1:WebSplitterPanel runat="server" Filled="True" ><Content>
21 <cc1:WebSplitterContainer ID="WebSplitterContainer2" runat="server" FitParent="FitParentContainer"
22 Height="200px" InheritSplitterProps="False" Width="733px">
23 <Panels>
24 <cc1:WebSplitterPanel runat="server" CanCollapse="Backward">
25 <Content>
26 East
27 </Content>
28 </cc1:WebSplitterPanel>
29 <cc1:WebSplitterPanel runat="server" Filled="True">
30 <Content>
31 <strong>Border Layout<BR />
32 <br />
33 </strong>To create a border layout that has North, South, East, West, and Center
34 content areas, a nested splitter container is added to the middle panel of a top-level
35 splitter container.<br />
36 <BR />
37 In this example, the North and South areas are not resizable, and the East and West
38 areas are resizable and collapsible. The Center content area will fit the remaining space when the
39 browser window is resized.<br />
40 <br />
41 Relevant Container property values:<br />
42 <br />
43 <table border="1">
44 <tr>
45 <td style="width: 110px" class="tableColumnHeader">
46 </td>
47 <td style="width: 128px" align="center" class="tableColumnHeader">
48 FitParent</td>
49 <td style="width: 84px" align="center" class="tableColumnHeader">
50 Orientation</td>
51 <td style="width: 153px" align="center" class="tableColumnHeader">
52 SplitterProps.Thickness</td>
53 <td align="center" class="tableColumnHeader" style="width: 132px">
54 InheritSplitterProps</td>
55 </tr>
56 <tr>
57 <td style="width: 110px; height: 42px;" class="tableRowHeader">
58 Top-level splitter container</td>
59 <td style="width: 128px; height: 42px;" align="center">
60 FitWindow</td>
61 <td style="width: 84px; height: 42px;" align="center">
62 Horizontal</td>
63 <td style="width: 153px; height: 42px;" align="center">
64 1</td>
65 <td align="center" style="width: 132px; height: 42px">
66 True<br />
67 (don't care)</td>
68 </tr>
69 <tr>
70 <td class="tableRowHeader" style="width: 110px">
71 Nested splitter container</td>
72 <td align="center" style="width: 128px">
73 FitParentContainer</td>
74 <td align="center" style="width: 84px">
75 Vertical</td>
76 <td align="center" style="width: 153px">
77 4</td>
78 <td align="center" style="width: 132px">
79 False</td>
80 </tr>
81 </table>
82 <br />
83 <br />
84 Relevant Panel property values:<br />
85 <span style="font-size: 8pt">(Note that there are actually 6 splitter panels on this
86 page: 3 in the top-level container, and 3 in the nested container.)</span><br />
87 <br />
88 <table border="1">
89 <tr>
90 <td style="width: 109px; height: 21px;" class="tableColumnHeader">
91 </td>
92 <td style="width: 49px; height: 21px" align="center" class="tableColumnHeader">
93 Filled</td>
94 <td style="width: 112px; height: 21px" align="center" class="tableColumnHeader">
95 Resizable</td>
96 <td style="width: 108px; height: 21px" align="center" class="tableColumnHeader">
97 PreferredSize</td>
98 <td style="width: 93px" align="center" class="tableColumnHeader">
99 CanCollapse</td>
100 </tr>
101 <tr>
102 <td style="width: 109px" class="tableRowHeader">
103 North panel</td>
104 <td style="width: 49px" align="center">
105 False</td>
106 <td style="width: 112px" align="center">
107 False</td>
108 <td style="width: 108px" align="center">
109 50</td>
110 <td style="width: 93px" align="center">
111 None</td>
112 </tr>
113 <tr>
114 <td class="tableRowHeader" style="width: 109px">
115 Parent panel of nested container</td>
116 <td align="center" style="width: 49px">
117 True</td>
118 <td align="center" style="width: 112px">
119 False<br />
120 (don't care)</td>
121 <td align="center" style="width: 108px">
122 100<br />
123 (don't care)</td>
124 <td align="center" style="width: 93px">
125 None</td>
126 </tr>
127 <tr>
128 <td class="tableRowHeader" style="width: 109px">
129 South panel</td>
130 <td align="center" style="width: 49px">
131 False</td>
132 <td align="center" style="width: 112px">
133 False</td>
134 <td align="center" style="width: 108px">
135 50</td>
136 <td align="center" style="width: 93px">
137 None</td>
138 </tr>
139 <tr>
140 <td class="tableRowHeader" style="width: 109px">
141 East panel</td>
142 <td align="center" style="width: 49px">
143 False</td>
144 <td align="center" style="width: 112px">
145 True</td>
146 <td align="center" style="width: 108px">
147 100</td>
148 <td align="center" style="width: 93px">
149 Backward</td>
150 </tr>
151 <tr>
152 <td style="width: 109px" class="tableRowHeader">
153 Center content</td>
154 <td style="width: 49px" align="center">
155 True</td>
156 <td style="width: 112px" align="center">
157 True</td>
158 <td style="width: 108px" align="center">
159 100<br />
160 (don't care)</td>
161 <td style="width: 93px" align="center">
162 None</td>
163 </tr>
164 <tr>
165 <td style="width: 109px" class="tableRowHeader">
166 West panel</td>
167 <td style="width: 49px" align="center">
168 False</td>
169 <td style="width: 112px" align="center">
170 True</td>
171 <td style="width: 108px" align="center">
172 100</td>
173 <td style="width: 93px" align="center">
174 Forward</td>
175 </tr>
176 </table>
177 </Content>
178 </cc1:WebSplitterPanel>
179 <cc1:WebSplitterPanel runat="server" CanCollapse="Forward">
180 <Content>
181 West
182 </Content>
183 </cc1:WebSplitterPanel>
184 </Panels>
185 </cc1:WebSplitterContainer>
186 </Content>
187 </cc1:WebSplitterPanel>
188 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
189 South
190 </Content>
191 </cc1:WebSplitterPanel>
192 </Panels>
193 <SplitterProps Thickness="1" />
194 </cc1:WebSplitterContainer>
195
196 </div>
197 </form>
198 </body>
199 </html>
200
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace ZeeControls2Demo.LayoutExamples
13 {
14 public partial class Border : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18
19 }
20 }
21 }
22
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>