从 XAML 中的单击事件中删除 ViewModel 中定义的集合中的项

本文关键字：定义 集合 ViewModel 事件 XAML 单击 删除 | 更新日期: 2023-09-27 18:36:03

我有一个 ItemsControl，其中填充了在 DataTemplate 中定义并放置在画布上的项。我希望能够在画布上的这些项目之一上使用右键单击事件，以将其从包含集合中删除，该集合位于我的 ViewModel 中。我一直在尝试与MVVM Light的EventToCommand合作，以找出一种方法，但到目前为止，我什么也没想出来。我不知道还能尝试什么，所以我来SO寻求帮助。任何建议将不胜感激。

<DataTemplate DataType="{x:Type model:Player}">
        <Canvas>               
            <Grid Canvas.Left="{Binding Location.X}"
                  Canvas.Top="{Binding Location.Y}"
                  MouseLeftButtonDown="Grid_MouseLeftButtonDown"
                  MouseLeftButtonUp="Grid_MouseLeftButtonUp"
                  MouseMove="Grid_MouseMove">
                <Grid.LayoutTransform>
                    <RotateTransform Angle="-90" />
                </Grid.LayoutTransform>
                <Ellipse Width="12"
                         Height="12" 
                         Fill="{Binding PrimaryColor}" />
                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           FontSize="6"
                           FontWeight="Bold"
                           Foreground="Black"
                           Text="{Binding Position.Abbreviation}" />
            </Grid>
        </Canvas>
    </DataTemplate>
<Canvas x:Name="myCanvas"
        Width="1440"
        Height="640"
        AllowDrop="True"
        Background="Green"
        Focusable="True">
    <ContentPresenter Content="{Binding Field}" />
    <ItemsControl ItemsSource="{Binding Team.Players}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas AllowDrop="True" Background="Transparent" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Canvas>

从 XAML 中的单击事件中删除 ViewModel 中定义的集合中的项

您可以使用

Remove MenuItem 进行ContextMenu。然后你可以在你的ViewModel上有Command RemoveCommand。您可以将MenuItem命令绑定到虚拟机命令，如下所示，并在CommandParameter中发送所选项目。在命令处理程序中，可以从集合中删除该项。

<DataTemplate DataType="{x:Type model:Player}">
    <Canvas>               
        <Grid Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}} Canvas.Left="{Binding Location.X}"
              Canvas.Top="{Binding Location.Y}"
              MouseLeftButtonDown="Grid_MouseLeftButtonDown"
              MouseLeftButtonUp="Grid_MouseLeftButtonUp"
              MouseMove="Grid_MouseMove">
            <Grid.ContextMenu>
                <ContextMenu>
                        <MenuItem Header="Remove" 
                         Command="{Binding PlacementTarget.Tag.RemoveCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
                         CommandParameter="{Binding PlacementTarget.DataContext, 
          RelativeSource={RelativeSource FindAncestor, 
          AncestorType={x:Type ContextMenu}}}"/>
                    </ContextMenu>
            </Grid.ContextMenu>
            <Grid.LayoutTransform>
                <RotateTransform Angle="-90" />
            </Grid.LayoutTransform>
            <Ellipse Width="12"
                     Height="12" 
                     Fill="{Binding PrimaryColor}" />
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="6"
                       FontWeight="Bold"
                       Foreground="Black"
                       Text="{Binding Position.Abbreviation}" />
        </Grid>
    </Canvas>
</DataTemplate>
相关文章：