C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码

简介: 原文:C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
原文: C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码

前言

系列目录

C#使用Xamarin开发可移植移动应用目录

源码地址:https://github.com/l2999019/DemoApp

可以Star一下,随意 - -

一点感想

很意外的,第一篇博文被博客园的编辑大哥置顶了.感谢.

评论也很多,褒贬不一,我还是那句话.技术是从无到有的过程,就像一个刚出生的人 不是说他有个强大的爸爸 所以就可以一出生就上天.

.NET如此,JAVA亦如此.言尽于此,对于喷子 好自为之..

好了,废话不多说,我们开始本章的内容.

今天的学习内容?

昨天学了内容页,当然就少不了内容页里面的布局,所以..

今天我们主要学习Xamarin.Forms中提供的各类布局手段,如图:

 

Xamarin.Forms提供了5种布局,我这里只截取了4种,第五种是ScrollView,个人觉得..这个的操作作用大于布局作用..所以本章就不讲了.

本篇很长...内容很多,且自己认为比较重要..大家耐心看

各种布局,Demo效果如下:

 

正文

0.使用Xamarin.Forms Previewer预览界面效果

Xamarin.Forms Previewer是微软提供的可以不运行程序,直接预览界面效果的工具..

因为本章主要讲布局,所以用这个会比较方便,不用每次都运行调试.

嗯,这个工具.大家凑合用 - -,因为它本身比较麻烦且会有莫名BUG,不过用顺畅了 还不错.

VS2017直接按照下图方式打开即可,VS2015 - - 我暂时没辙...

 

效果如下:

 好了,大功告成,

嗯..使用中有任何的错误 或者红色的错误提示,请重新生成程序集,或者在几个视图中跳转一下..一般都会好..(tips:这就是我说的小麻烦)

 

1.StackLayout(线性布局)

StackLayout以线性的方式进行水平或垂直的视图布局。

我们直接创建一个ContentPage.

然后添加如下Xaml代码:

    <ContentPage.Content>
        <StackLayout Spacing="10" x:Name="layout">
            <Button Text="StackLayout" VerticalOptions="Start"
        HorizontalOptions="FillAndExpand" />
            <BoxView Color="Yellow" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView Color="Green" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView HeightRequest="75" Color="Blue" VerticalOptions="End"
        HorizontalOptions="Start" />
        </StackLayout>
    </ContentPage.Content>

效果如图:

 

1.1布局方向

方向嘛..就是横向,和竖向.通过在StackLayout 中设置Orientation属性.

就两个选择,Horizontal(水平方向),Vertical(垂直方向)默认为Vertical

代码如下:

 <StackLayout Spacing="10" x:Name="layout" Orientation="Horizontal">
<--这里是内容-->
 </StackLayout>

1.2定位

大家可以看到,我在StackLayout 中的控件里面加了2个属性:

VerticalOptions(垂直位置)

HorizontalOptions(水平位置)

这2个属性,要求传递LayoutOptions(布局选项)的枚举,我们可以通过这里面的选择,来确定我们控件的位置.

  • Center – 将控件固定在视图的中心位置
  • End – 将控件固定在布局中的底部位置(横向布局则为最右边)
  • Fill – 将控件根据布局方向填充空余位置.
  • Start – 将控件固定在布局中的顶部位置(横向布局则为最左边)

1.3填充

在上面的定位属性后面,都可以加一个后缀AndExpand,嗯..举个例子 就是这样FillAndExpand

会产生什么效果呢?

它会根据屏幕的大小,和你布局中其他的内容,如果有空白位置就会由设置了AndExpand的自动填充.

如果多个属性都有AndExpand

则会平分空白的位置.

1.4边距

边距的设置很简单,设置StackLayout 的Spacing属性即可.

Spacing默认值为6

 

2.AbsoluteLayout(绝对定位)

这个..写过HTML的朋友们都知道,绝对定位嘛..就是根据X Y轴的坐标 直接给出控件的位置.

嗯先上列子的xaml代码吧,如下:

 <AbsoluteLayout>
         
            <Label Text="这里是数值定位"
                AbsoluteLayout.LayoutBounds="1,50,50,100" LineBreakMode="WordWrap"  />
            <Label Text="这里是按百分比例定位"
                AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
                LineBreakMode="WordWrap"  />
            <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100" 
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
            <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
                AbsoluteLayout.LayoutFlags="PositionProportional" />
        </AbsoluteLayout>

效果如下:

下面我们就来详细的讲解一下绝对定位布局相关的属性.

我们如果在AbsoluteLayout中添加控件,会发现,所有的控件,都会多出一个命名空间,下面有2个属性,如下:

讲解这2个属性之前,我们需要了解AbsoluteLayout中的2个概念,一个叫做比例值,一个叫绝对值.

其实从字面就可以看出来,比例值就是类似HTML的10%,20%之类的..绝对值就是类似HTML的5px,10px之类的

当然,我们的Xamarin有所不同.   比例值需要设置为.1(注意前面有个".", .1的意思就是10% ) 绝对值就很简单了 10, 100 ..直接给数字就行

2.1 LayoutBounds

从上面的例子我们可以看到LayoutBounds是有4个值的.类似下面:

 <Label Text="这里是数值定位"
                AbsoluteLayout.LayoutBounds="1,50,50,100" LineBreakMode="WordWrap"  />

从左至右,依次代表的意思是:

X轴的位置,Y轴的位置,控件的宽度,控件的高度.

有了上面这些属性,我们就可以很轻松的操控一个控件所在的位置和大小了.

 

2.2 LayoutFlags

上面我们说过,是分比例值与绝对值的.那怎么设置这个呢,就是通过LayoutFlags这个属性.它有7个枚举值.如下:

  • 默认 - 将所有值解析为绝对值。如果未指定LayoutFlags,则为默认值。
  • All- 将所有值解析为比例。
  • WidthProportional - 仅将Width值作为比例值,将所有其他值解析为绝对值。
  • HeightProportional - 仅将height值作为比例值,将所有其他值解析为绝对值。
  • XProportional -  仅将X轴作为比例值,将所有其他值解析为绝对值。
  • YProportional-  仅将Y轴作为比例值,将所有其他值解析为绝对值。
  • PositionProportional - X轴Y轴作为比例解析,而控件大小值被作为绝对值解析。
  • SizeProportional - 将控件大小值作为比例解析,而X轴Y轴被作为绝对值解析。

 

 

3.RelativeLayout(相对定位)

 嗯..相对定位,顾名思义..就是相对于某个控件来进行定位..也可以是整个布局

示例代码如下:

   <RelativeLayout>
            <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
            <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
        </RelativeLayout>

效果如下:

相对定位的东西比较复杂,仔细阅读吧.

 

3.1 Constraint(约束)

相对定位有个叫做约束的概念,所以我们可以看到.在RelativeLayout的里面,所有的控件 都会出现下面几种属性

XConstraint ,YConstraint, WidthConstraint,HeightConstraint

其实看前面,大家就应该知道是X Y 宽 高.

里面的写法 类似于JSON,如下:

 

  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=Y,Factor=1,Constant=20}"

 

大口号前面定义ConstraintExpression,代表它为约束的表达式.

里面有5个属性,解释如下:

  • Type – 类型,有2个选择RelativeToParentRelativeToView,看单词大家应该就明白了,一个是针对于父节点的相对定位,一个是针对某一个视图的相对定位
  • Property – 你要设置的什么属性,例如Property=Height,就是你要设置的是高度的属性.
  • Factor – 你要相对于某视图的比例值,比如A控件高度是100,你这里输入.5, 那么就是50.
  • Constant – 你要调整的属性值,因为上面只能设置比例,所以通过这个属性来微调位置,设置负数就是减去你设置的值,正数就是加
  • ElementName – 你要相对的控件的Name,例如:ElementName=redBox, 就是相对于 x:Name属性为redBox的控件.(例子中的红色块)  

 

 

4.Grid(表格布局)

Gird表格布局,支持将视图排列成行和列。行和列可以设置为比例值或绝对值。

Gird布局不应该与传统的表格相混淆,并且他的作用并不是呈现表格数据。

它不像HTML中的Table,Gird纯粹是为了布局内容。

例子代码如下:

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="4*" />
                    <RowDefinition Height="*"  />
                    <RowDefinition Height="200" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <BoxView  BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0" />
                <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
                <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" BackgroundColor="Cyan" Grid.ColumnSpan="2" />
                <!--<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />-->
                <BoxView  BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="0" />
                <BoxView  BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" />
                <BoxView  BackgroundColor="AliceBlue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="3" Grid.Column="0" />
                
            </Grid>

效果如下:

 

4.1 Grid.RowDefinitions

它是设置Grid行数的容器,应该放在Grid标签里面,例子如下:

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="4*" />
                    <RowDefinition Height="*"  />
                    <RowDefinition Height="200" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>
            </Grid>

这样就设置了一个为4行的Grid,可以通过Height属性来设置它的高."*"号为百分比设置  2*表示为20%. 直接设置绝对值也可以,如例子中的Height="200"

 

4.2 Grid.ColumnDefinitions

它是设置Grid列数的容器,应该放在Grid标签里面,例子如下:

<Grid>
<Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>

这样就设置了一个为2列的Grid,可以通过Width属性来设置它的高."*"号为百分比设置  2*表示为20%. 直接设置绝对值也可以,如Width="200"

 

4.3  设置Grid中的内容.

很简单,直接在Grid中添加控件,并写好对应的行列就行了.如下

 <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />

那么,这个label控件就会显示在Grid中的第一行 第二列(注意:这里的行列都是从0开始)

 

4.4  如何跨行,跨列

跨行,跨列也很简单,如下:

<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" BackgroundColor="Cyan" Grid.ColumnSpan="2" />
<BoxView  BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" />

直接设置Grid.ColumnSpanGrid.RowSpan 即可,HTML中的Table已经用过很多次了..我就不多解释了.

 

4.5  如何设置行间距与列间距

 嗯..同样简单,直接设置Grid标签的ColumnSpacingRowSpacing即可.如下:

<Grid ColumnSpacing="5" RowSpacing="10">
</Grid>

上面的列子就是行间距为10,列间距为5.

 

写在最后

好了,到此,本篇的布局就结束了...

不管你们怎么说..是骂我坑也好..是说Xamarin不行也好..本系列都会坚持写完.

最后,感谢点推荐的兄弟们,感谢那些一直支持着我的朋友们,谢谢.

目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
C# 6.0+JavaScript云LIS系统源码  云LIS实验室信息管理新型解决方案
云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序,可协助区域内所有临床实验室相互协调并完成日常检验工作,对区域内的检验数据进行集中管理和共享,通过对质量控制的管理,最终实现区域内检验结果互认。其目标是以医疗服务机构为主体,以医疗资源和检验信息共享为目标,集成共性技术及医疗服务关键技术,建立区域协同检验,最大化利用有限的医疗卫生资源。
107 1
|
1月前
|
数据采集 安全 JavaScript
C#医院手术麻醉信息管理系统源码 对接院内HIS、LIS、PACS
手麻系统的功能涵盖了麻醉临床业务管理、麻醉运营业务管理以及手术进程管理等,实现了将多种麻醉病历文书与医院HIS系统的有效关联,让手术室人员、设备资源和信息资源高度共享;实现了手术安排、各种统计报表等科室管理和科研工作的需求,可借其收集临床数据、进行整合分析,为围术期临床信息、管理、科研提供整体解决方案;该系统的运行,为医护人员提供了流程化、信息化、自动化、智能化的临床业务综合管理。
43 5
|
1月前
|
前端开发 Java C#
java/C#语言开发的医疗信息系统11套源码
java/C#语言开发的医疗信息系统11套源码
47 2
|
1月前
|
传感器 数据采集 大数据
C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码
手麻系统从麻醉医生实际工作环境和流程需求方面设计,与HIS,LIS,PACS,EMR无缝连接,方便查看患者的信息;实现术前、术中、术后手术麻醉信息全记录;减少麻醉医师在手术中填写麻醉记录单时间,证手术麻醉相关信息的准确性,有效降低医护人员的术中书写医疗文书的压力,使得麻醉医生在术中能够更加集中精力在病人的麻醉操作上,提升手术质量
26 2
|
1月前
|
存储 运维 BI
基于C#-VC-MSSQL开发的全套PACS系统源码 3D PACS系统源码:可实现医学影像获取、存档、观片、处理、打印多项应用
PACS的功能价值在于通过连接不同的影像设备,存储与管理图像,图像的调用与后处理,实现资源共享,降低成本,达到提高工作效率、提升医疗水平的目地;
27 1
基于C#-VC-MSSQL开发的全套PACS系统源码  3D PACS系统源码:可实现医学影像获取、存档、观片、处理、打印多项应用
|
1月前
|
存储 数据采集 安全
C#医院手术室麻醉信息管理系统源码 自动生成麻醉的各种医疗文书(手术风险评估表、手术安全核查表)
医院手术麻醉信息系统有着完善的临床业务功能,能够涵盖整个围术期的工作,能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施,能够规范麻醉科的工作流程,实现麻醉手术过程的信息数字化,自动生成麻醉的各种医疗文书,完成共享HIS、LIS、PACS和EMR等手术患者信息,从而提高麻醉、手术工作的管理水平。
39 3
|
1月前
|
存储 开发框架 前端开发
C#开发的全套成熟的LIS系统源码JavaScript+SQLserver 2012区域云LIS系统源码
医院云LIS系统是一套成熟的实验室信息管理系统,目前已在多家三级级医院应用,并不断更新。云LIS系统是为病人为中心、以业务处理为基础、以提高检验科室管理水平和工作效率为目标,将医学检验、科室管理和财务统计等检验科室/实验室所有工作进行整合,全面改善检验科室/实验室的工作现状。
27 0
|
1月前
|
存储 安全 Oracle
C#检验科lis实验室信息管理系统源码
LIS是全院信息化建设的一个重要组成部分,其主要功能是将检验的实验仪器传出的检验数据经分析后,生成检验报告,通过网络存储在数据库中,使医生能够方便、及时的看到患者的检验结果,LIS已经成为现代化医院管理中必不可少的一部分。有助于提高实验室的整体管理水平,减少漏洞,提高检验质量。
25 1
|
1月前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
30 0
|
1月前
|
C#
C#掌上医院预约挂号支付系统源码
医院微信预约挂号系统是一种基于微信平台的医疗服务系统,它利用微信的广泛覆盖和便捷性,为患者提供线上预约挂号的服务。通过该系统,患者可以使用自己的微信账号登录,浏览医院的医生排班信息,选择合适的医生和就诊时间进行预约。 医院微信预约挂号系统主要是让自费、医保患者在手机上就能实现就医全过程,实时自费、医保结算,同时还可以查询检查检验报告等就诊信息。
22 3