这个教程详述了在Fuse的UX Markup语言中的属性properties和梆定bindings是如何运作的。
设置属性Setting properties
公共属性
在任何Uno类中都有get
和set
访问器,能在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。
在此例中,Button
和DropShadow
两元素被放置于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的方式。在上面的例子中,Button
与Element
是相匹配的,所以他是元素类型,属于子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日
博客被黑,挪窝简书安家……