1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitContent.aspx.cs" Inherits="ZeeControls2Demo.LayoutExamples.SplitContent" 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>Split Content Layout</title>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14
15 <cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" FitParent="FitWindow"
16 Height="731px" Orientation="Horizontal" Width="910px"><Panels>
17 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
18 Header
19 </Content>
20 </cc1:WebSplitterPanel>
21 <cc1:WebSplitterPanel runat="server" Filled="True" PreferredSize="40" ><Content>
22 <strong>Split Content Layout<BR />
23 <br />
24 </strong>
25 In this example, the Header and Footer remain not resizable. The center
26 content area is divided into upper and lower panels. The upper and lower content
27 areas together will fill the remaining height of the
28 browser window. Their relative
29 heights are determined by their PreferredSize propety.<br />
30 <br />
31 As depicted below, the sum of the PreferredSize of the upper and lower content areas
32 is 100. So the upper and lower content areas actually take up 40% and 60% of the
33 remaining height respectively.<br />
34 <br />
35 </Content>
36 </cc1:WebSplitterPanel>
37 <cc1:WebSplitterPanel runat="server" CanCollapse="Forward" Filled="True" PreferredSize="60">
38 <Content>
39 Relevant Container property values:<br />
40 <br />
41 <table border="1">
42 <tr>
43 <td style="width: 110px" class="tableColumnHeader">
44 </td>
45 <td style="width: 128px" align="center" class="tableColumnHeader">
46 FitParent</td>
47 <td style="width: 84px" align="center" class="tableColumnHeader">
48 Orientation</td>
49 <td style="width: 153px" align="center" class="tableColumnHeader">
50 SplitterProps.Thickness</td>
51 <td align="center" class="tableColumnHeader" style="width: 248px">
52 SplitterProps.ThicknessWhenDisabled</td>
53 </tr>
54 <tr>
55 <td style="width: 110px; height: 42px;" class="tableRowHeader">
56 Splitter container</td>
57 <td style="width: 128px; height: 42px;" align="center">
58 FitWindow</td>
59 <td style="width: 84px; height: 42px;" align="center">
60 Horizontal</td>
61 <td style="width: 153px; height: 42px;" align="center">
62 4</td>
63 <td align="center" style="width: 248px; height: 42px">
64 1</td>
65 </tr>
66 </table>
67 <br />
68 <br />
69 Relevant Panel property values:<br />
70 <span style="font-size: 8pt"></span>
71 <br />
72 <table border="1">
73 <tr>
74 <td style="width: 109px; height: 21px;" class="tableColumnHeader">
75 </td>
76 <td style="width: 49px; height: 21px" align="center" class="tableColumnHeader">
77 Filled</td>
78 <td style="width: 112px; height: 21px" align="center" class="tableColumnHeader">
79 Resizable</td>
80 <td style="width: 108px; height: 21px" align="center" class="tableColumnHeader">
81 PreferredSize</td>
82 <td style="width: 93px" align="center" class="tableColumnHeader">
83 CanCollapse</td>
84 </tr>
85 <tr>
86 <td style="width: 109px" class="tableRowHeader">
87 Header panel</td>
88 <td style="width: 49px" align="center">
89 False</td>
90 <td style="width: 112px" align="center">
91 False</td>
92 <td style="width: 108px" align="center">
93 50</td>
94 <td style="width: 93px" align="center">
95 None</td>
96 </tr>
97 <tr>
98 <td class="tableRowHeader" style="width: 109px">
99 Upper center content area</td>
100 <td align="center" style="width: 49px">
101 True</td>
102 <td align="center" style="width: 112px">
103 True</td>
104 <td align="center" style="width: 108px">
105 40</td>
106 <td align="center" style="width: 93px">
107 None</td>
108 </tr>
109 <tr>
110 <td style="width: 109px" class="tableRowHeader">
111 Lower center content area</td>
112 <td style="width: 49px" align="center">
113 True</td>
114 <td style="width: 112px" align="center">
115 True</td>
116 <td style="width: 108px" align="center">
117 60</td>
118 <td style="width: 93px" align="center">
119 Forward</td>
120 </tr>
121 <tr>
122 <td style="width: 109px" class="tableRowHeader">
123 Footer panel</td>
124 <td style="width: 49px" align="center">
125 False</td>
126 <td style="width: 112px" align="center">
127 False</td>
128 <td style="width: 108px" align="center">
129 50</td>
130 <td style="width: 93px" align="center">
131 None</td>
132 </tr>
133 </table>
134 </Content>
135 </cc1:WebSplitterPanel>
136 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
137 Footer
138 </Content>
139 </cc1:WebSplitterPanel>
140 </Panels>
141 <SplitterProps ThicknessWhenDisabled="1" />
142 </cc1:WebSplitterContainer>
143 </div>
144 </form>
145 </body>
146 </html>
147
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 SplitContent : 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 --%>