How To Bind to a Control
With Avalonia UI, as well as binding to a data context you can also bind one control directly to another.
Note that this technique does not use a data context at all. When you do this, you are binding directly to another control itself.
Binding to a Named Control
If you want to bind to a property on another named control, you can use the control name prefixed by a #
character.
<TextBox Name="other">
<!-- Binds to the Text property of the "other" control -->
<TextBlock Text="{Binding #other.Text}"/>
This is the equivalent to the long-form binding that will be familiar to WPF and UWP users:
<TextBox Name="other">
<TextBlock Text="{Binding Text, ElementName=other}"/>
Avalonia UI supports both syntaxes.
Binding to an Ancestor
You can bind to the (logical control tree) parent of the target using the $parent
syntax:
<Border Tag="Hello World!">
<TextBlock Text="{Binding $parent.Tag}"/>
</Border>
Or to any level of ancestor by using an index with the $parent
syntax:
<Border Tag="Hello World!">
<Border>
<TextBlock Text="{Binding $parent[1].Tag}"/>
</Border>
</Border>
The index is zero based so $parent[0]
is equivalent to $parent
.
You can also bind to the closest ancestor of a given type, like this:
<Border Tag="Hello World!">
<Decorator>
<TextBlock Text="{Binding $parent[Border].Tag}"/>
</Decorator>
</Border>
Finally, you can combine the index and the type:
<Border Tag="Hello World!">
<Border>
<Decorator>
<TextBlock Text="{Binding $parent[Border;1].Tag}"/>
</Decorator>
</Border>
</Border>
If you need to include a XAML namespace in the ancestor type, you separate the namespace and class using a colon, like this:
<local:MyControl Tag="Hello World!">
<Decorator>
<TextBlock Text="{Binding $parent[local:MyControl].Tag}"/>
</Decorator>
</local:MyControl>
Avalonia UI also supports WPF/UWP's RelativeSource
syntax which does something similar, but is not the same. RelativeSource
works on the visual tree whereas the syntax given here works on the logical tree.