mvvm - 在 Windows 10 通用应用程序中将命令绑定(bind)到集线器部分标题单击

Question

假设我有一个中心页面 (HubPageView) 和该页面内的几个中心部分，例如

<Hub Header="{Binding AppName}">
   <HubSection IsHeaderInteractive="True" 
               Header="Section 1">
      ...
   </HubSection>
   ...
</Hub>

当呈现上述内容时，显示为“Section 1 See more”，我认为如果用户点击“See more”，应用程序应该导航到 Section1PageView。

我正在努力遵循 MVVM 模式，所以我想将点击绑定(bind)到命令 (NavigateToSection1Command) 而不是使用 ItemClick 事件 - 我该如何完成？

Answer 1

Hub类有 SectionHeaderClick您可以附加一个 EventTriggerBehavior 并将您的 Command 绑定(bind)到它的事件。

<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>

SectionHeaderClick 是 MS 为我们设置的与 Hub Header 交互的事件，但它的工作方式将使 MVVM 的生活更加艰难。您会看到，该事件将被单击的 Section 对象作为参数传递。通过附加命令，您将失去它，因为没有内置方法可以将事件参数传递给命令，并且无法判断命令是从哪个部分触发的。
话虽如此，我认为在 HubSection 的 Header 中放置一个 Button 或 TextBlock 并将 EventTriggerBehavior 附加到它的 Click 事件会更好地满足您的需求。

Ps:您必须添加对 Behaviors SDK 的引用。转到添加引用 > 通用 Windows > 扩展，然后检查行为 SDK (XAML)