FineUI布局应用(二)_weixin_30767921的博客-程序员宅基地

一、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>

转载于:https://www.cnblogs.com/1312mn/p/3590233.html

本文链接：https://blog.csdn.net/weixin_30767921/article/details/98794918

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

MySQL master-master replication 深入了解 (转）-程序员宅基地

MySQL企业版和社区版提供master－slave异步的replication机制，MySQL cluster提供同步的replication机制，关于cluster replication机制本文不做叙述，Mysql可以配置为互为master－slave，这样就相当于可以做到master－master，配置步骤就是将以下配置在相反的lab上再做一次。

MPC5746C双核启动配置分析-程序员宅基地

MPC5746C内部集成了一个BAF（Boot Assist Flash）小工具（代码）（这个有点像Bootloader），BAF主要用于管理多核CPU的启动，其原理是寻找特定地址的启动头，查看并根据启动头的配置信息来启动CPU内核。启动头的地址如下所示：启动头的配置结构如下所示：启动头配置字节如下所示：CPU编号与MPC5746C内核的对..._pc5746c

fflush(stdin)与fflush(stdout)-程序员宅基地

1.fflush(stdin)：作用：清理标准输入流，把多余的未被保存的数据丢掉。。如:int main(){ int num; char str[10]; cin>>num; cout<<num<<endl; cin>>str..._fflush(stdin)与fflush(stdout) weixin_30

12306bypass推送-程序员宅基地

打开软件，找到推送，点击Server酱。根据网页提示，用GitHub账号登录Server酱。输入GitHub账号密码，点击登录。点击授权。点击微信推送，绑定微信号。扫描二维码，点击关注，关注后，手机会收到消息提示，点击检查结果并确认绑定。然后看到网站提示微信推送已开启，准备工作就可以了。点击发送消息，下拉，找到最简单的消息发送方式是通过浏览...

什么是ES5作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。1. strict模式严格模式，限制一些用法，'use strict';2. Array增加方法增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法PS：还有其他方法..._es5 proxy

程序员必须掌握的 10 款开源工具！_DevolperFront的博客-程序员宅基地

点击“开发者技术前线”，选择“星标????”在看|星标|留言, 真爱雨轩小晴https://www.seoxiehui.cn/article-178878-1.html本文主要介绍Java程序...