FineUI布局应用(二)

 

一、FineUI页面布局分为

    1、Fit布局

 1   <f:Panel ID="Panel1" Title="布局Fit（Layout=Fit）" runat="server" Layout="Fit" Height="300px" EnableFrame="true" EnableCollapse="true"

 2             BodyPadding="5px" Width="850px" ShowBorder="True"

 3             ShowHeader="True">

 4             <Items>

 5                 <f:Form ID="Form2" runat="server" ShowBorder="True" BodyPadding="5px" ShowHeader="false" Title="表单">

 6                     <Rows>

 7                         <f:FormRow>

 8                             <Items>

 9                                 <f:Label ID="Label1" Label="文本" Text="文本内容" runat="server">

10                                 </f:Label>

11                             </Items>

12                         </f:FormRow>

13                         <f:FormRow>

14                             <Items>

15                                 <f:TextBox ID="TextBox1" Label="输入框" runat="server">

16                                 </f:TextBox>

17                                 <f:Button ID="Button1" Text="按钮" runat="server">

18                                 </f:Button>

19                             </Items>

20                         </f:FormRow>

21                     </Rows>

22                 </f:Form>

23             </Items>

24         </f:Panel>

    2、Anchor布局方式

 1 <f:Panel ID="Panel2" runat="server" Height="300px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

 2             BodyPadding="5px" Layout="Anchor" ShowHeader="True" Title="布局Anchor（Height=300px Width=750px Layout=Anchor）">

 3             <Items>

 4                 <f:Panel ID="Panel4" AnchorValue="60% 30%" runat="server"

 5                     BodyPadding="5px" ShowBorder="True" ShowHeader="false">

 6                     <Items>

 7                         <f:Label ID="Label3" ShowEmptyLabel="false" Text="AnchorValue=60% 30%" runat="server">

 8                         </f:Label>

 9                     </Items>

10                 </f:Panel>

11                 <f:Form ID="Form2" AnchorValue="100% 70%" runat="server"

12                     BodyPadding="5px" ShowBorder="True" ShowHeader="false">

13                     <Rows>

14                         <f:FormRow>

15                             <Items>

16                                 <f:Label ID="Label1" ShowEmptyLabel="false" Text="AnchorValue=100% 70%" runat="server">

17                                 </f:Label>

18                             </Items>

19                         </f:FormRow>

20                         <f:FormRow>

21                             <Items>

22                                 <f:TextBox ID="TextBox1" Label="输入框" runat="server">

23                                 </f:TextBox>

24                                 <f:Button ID="Button7" Text="按钮" runat="server">

25                                 </f:Button>

26                             </Items>

27                         </f:FormRow>

28                     </Rows>

29                 </f:Form>

30             </Items>

31         </f:Panel>

 

    3、Column

 <f:Panel ID="Panel2" runat="server" Height="250px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

            BodyPadding="5px" Layout="Column" ShowHeader="True" Title="布局Column（Height=250px Width=750px Layout=Column）">

            <Items>

                <f:Panel ID="Panel1" Width="200px" Height="150px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label runat="server" Text="Width=200px Height=150px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel4" ColumnWidth="60%" runat="server"

                    BodyPadding="5px" ShowBorder="true" ShowHeader="false" Layout="Fit">

                    <Items>

                        <f:Label ID="Label1" runat="server" Text="ColumnWidth=60%<br />长长的文本1<br />长长的文本2<br />长长的文本3<br />长长的文本4"

                            EncodeText="false">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel3" ColumnWidth="40%" runat="server"

                    BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label2" runat="server" Text="ColumnWidth=40%">

                        </f:Label>

                    </Items>

                </f:Panel>

            </Items>

        </f:Panel>

 

    4、Absolute

<f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

            Layout="Absolute" ShowHeader="True" Title="布局Absolute（Height=450px Width=750px Layout=Absolute）">

            <Items>

                <f:Panel ID="Panel1" Width="300px" Title="Panel1" Height="300px" AbsoluteX="100px"

                    BodyPadding="5px" AbsoluteY="50px" runat="server"

                    ShowBorder="True" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label3" EncodeText="false" Text="Width=300px <br/>Height=300px <br/>AbsoluteX=100px <br/>AbsoluteY=50px"

                            runat="server">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel3" Title="Panel2" Width="150px" Height="150px" AbsoluteX="450px"

                    BodyPadding="5px" AbsoluteY="150px" runat="server"

                    ShowBorder="True" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label1" EncodeText="false" Text="Width=150px <br/>Height=150px <br/>AbsoluteX=450px <br/>AbsoluteY=150px"

                            runat="server">

                        </f:Label>

                    </Items>

                </f:Panel>

            </Items>

        </f:Panel>

 

    5、Table

<f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

            Layout="Table" TableConfigColumns="3" ShowHeader="True" Title="布局Table（Height=450px Width=750px Layout=Table）">

            <Items>

                <f:Panel ID="Panel1" Title="Panel1" Width="300px" Height="210px"

                    TableRowspan="2" runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label1" runat="server" Text="Width=300px Height=210px TableRowspan=2">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel3" Title="Panel2" Width="430px" Height="100px"

                    TableColspan="2" runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label2" runat="server" Text="Width=430px Height=100px TableColspan=2">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel4" Title="Panel3" Width="200px" Height="100px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label3" runat="server" Text="Width=200px Height=100px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel5" Title="Panel4" Width="220px" Height="100px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label4" runat="server" Text="Width=220px Height=100px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel6" Title="Panel5" Width="300px" Height="100px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label5" runat="server" Text="Width=300px Height=100px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel7" Title="Panel6" Width="200px" Height="100px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label6" runat="server" Text="Width=200px Height=100px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel8" Title="Panel6" Width="220px" Height="100px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label7" runat="server" Text="Width=220px Height=100px">

                        </f:Label>

                    </Items>

                </f:Panel>

            </Items>

        </f:Panel>

 

    6、HBox

<f:Panel ID="Panel2" runat="server" Height="250px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

            Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"

            BoxConfigChildMargin="0 5 0 0" ShowHeader="True"

            Title="面板（Layout=HBox BoxConfigAlign=Stretch BoxConfigPosition=Start BoxConfigPadding=5 BoxConfigChildMargin=0 5 0 0）">

            <Items>

                <f:Panel ID="Panel1" Title="面板1" BoxFlex="1" runat="server"

                    BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label1" runat="server" Text="BoxFlex=1">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel3" Title="面板2" Width="150px"

                    runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label2" runat="server" Text="Width=150px">

                        </f:Label>

                    </Items>

                </f:Panel>

                <f:Panel ID="Panel4" Title="面板3" BoxFlex="2" runat="server"

                    BodyPadding="5px" BoxMargin="0" ShowBorder="true" ShowHeader="false">

                    <Items>

                        <f:Label ID="Label3" runat="server" Text="BoxFlex=2 BoxMargin=0">

                        </f:Label>

                    </Items>

                </f:Panel>

            </Items>

        </f:Panel>

 

    7、VBox

 1 <f:Panel ID="Panel2" runat="server" Height="450px" Width="850px" ShowBorder="True" EnableFrame="true" EnableCollapse="true"

 2             Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"

 3             BoxConfigChildMargin="0 0 5 0" ShowHeader="True" Title="面板（Layout=VBox BoxConfigAlign=Stretch BoxConfigPosition=Start BoxConfigPadding=5 BoxConfigChildMargin=0 0 5 0）">

 4             <Items>

 5                 <f:Panel ID="Panel1" Title="面板1" BoxFlex="1" runat="server"

 6                     BodyPadding="5px" ShowBorder="true" ShowHeader="false">

 7                     <Items>

 8                         <f:Label ID="Label1" runat="server" Text="BoxFlex=1">

 9                         </f:Label>

10                     </Items>

11                 </f:Panel>

12                 <f:Panel ID="Panel3" Title="面板2" Height="100px" runat="server"

13                     BodyPadding="5px" ShowBorder="true" ShowHeader="false">

14                     <Items>

15                         <f:Label ID="Label2" runat="server" Text="Height=100px">

16                         </f:Label>

17                     </Items>

18                 </f:Panel>

19                 <f:Panel ID="Panel4" Title="面板3" BoxFlex="2" BoxMargin="0"

20                     runat="server" BodyPadding="5px" ShowBorder="true" ShowHeader="false">

21                     <Items>

22                         <f:Label ID="Label3" runat="server" Text="BoxFlex=2 BoxMargin=0">

23                         </f:Label>

24                     </Items>

25                 </f:Panel>

26             </Items>

27         </f:Panel>