Alternative to ElementName in x:Bind with DataTemplates

Question

When using traditional {Binding} syntax you could specify element name to point to a specific control on the page, and be able to access its properties. For example if the page is named page you could do:

{Binding ElementName=Page, Path=Name}

With the {x:Bind} syntax it says

With x:Bind, you do not need to use ElementName=xxx as part of the binding expression. With x:Bind, you can use the name of the element as the first part of the path for the binding because named elements become fields within the page or user control that represents the root binding source.

So for the example above in {x:Bind} would be

{x:Bind page.Name}

Which works fine, until it is inside a data template (for example a ListView's ItemTemplate). In which case it no longer works as it is looking for Page on the data type specified which leads to the following error (assuming my data type is customer):

XamlCompiler error WMC1110: Invalid binding path 'Page.Name' : Property 'Page' can't be found on type 'Customer'

What is the solution to use {x:Bind} syntax with datatemplates and access controls outside the data template?

Example code is available here (note specific commit)

Volitant

Answer 1

As far as I know at this point in time there is no way to directly bind to a property of a control using the x:bind method as it does not support the element name inside of its binding definition.

That does not mean you cant bind to a control inside a dataTemplate you can still do something like this to access controls but you just aren't able to use the compiled binding x:Bind syntax.

 <DataTemplate x:DataType="local:Customer">
     <StackPanel Orientation="Vertical">
         <Button Content="{Binding Name, ElementName=page}" />
         <TextBlock Text="{x:Bind Title}" />
     </StackPanel>        
 </DataTemplate>

The reason for the error you are getting is due to the way data templates parent their datasource. The x:Bind binding cannot reference a control object and your Customer type does Page.Name property or path. As shown above the only real way of accessing user control properties outside of your control only using XAML is to resort back to the standard binding mechanism.

I hope this answers your question.

Mantis

Answer 2

This is an updated answer to davemsdevsa's one . I don't know for sure when this was made possible, but you can now directly use the name of an element in the property path in UWP or WinUI3, like this:

<DataTemplate x:DataType="local:Customer">
     <StackPanel Orientation="Vertical">
         <!-- if page is an element with x:Name="page" -->
         <Button Content="{x:Bind page.Name}" />
         <TextBlock Text="{x:Bind Title}" />
     </StackPanel>        
 </DataTemplate>

I quote from the Property path resolution doc:

With x:Bind, you do not need to use ElementName=xxx as part of the binding expression. Instead, you can use the name of the element as the first part of the path for the binding because named elements become fields within the page or user control that represents the root binding source.

Patrol

Hi, it doesn't seem to be working. It complains about the lack of page definition in Customer. – Offer

@ShimmyWeitzhandler - if depends on your overall code & xaml context. You should post another question with your exact settings. – Patrol