Bind command to hub section header click in Windows 10 Universal App - mvvm

Question

Suppose I got a hub page (HubPageView) and a couple of hub sections inside that page e.g.
<Hub Header="{Binding AppName}">
<HubSection IsHeaderInteractive="True"
Header="Section 1">
...
</HubSection>
...
</Hub>
When rendered the above shows as "Section 1 See more" and I take it that if the user taps "See more" the app is supposed to navigate to, say, Section1PageView.
I'm trying hard to follow the MVVM pattern so I'd like to bind the tap to a command (NavigateToSection1Command) instead of using the ItemClick event - how do I accomplish this?

Answer 1

The Hub class has a SectionHeaderClick event to which you could attach an EventTriggerBehavior and bind your Command to it.
<Page xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
<Hub Header="{Binding AppName}">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SectionHeaderClick">
<core:InvokeCommandAction Command="{Binding NavigateToSectionCommand}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Hub>
</Page>
The SectionHeaderClick is the event that MS put for us to interact with the Hub Header, but the way it works will make MVVM's life harder. You see, that event passes the Section object that was clicked as an argument. You will lose that by attaching a command, as there is no built in way to pass an event argument to a command and there will be no way to tell which section the command was fired from.
That being said, I think that placing a Button or TextBlock at the HubSection's Header and attaching a EventTriggerBehavior to it`s Click event would better suit your needs.
Ps: You will have to add a Reference to the Behaviors SDK. Go to Add References > Universal Windows > Extensions, then check Behaviors SDK (XAML)