Interaction.Triggers for ListBoxItem

Question

如何将Interaction.Triggers设置为整个ListBoxItem？我见过这个问题，但答案不是使用interactons。有可能吗？

目前我有这样的ListBox：

<ListBox ItemsSource="{Binding CharactersList}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                <Setter Property="Focusable" Value="False" />
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" BorderBrush="Red">
                    <TextBlock x:Name="CharacterTextBlock" Text="{Binding}" Width="20" Height="20" TextAlignment="Center">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseUp">
                            <i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.CharacterClick}" 
                                                   CommandParameter="{Binding}" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="TouchUp">
                            <i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.CharacterClick}" 
                                                   CommandParameter="{Binding}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    </TextBlock>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
</ListBox>

看起来是这样的：

​

我想为特定的项目触发事件，即使我点击红色Border之外，这是目前没有发生的。

Answer 1

最简单的方法是处理视图代码后面的ListBoxItem事件，并从那里调用命令：

private void ListBoxItem_MouseUp(object sender, MouseButtonEventArgs e) => InvokeCommand(sender);

private void ListBoxItem_TouchUp(object sender, TouchEventArgs e) => InvokeCommand(sender);

private void InvokeCommand(object sender)
{
    ListBoxItem lbi = sender as ListBoxItem;
    var vm = DataContext as YourViewModel;
    if (vm != null)
        vm.CharacterClick.Execute(lbi.DataContext);
}

XAML:

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Setter Property="Focusable" Value="False" />
        <EventSetter Event="MouseUp" Handler="ListBoxItem_MouseUp" />
        <EventSetter Event="TouchUp" Handler="ListBoxItem_TouchUp" />
    </Style>
</ListBox.ItemContainerStyle>

不，这不会破坏MVVM模式，因为您仍然从完全相同的视图调用完全相同的命令。

另一种选择是使用封装上述功能并设置附加属性的附随行为，如下所示：

<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="local:YourBehavior.MouseUpCommmand" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.CharacterClick}" />
    <Setter Property="local:YourBehavior.MouseUpCommmandParameter" Value="{Binding}" />
    <!-- ... -->
</Style>

如果您打算在几个不同的视图中重用此功能，那么这样做可能是有用的。否则，您可以使用代码隐藏选项。MVVM并不是要从视图中删除代码。这是关于关注点的分离，仅仅因为您实际上可以在XAML中做一些事情，这并不意味着您总是应该这样做。