首页
视频
资源
登录
原
Xamarin.Forms UI 与 XAML的简单应用(一)
4399
人阅读
2022/4/1 15:54
总访问:
2625131
评论:
0
收藏:
0
手机
分类:
Xamarin
![](https://img.tnblog.net/arcimg/hb/59e2f99dba0340d09e3ea49cc983167f.png) >#Xamarin.Forms UI 与 XAML的简单应用(一) [TOC] ##XAML简介 tn2>XAML代表可扩展应用程序标记语言,你可以以声明式定义到你的用户界面中,它与XML非常相似,但是功能比XML更多。 ![](https://img.tnblog.net/arcimg/hb/7317faf8677d442f838626aa38101b7f.png) ##XAML功能 tn2>例如它能很好的适应到MVVM框架中,让你能够在用户界面中使用控件进行绑定和命令。 它还为你提供了出色的用户视觉体验。你可以知道哪些控件在下面,哪些控件绑定了哪些其他属性,这是查看UI是如何构建的。 并且它是可工具化的非常好的方法,热重载(Hot Reload)与Xaml及时预览(XAML Previewer),可以让你在构建时查看它,而不需要在开发时重新编译你的应用程序。 ![](https://img.tnblog.net/arcimg/hb/977c635d11604ddfbecdd6c473e5dbb9.png) ##项目列表与材料 tn2>创建一个名为`FirstApp`的Xamarin.Forms项目。 添加一张Xamarin图片到`/Resources/drawable`文件夹下面。 ![](https://img.tnblog.net/arcimg/hb/a1e9c2fa5e8b4ea4833bcc089f7f3ec8.png) ![](https://img.tnblog.net/arcimg/hb/ccaf153cff0c4c0591209785a3a46a75.png) ##修改MainPage.xaml ```xml <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FirstApp.MainPage"> <!--创建一个画布--> <Grid> <!--行占4份--> <Grid.RowDefinitions> <!-- Height 行高 --> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--列占2份--> <Grid.ColumnDefinitions> <!-- Width 列宽 --> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--添加一个图片元素--> <!-- BackgroundColor:背景颜色(深蓝色) Grid.Row:图片占的哪一行 Grid.Column:图片占的哪一列 Grid.ColumnSpan:按照列占领几个(1个或2个) --> <Image Source="" BackgroundColor="PowderBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" /> </Grid> </ContentPage> ``` ![](https://img.tnblog.net/arcimg/hb/01f4c1ea342440bd84e9c6ac2380d3ea.png) ![](https://img.tnblog.net/arcimg/hb/533d25459e6b4c66b28e40a720544ec7.png) ```xml <!--添加一个编辑器--> <!-- Placeholder:默认显示文本。 --> <Editor Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Placeholder="Enter Note Here" /> ``` ![](https://img.tnblog.net/arcimg/hb/282d23cfccfd4c199486c9ae6e4136e6.png) ```xml <!--添加两个按钮--> <!-- Text:文本内容 --> <Button Grid.Row="2" Grid.Column="0" Text="Save" /> <Button Grid.Row="2" Grid.Column="1" Text="Erase" /> <!--添加一个标签--> <!-- FontSize:字体大小 --> <Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="Cool!" FontSize="Large" /> ``` ![](https://img.tnblog.net/arcimg/hb/9688c64765094877bd2963bb96112832.png) tn2>调整行高 ```xml <!--行占4份--> <Grid.RowDefinitions> <!-- Height 行高 --> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> <RowDefinition Height=".5*"/> <RowDefinition Height="2*"/> </Grid.RowDefinitions> <!--添加图片源--> <Image Source="logo_xamarin" BackgroundColor="PowderBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" /> ``` ![](https://img.tnblog.net/arcimg/hb/f3df8f94e5eb4ea889f575a644108d9e.png)
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
170篇
linux
17篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
4篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
18篇
threejs
2篇
人物
1篇
嵌入式
3篇
python
13篇
HuggingFace
8篇
pytorch
9篇
opencv
6篇
Halcon
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术