UX markup语言之属性及梆定

这个教程详述了在Fuse的UX Markup语言中的属性properties和梆定bindings是如何运作的。

设置属性Setting properties

公共属性
在任何Uno类中都有getset访问器,能在UX中作为一个XML属性简单地指定名称和值这里所用到的就是公共属性。
对于Ux文件中的元素来说,不同的元素有不同的公共属性,详情需要查看官方的《Reference章节》,里边列出了Fuse每一个元素的每一个可用属性。

给属性赋值时,这值一般有下列几种类型的值:

纯量(标量)Scalars
Scalars (integers, floats, doubles) can be specified directly using a period (.) as decimal separator.

<Button Width="100" Height="30.5" />

注意:no f suffix for float is required in UX.

向量Vectors
Vectors are specified as comma-separated lists. For example, specifying a float4 margin vector (left, top, right, bottom) can be done as follows:

<Panel Margin="10, 10, 10, 10" />

Or more compactly, if when all components are the same:

<Panel Margin="10" />

字符串Strings
String properties can be set directly with their literal value

<Button Text="Hello!" />

For certain classes, like Text, content strings can also be given as a literal inside the tag:

<Text>Hello!</Text>

Consult each class' documentation for what this means.

枚举属性Enums

Enum properties can be set using the literal name of the enum values:

<Button Alignment="TopLeft" />

对象名称Object Names

使用ux:Name属性,你可以给任何UX对象设定一个名称,然后这个对象就变成依靠在Uno类中产生的内部internal字段 field。

<Button ux:Name="button1" />

上面的例子中,将变为你的程序类中的如下代码This becomes in your class body:

internal Button button1;

然后在你的初始化方法method:InitializeUX method:

button1 = new Button();

一旦对象有了一个名称,你就可以在Uno代码和UX文档中用此名称来引用他。

子元素集(自动-梆定)Child elements (Auto-bindings)

当你放置一个XML元素到另一个里的时候,这意味着你想要一个元素作为另外一个的子元素来使用,这里使用一个UX机制来实现,称为 自动-梆定auto-binding

在此例中,ButtonDropShadow两元素被放置于Paner布局元素的内部。
<pre>
<Panel>
<Button />
<DropShadow />
</Panel>
</pre>

按钮元素Button将自动梆定到和Panel布局元素上面相匹配、相一致的属性,在Panel他的容器中,也就是他的子元素Children集。

这里的DropShadow,因为他是一个效果Effect,所以将会自动梆定auto-bound到效果集(Effects),而不是子元素集。

这意味着上述代码大致上等同于下面的代码:
<pre>
var temp1 = new Panel();
var temp2 = new Button();
var temp3 = new DropShadow();
temp1.Children.Add(temp2);
temp1.Effects.Add(temp3);
</pre>

自动梆定规则Auto-binding rules

自动梆定通过下面的规则来执行:

  • 父元素种类的属性来自Uno.UX命名空间,以 [UXPrimary][UXComponents][UXContent]等属性来修饰的父元素种类。
  • 系统基于元素身身的这些属性来检索与子元素的类型相兼容的IList<>或引用类型的属性。相兼容的意思是子元素的种类能被转换为列表元素的种类或是引用属性的种类list element type or reference property type,通过使用using an upcast 或 interface cast的方式。在上面的例子中,ButtonElement是相匹配的,所以他是元素类型,属于子Children列表。
  • 如果多项属性集匹配这些情况,会产生一个编译时间错误。

禁用自动梆定Disabling auto-binding

元素的自动梆定Auto-binding能被禁用,只要设定ux:AutoBind="false"的属性。这意味着子元素将不会被添加到任何父元素的列表或属性中去,另外一点,如果明确地指定ux:Binding也意味着ux:AutoBind="false"

明确梆定Explicit Bindings (ux:Binding)

当放置一个XML元素作为另一外元素的子元素的时候,你可以指定它是何种属性,默认状态时,他被设想为使用ux:Binding属性来梆定。

下例中,Rectangle 被梆定到按钮button的Apperance属性上,所以这次不是梆定到子集Children collection了。对于自动梆定auto-binding来说,这些子集还可能有别的方式或一些默认设置。

<pre>
<Button>
<Rectangle ux:Binding="Appearance" Fill="Red" />
</Button>
</pre>

参考引用References

你可以在你的UX文件中引用任何已命名的对象,在任何列表list或是参考属性reference property。
Ex:
<pre>
<Panel>
<Page ux:Name="Page1" />
<Page ux:Name="Page2" />
<DirectNavigation />
</Panel>

<Button>
<Tapped>
<NavigateTo Target="Panel1" />
</Tapped>
</Button>
</pre>

你也可以引用全局资源,使用他们的全局资源短名称global resource alias,具体可参看https://www.fusetools.com/learn/fuser的Global resources章节

属性参考引用Property references

接收Uno.UX.Property<T>的属性,能被设置,使用路径到属性的方式:

Ex:

<Change Target="button1.TextColor" Value="Red" />

他也可以直接引用属性,像下面这样:

<Change button1.TextColor="Red" />

英文原文:
https://www.fusetools.com/learn/guides/ux-markup-properties-and-bindings

Tag:Fuse, Fuseapp, Fusetools, native app
发布时间:2016年05月12日
博客被黑,挪窝简书安家……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容