如何将命令绑定到 StackPanel 或 Grid 点击事件？

Question

我已经看到一些关于 WP8 或其他的答案，但似乎 WP8.1 中没有触发器（或者我遗漏了什么？）

我有一个从代码绑定的数据模板（它是一个集线器数据模板，我混合了静态和动态集线器部分，因此需要从代码中设置此数据模板）。

此数据模板在单独的 xaml 文件中定义，它包括一个列表框（或列表视图）以及为项目定义的另一个数据模板。

我需要在项目的点击或列表框选择更改（或等效的东西）上绑定命令。但是，模板中定义的点击事件没有被调用，因此我想到了在 UI 元素上绑定命令，但是这些似乎不支持命令和交互触发器。

关于如何处理的任何线索？ :)

在下面的示例中，我没有收到事件 Item_Tapped 或 ListBox_SelectionChanged，无论如何我更愿意将其中一个绑定到视图模型中的命令。

<DataTemplate x:Key="HubSectionTemplate">
    <Grid>
        <ListBox ItemsSource="{Binding MyNodes}"
            SelectionChanged="ListBox_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="64" Tapped="Item_Tapped" >
                        <TextBlock Text="{Binding MyText}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</DataTemplate>

这是从代码中使用它的方式：

HubSection hs = new HubSection()
{
    ContentTemplate = Application.Current.Resources[HUBSECTION_TEMPLATE] as DataTemplate,
    DataContext = model,
    Tag = model.UniqueId,
};
Hub.Sections.Insert(firstSectIdx + 1, hs);


public class Model
{
    public Guid UniqueId {get;set;}
    public List<ItemModel> MyNodes {get;set;}
}

public class ItemModel
{
    public string MyText {get;set;}
}

PS：ItemModel 是在另一个程序集中定义的，因此不应编辑（如果可能，该命令应在 Model 类中）

--- 编辑 ---

为了简化问题，我使用以下模型：

public class Model
{
    public Guid UniqueId {get;set;}
    public List<ItemModel> MyNodes {get;set;}
    public ICommand MyCommand {get;set;}
}

public class ItemModel
{
    Model _Model;
    public ItemModel(Model m) {_Model = m; }
    public string MyText {get;set;}
    public ICommand MyCommand { get { return _Model.MyCommand; }}
}

而我的（临时）解决方案是在 itemtemplate 中使用一个按钮：

    <ListView.ItemTemplate>
        <DataTemplate>
            <Button HorizontalAlignment="Stretch"  Command="{Binding TapCommand}" Height="64">
                <TextBlock Text="{Binding MyText}" />
            </Button>
        </DataTemplate>
    </ListView.ItemTemplate>

Answer 1

您可以使用行为 SDK。
在 Visual Studio 中，转到“工具 -> 扩展和更新”并安装行为 SDK (XAML)。然后使用添加引用对话框在您的项目中引用它。
之后将以下命名空间添加到您的页面：

xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"

现在您可以使用以下语法注册事件，例如点击堆栈面板：

<DataTemplate>
    <StackPanel Orientation="Horizontal" Height="64">
        <TextBlock Text="{Binding MyText}" />
        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Tapped">
                <core:InvokeCommandAction  Command="{Binding YourCommand}"/>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </StackPanel>
</DataTemplate>

但是，此代码仅在您的 Command 在您的 ItemModel 类中定义时才有效。如果你想绑定到父元素Command，你可以试试这样的（未测试）：

{Binding ElementName=LayoutRoot, Path=DataContext.ParentCommand}

但我更希望在您的 ItemModel 类上使用命令


编辑： 没有 Behaviors SDK 的解决方案：
如果您使用ListView（或从ListViewBase 继承的东西），您可以使用ItemClick 事件。为了使其更可重用和对 Mvvm 更友好，您可以像这样实现 DependencyProperty：

public static class ItemClickCommand
{
    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.RegisterAttached("Command", typeof(ICommand),
        typeof(ItemClickCommand), new PropertyMetadata(null, OnCommandPropertyChanged));

    public static void SetCommand(DependencyObject d, ICommand value)
    {
        d.SetValue(CommandProperty, value);
    }

    public static ICommand GetCommand(DependencyObject d)
    {
        return (ICommand)d.GetValue(CommandProperty);
    }

    private static void OnCommandPropertyChanged(DependencyObject d,
        DependencyPropertyChangedEventArgs e)
    {
        var control = d as ListViewBase;
        if (control != null)
        {
            control.ItemClick += OnItemClick;                
        }

    }

    private static void OnItemClick(object sender, ItemClickEventArgs e)
    {
        var control = sender as ListViewBase;
        var command = GetCommand(control);

        if (command != null && command.CanExecute(e.ClickedItem))
        {
            command.Execute(e.ClickedItem);
        }
    }
}

那么您的 ListView 将如下所示：

<ListView 
    IsItemClickEnabled="True" 
    helpers:ItemClickCommand.Command="{Binding YourCommand}"
    ItemsSource="{Binding MyNodes}"
    ItemTemplate="{StaticResource YourDataTemplate}" />

在这种情况下，您的子项作为参数传递给您的命令，因此它还应该解决您在父模型中定义的命令的问题。