How to bind Trigger Value property to control property

[sam-wheat]

In this example repo I have a custom control with a button. The DataContext of the button is set to the control. This appears to work because the button Command works correctly:

<Button ui:FrameworkElementExtensions.AncestorType="local:CustomControl1" x:Name="b1"
    DataContext="{Binding (ui:FrameworkElementExtensions.Ancestor), RelativeSource={RelativeSource Self}}"
    Command="{Binding ToggleNodeExpansionCommand}" CommandParameter="1" 

The problem is with the VisualStateManager - does it inherit it's DataContext from the button? In any case, I need to bind the Value property of the trigger to the IsExpanded property of the control:

<triggers:IsEqualStateTrigger Value="{Binding (ui:FrameworkElementExtensions.Ancestor).IsExpanded, RelativeSource={RelativeSource Self}, Mode=OneWay}"  To="True"/>

[michael-hawker]

@sam-wheat I don't see this code you've shared in your repo? Where is the VSM in relation to the button?

What is the underlying scenario you're trying to accomplish?

[sam-wheat]

I think I'm having the same problem with ToggleSwitch. The two ItemsControls are the mostly the same, the difference being one
shows CheckBox which has a Command property, the other shows ToggleSwitch which requires use of EventTriggerBehavior. I did all this just to prove to myself that all the bindings are all working except for the ToggleSwitch command. This code is in Themes/Generic.xaml.

		        <!-- Checkbox command works -->
                        <ItemsControl ui:FrameworkElementExtensions.AncestorType="local:CustomControl1"
                                      ItemsSource="{Binding (ui:FrameworkElementExtensions.Ancestor).Places, RelativeSource={RelativeSource Self}}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <CheckBox ui:FrameworkElementExtensions.AncestorType="local:CustomControl1"
                                            Content="{Binding Name}" 
                                            IsChecked="{Binding IsSelected, Mode=TwoWay}" 
                                            Command="{Binding (ui:FrameworkElementExtensions.Ancestor).PlaceSelectedCommand, 
                                            RelativeSource={RelativeSource Self}}" 
                                            CommandParameter="{Binding}"/>

                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                            
                        </ItemsControl>



                        <!-- ToggleSwitch command does not work -->
                        <ItemsControl ui:FrameworkElementExtensions.AncestorType="local:CustomControl1"
                                      ItemsSource="{Binding (ui:FrameworkElementExtensions.Ancestor).Places, RelativeSource={RelativeSource Self}}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <ToggleSwitch ui:FrameworkElementExtensions.AncestorType="local:CustomControl1"
                                            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, RelativeSource={RelativeSource Self}}"
                                                    CommandParameter="{Binding}">
                                                </Interactions:InvokeCommandAction>
                                            </Interactions:EventTriggerBehavior>
                                        </Interactivity:Interaction.Behaviors>
                                    </ToggleSwitch>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>

                        </ItemsControl>

[michael-hawker]

You're asking a lot of different questions here and have a lot of over complication. You don't need to use the Ancestor helper everywhere, only in the DataTemplate to reach outside of it.

You shouldn't have to set the DataContext and should be able to get Places from a TemplateBinding.

The MVVM Pattern is meant for applications not templated controls. If this is something you're making to share with others it should enable the MVVM pattern by using DependencyProperties and such, but shouldn't be using it.

I'd recommend looking at the source for some of the components we have in the Toolkit here as examples.

[sam-wheat]

Hi Michael, I did not mean to ask different questions - my thought was that there are two manifestations of the same problem and it may yet turn out that that is in fact the case.

Thank you for pointing me to TemplateBinding. It does simplify things greatly.

I moved the VSM to the root control and it appears to have changed nothing.

Regarding MVVM and DataContext - I was grasping at straws trying everything I could. That has been cleaned up.

As for examples, note I copied the VSM example verbatum that demonsrates IsEqualStateTrigger. Search the toolkit repo for "<triggers:" you will find that only ElementName binding is shown.

At this point the problem with VSM remains. I hope I have demonstrated that I have made a good faith effort to resolve this on my own. Obviously I'm still doing something wrong but I don't know what I don't know. Your responses have been very helpful. Thank you for your comments.

[michael-hawker]

I'm still not sure if I follow the scenario. But if you're making a control and it has its own IsExpanded property, you can just manually transition to whatever states you want when the property changes in code-behind.

[sam-wheat]

Please take a moment to run the code. The project is a mock up of a larger project that I am working on so by itself it has no purpose.

When clicked the event handler of the button should fire and the content should change based on the IsExpanded property. Neither of those happen.

Also, the ToggleSwitch Toggled event does not fire. Note however that the checkboxes work.

Thank you.

[michael-hawker]

@sam-wheat your VSM can't just live anywhere it has to be in the root of a control, I would suspect that's the first issue? See microsoft/microsoft-ui-xaml#5576