Hub binding not working in Template10

Question

I'm trying to put a hub in a page, but it seems that Binding is not functioning correct. I used the Template10 Hamburger sample and tried to put a hub in the main page. As I test I just encapsulate the existing stackpanel inside a hub section but it seems to break the binding on the button click event.

Error when building:

Object reference not set to an instance of an object

<HubSection>
    <DataTemplate>
        <StackPanel Grid.Row="1" VerticalAlignment="Top" Orientation="Horizontal"
        Padding="12,8,0,0">

            <controls:Resizer>
                <TextBox Width="200" MinWidth="200" MinHeight="60"
             Margin="0" Header="Parameter to pass"
             Text="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             TextWrapping="Wrap">
                    <Interactivity:Interaction.Behaviors>
                        <Behaviors:TextBoxEnterKeyBehavior>
                            <Core:CallMethodAction MethodName="GotoDetailsPage" TargetObject="{Binding}" />
                        </Behaviors:TextBoxEnterKeyBehavior>
                        <Core:EventTriggerBehavior>
                            <Behaviors:FocusAction />
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </TextBox>
            </controls:Resizer>
            <Button Margin="12,0" VerticalAlignment="Bottom"
        Click="{x:Bind ViewModel.GotoDetailsPage}" Content="Submit" />
        </StackPanel>
    </DataTemplate>
</HubSection>

Answer 1

I can certainly explain the problem to you. Because you are using the hub control and because the hub control uses hub sections and because the hub section, unlike almost any other control in your toolbox, uses data templates to draw its content, the data context of every element inside the data template is no longer the data context of the outside page. That is to say, your binding fails because you are binding to a new class that does not have the method you need.

As for a solution, you could have done this:

<Core:CallMethodAction MethodName="GotoDetailsPage" TargetObject="{Binding ElementName=ViewModel}" />

That syntax would have brought your context back to the page's view model. But your solution seems to work for you. I would stick with what works.

Best of luck.