Convoluted Ancestor / ElementName binding

[sam-wheat]

In the XAML below I need to make the bindings work for IsEqualStateTrigger and ToggleSwitch attached Command.

The XAML below actually works however my guess is that I stumbled upon something that works by chance and probably should not. I need to know how to do it right because I need to make these bindings work in another app and I cannot reproduce them. I asked this question here and I have not received an answer.

This documentation shows ElementName working without AncestorType, and this documentation showsAncestorType working without ElementName. My understanding of AncestorType is that it is an extension, whereas ElementName is native to WinUI. I understand them to be completely different and not intended to work together. Further, AncestorType claims it looks for a value stored in the Ancestor property:

The AncestorType attached property will walk the visual tree from the attached element for another element of the specified type. That value will be stored in the attached element's Ancestor property.

My guess is that the XAML below works because Ancestor is an attached property and it is inherited by child elements - but if that is the case, why is ElementName required for the binding to work? Also, In the XAML below note that the element named layoutRoot is in fact a Border element and does not have a property named "IsExpanded" or a command named PlaceSelectedCommand.

I can not find any documentation that discuses these two bindings working together. If any documentation exists, kindly provide a link.

Questions:
Why does TemplateBinding not work on the IsEqualStateTrigger?
Why does ToggleSwitch not have a Command property?
Why does this crazy binding work: Command="{Binding (ui:FrameworkElementExtensions.Ancestor).PlaceSelectedCommand, ElementName=layoutRoot, Mode=TwoWay}" but ElementName or AncestorType by itself does not work?

Working repo is here.

	<VisualStateManager.VisualStateGroups>
		<VisualStateGroup>
			<VisualState x:Name="Expanded">
				<VisualState.StateTriggers>
					<!--<triggers:IsEqualStateTrigger Value="{TemplateBinding IsExpanded}"  To="True"/>-->
					<triggers:IsEqualStateTrigger Value="{Binding (ui:FrameworkElementExtensions.Ancestor).IsExpanded, ElementName=layoutRoot, Mode=OneWay}"  To="True"/>
				</VisualState.StateTriggers>
				<VisualState.Setters>
					<Setter Target="b1.Content" Value="Expanded"/>
				</VisualState.Setters>
			</VisualState>
			<VisualState x:Name="NotExpanded">
				<VisualState.StateTriggers>
					<!--<triggers:IsEqualStateTrigger Value="{TemplateBinding IsExpanded}" To="False"/>-->
					<triggers:IsEqualStateTrigger Value="{Binding (ui:FrameworkElementExtensions.Ancestor).IsExpanded, ElementName=layoutRoot, Mode=OneWay}"  To="False"/>
				</VisualState.StateTriggers>
				<VisualState.Setters>
					<Setter Target="b1.Content" Value="Not Expanded"/>
				</VisualState.Setters>
			</VisualState>
		</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	
	
	<ItemsControl ItemsSource="{TemplateBinding Places}">
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<ToggleSwitch 
						OnContent="{Binding Name}" OffContent="{Binding Name}" 
						IsOn="{Binding IsSelected, Mode=TwoWay}">
					<Interactivity:Interaction.Behaviors>
						<Interactions:EventTriggerBehavior EventName="Toggled" >
							<Interactions:InvokeCommandAction 
								Command="{Binding (ui:FrameworkElementExtensions.Ancestor).PlaceSelectedCommand,
								ElementName=layoutRoot, Mode=TwoWay}"
								CommandParameter="{Binding}">
							</Interactions:InvokeCommandAction>
						</Interactions:EventTriggerBehavior>
					</Interactivity:Interaction.Behaviors>
				</ToggleSwitch>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>

[kmgallahan]

Why does ToggleSwitch not have a Command property?

The Command property is defined on Microsoft.UI.Xaml.Controls.Primitives.ButtonBase. Whoever made the ToggleSwitch control made it derive directly from Microsoft.UI.Xaml.Controls.Control. 🤷‍♂️

Why does this crazy binding work: Command="{Binding (ui:FrameworkElementExtensions.Ancestor).PlaceSelectedCommand, ElementName=layoutRoot, Mode=TwoWay}" but ElementName or AncestorType by itself does not work?
why is ElementName required for the binding to work?

Unclear what alternative syntax you are referring to.

• ElementName = the xaml element to use the Binding Path from
• layoutRoot = your Border
• (ui:FrameworkElementExtensions.Ancestor) = the Binding Path = asks your Border for its Ancestor attached property
• Border's Ancestor property = your CustomControl1 instance, as you set via ui:FrameworkElementExtensions.AncestorType="local:CustomControl1"
• .PlaceSelectedCommand is then the Command from your CustomControl1 instance

Why does TemplateBinding not work on the IsEqualStateTrigger?

Reported before as TemplateBinding not working in a visual state setter #7779

Possibly related to TemplateBinding not working with ICommand #7003 #4546

Possibly related to x:bind not working inside a visual state setter #2508

SO: https://stackoverflow.com/questions/73561708/can-i-use-templatebinding-in-a-visualstate-setter

@MikeHillberg @codendone

[kmgallahan]

@bpulliam

On the recent Community Call you showed enthusiasm for working on open issues.

I'm not sure how closely related these TemplateBinding and x:bind issues are, but if someone were to dive into the binding code it would probably be more efficient to try and resolve more than one at a time.

Also, TemplateBinding not working with ICommand appears to be a regression from UWP: #4546 (comment)

It is used 7 times in Generic.xaml. So those are either currently broken (I haven't tested), or they work which indicates it is a C++ vs C# issue as mentioned here: #4546 (comment)

I didn't spot any instances of TemplateBinding use in visual state setters in Generic.xaml.

[kmgallahan]

@sam-wheat

Why does TemplateBinding not work on the IsEqualStateTrigger?

Strictly regarding its use in your code at the top, I believe the problem is one or both of these:

• TemplateBinding is setup at compile time before the Ancestor property has been attached inside a control template (whereas Binding is setup at runtime)
• TemplateBinding can only be used in the visual tree, so it does not work inside visual state triggers

TemplateBinding is as optimized version of Binding that doesn't have all the same features, including no built-in converters. This may also explain why it doesn't work with ICommand #4546 (comment) (different namespaces requiring a converter).