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

前言

源码地址: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="{ConstraintExpressionType=RelativeToParent,Property=Width,Factor=1,Constant=0}"RelativeLayout.HeightConstraint="{ConstraintExpressionType=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="{ConstraintExpressionType=RelativeToParent,Property=Width,Factor=.5,Constant=0}"RelativeLayout.HeightConstraint="{ConstraintExpressionType=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个选择RelativeToParent与RelativeToView,看单词大家应该就明白了,一个是针对于父节点的相对定位,一个是针对某一个视图的相对定位

  • 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.ColumnSpan与Grid.RowSpan 即可,HTML中的Table已经用过很多次了..我就不多解释了.

 

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

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

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

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

 

写在最后

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

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

相关文章： 

  • C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码

  • .NET Standard@Xamarin.Forms

原文地址：http://www.cnblogs.com/GuZhenYin/p/7338709.html

.NET社区新闻，深度好文，微信中搜索dotNET跨平台或扫描二维码关注

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/324182.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

构建SpringCloud项目基础框架

构建SpringCloud项目基础框架

文章目录父项目microcloud本地模拟RPC调用common-api子模块创建dto类创建服务接口创建一个对象拷贝的工具类provider-dept-8001 子模块bootstrap.ymlapplication.ymllogback-spring.xmlSwagger配置创建MyBatisPlus配置类部门 数据库创建脚本创建Dept映射类创建IDeptDAO数据接口…
阅读更多...
Nginx中如何配置中文域名？

Nginx中如何配置中文域名？

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近我的个人站上线了&#xff0c;一直在优化中&#xff0c;目前优化最多的就是后台&#xff0c;将主页面的色彩重新搭配了下&#xff0c;稍微好看点儿了&#xff0c;以下是后台界面&#xff1a;前台界…
阅读更多...
JavaFX图表（九）之堆积面积图

JavaFX图表（九）之堆积面积图

翻译自 JavaFX - 堆积面积图 StackedArea Chart是区域图的变体&#xff0c;显示每个值的贡献趋势&#xff08;例如 - 加班&#xff09;。堆叠区域使每个系列相邻&#xff0c;但不与前面的系列重叠。这与区域图表形成对比&#xff0c;其中每个系列覆盖前面的系列。 以下是描绘…
阅读更多...
ASP.NET Core MVC – 自定义 Tag Helpers

ASP.NET Core MVC – 自定义 Tag Helpers

介绍 在之前的内容中&#xff0c;我们谈到了Tag Helpers&#xff0c;我们还谈到了 caching Tag Helpers和form Tag Helpers。 通过创建自定义Tag Helpers&#xff0c;我们可以扩展现有元素或创建我们自己的元素。 Tag Helper是实现ITagHelper接口类的统称。MVC为我们提供了该…
阅读更多...
sqlserver建库建表建约束，删库删表删约束的示例总结

sqlserver建库建表建约束，删库删表删约束的示例总结

1.创建一个数据库catedb,保存在本地D盘下面的DB中&#xff0c;主数据文件的初始大小为5MB&#xff0c;最大为200MB&#xff0c;增长率为10%&#xff0c;日志文件的初始大小为3MB&#xff0c;无限制增长&#xff0c;其增长率为2MB&#xff0c;请使用sql语句检测master数据库中是…
阅读更多...
JFreeChart（二）之饼图

JFreeChart（二）之饼图

转载自 JFreeChart饼图 在饼图中&#xff0c;每个扇区的弧长成正比它代表的数量。本章演示了如何使用JFreeChart 从一个给定的业务数据创建饼图。 业务数据 下面的例子描述了移动销售饼图。以下是不同移动品牌和销售(每天单位)列表。 S.N.手机品牌销售(天)1Iphone 5S202Sam…
阅读更多...
mysql中如何将默认用户名root改成其他？

mysql中如何将默认用户名root改成其他？

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……欢迎大家多多关注&#xff0c;多多留…
阅读更多...
ASP.NET Core - Razor 页面介绍

ASP.NET Core - Razor 页面介绍

简介 随着ASP.NET Core 2 即将来临&#xff0c;最热门的新事物是Razor页面。在之前的一篇文章中&#xff0c;我们简要介绍了ASP.NET Core Razor 页面。 Razor页面是ASP.NET Core的一个新功能&#xff0c;可以使基于页面的编程方式更容易&#xff0c;更高效。 大众的初步印象是…
阅读更多...
P2153-晨跑【费用流,网络流,拆点】

P2153-晨跑【费用流,网络流,拆点】

前言 这是评测记录 正题 AC评测记录链接&#xff1a; https://www.luogu.org/record/show?rid7945350 大意 一个图&#xff0c;没错要求不能走重复的边和点。求走最多次的情况下路最短。 解题思路 每次行走就是一个流量在流&#xff0c;然后将边权设为1就可以保证边只能走…
阅读更多...
从试卷中悟出的道理……

从试卷中悟出的道理……

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……不管是三班还是四班&#xff0c;一听…
阅读更多...
JFreeChart（三）之条形图

JFreeChart（三）之条形图

转载自 JFreeChart条形图 本章演示了如何使用JFreeChart从一个给定的业务数据创建条形图。 条形图使用不同的方位(水平或垂直)条&#xff0c;以显示不同类别的比较。图表中的一个轴(域轴)示出了特定的域进行比较&#xff0c;并在另一个轴(范围轴)表示的离散值。 业务数据 …
阅读更多...
ASP.NET Core 快速入门（实战篇）

ASP.NET Core 快速入门（实战篇）

上篇讲了《asp.net core在linux上的环境部署》。今天我们将做几个小玩意实战一下。用到的技术和工具有mysql、websocket、AngleSharp&#xff08;爬虫html解析&#xff09;、nginx多站点部署。 NO1 留言板&#xff08;mysql的使用&#xff09; 演示&#xff1a;http://haojim…
阅读更多...
P2053-修车【网络流,费用流】

P2053-修车【网络流,费用流】

前言 n和m搞反调半天系列 正题 AC记录链接&#xff1a; https://www.luogu.org/record/show?rid7949136 大意 又m个员工&#xff0c;n辆车&#xff0c;第j个员工修第i辆车需要T[i][j]的时间&#xff0c;求分配让顾客平均等待时间最短。 解题思路 首先先假设一个修车工要修…
阅读更多...
走的走的居然飞起来了……

走的走的居然飞起来了……

第一次坐飞机&#xff0c;终于满足了我的一个愿望了。记得之前在老家的山头上放羊时&#xff0c;远远的听到飞机想&#xff0c;我和我弟弟能把飞机目送到只剩下一条白线。。。。。一直在定睛观察飞机到底长啥样&#xff0c;那时候对于我们来说&#xff0c;能看见飞机的全面目就…
阅读更多...
JFreeChart（四）之线型图

JFreeChart（四）之线型图

转载自 JFreeChart线型图 线图或折线图来显示信息为一系列由直线段连接的数据点(标记)。线图显示数据在相同的时间频率如何变化。本章从一个给定的业务数据演示如何使用JFreeChart创建线型图。 业务数据 下面的示例绘制折线图显示从1970年开始学校在不同年份开通数量。 给…
阅读更多...
如何在Linux上使用VIM进行.Net Core开发

如何在Linux上使用VIM进行.Net Core开发

对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE.Windows上有Visual Studio, Mac上有Visual Studio for Mac, 难道Linux只有Visual Studio Code了吗?Linux上有两个最好的编辑器: VIM和Emacs, 哪个更好不是这一篇的主题, 这一篇的主题是如何在Linux上简单的构建…
阅读更多...
P2517-订货【网络流,费用流】

P2517-订货【网络流,费用流】

正题 AC链接&#xff1a; https://www.luogu.org/record/show?rid7949532 大意 有n个月&#xff0c;每个月商品价格di&#xff0c;需求量Ui。有容量为S的仓库&#xff0c;一个商品汇存一个月要m。求最低成本 解题思路 首先是月份做为点&#xff0c;成本作为费用&#xff0…
阅读更多...
教学交流研讨会总结（一）

教学交流研讨会总结（一）

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……
阅读更多...
JFreeChart（五）之XY图

JFreeChart（五）之XY图

转载自 JFreeChart XY图 在xy图(散点图)是根据一个数据系列组成的x和y值的列表。每个值对(x&#xff0c;y)是坐标系中的一个点。这里1值确定水平(X)位置&#xff0c;而另一个确定垂直(Y)位置。本章演示了如何使用JFreeChart从一个给定的业务数据创建XY图表。 业务数据 考虑…
阅读更多...
服务环境搭建

服务环境搭建

文章目录Nacos服务搭建一、nacos-server 环境搭建二、nacos-mysql 环境搭建三、建 领域模型REST访问配置&#xff08;给其他语言使用&#xff09;四、nacos-server 集群搭建Nacos服务搭建 一、nacos-server 环境搭建 1、 [nacos-server主机]&#xff08;考虑到后续开发的问题…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023