使用 MouseDown 和 MouseEnter 的 EventToCommand

Question

我想用新图像、pixelpainter / mapeditor 样式替换初始化 canvas 上的单个图像。目前我设法替换了 MouseEnter 上的图像，但这不是我的目标。我只想在用户在图像上方按下鼠标按钮（可能使用 MouseEnter）时更改图像。

<DataTemplate>
                            <Image Source="{Binding MapTileImage}" Stretch="Fill" Width="{Binding Width}" Height="{Binding Height}">
                               <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="MouseEnter">
                                        <command:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.ChangeTilesCommand}" CommandParameter="{Binding .}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Image>
</DataTemplate>

此代码仅适用于事件 "MouseEnter"。 MouseDown 甚至 PreviewMouseDown 以及其他事件在这里都不起作用。哪种方式最干净地解决这个问题？我想保留我的 EventToCommand 和 RelayCommand。

在我的 MainViewModel 中，我所做的就是：

private RelayCommand<BitmapModel> _changeTileCommand;
        public RelayCommand<BitmapModel> ChangeTilesCommand {
            get { return _changeTileCommand ?? (_changeTileCommand = new RelayCommand<BitmapModel>(UpdateTile)); }
        }

和

public void UpdateTile(BitmapModel tile) {
           // BitmapModel tile = drag.TileParam;
            if (tile == null) return;
            if (SelectedMapTile == null) return;

            tile.MapTileImage = SelectedMapTile.MapTileImage;
        }

Answer 1

好吧，您可以使用一个按钮来做一个非常简单的解决方法。只需将图像插入按钮并使用 Command 和 CommandParameter 属性。但这只会触发 LeftMouseButtonUp 事件！

<Button Margin="100" BorderThickness="0" 
        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Command="..." 
        CommandParameter="...">
    <Image Source="..." Stretch="Fill" 
           Width="{Binding Width}" 
           Height="{Binding Height}" />
</Button>

然后你只需要稍微调整一下按钮的外观，因为按钮应该看起来像 "nothing"。我通过删除边框并通过 Style 属性将其设置为平面样式来完成此操作。也许 this Question 有助于更好地设计按钮样式。

Answer 2

对于 5 年来在这个线程上绊倒的所有灵魂，我是这样解决的：

<ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding MapTileImage}" Stretch="Fill" Width="{Binding Width}" Height="{Binding Height}">                               

                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseEnter">
                                    <command:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.ChangeTilesCommand}" CommandParameter="{Binding .}" />
                                </i:EventTrigger>
                                <i:EventTrigger EventName="MouseLeftButtonDown">
                                    <command:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.DrawingCommand}" PassEventArgsToCommand="True"/>
                                    <command:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.ChangeTilesCommand}" CommandParameter="{Binding .}"/>
                                </i:EventTrigger>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <command:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.DrawingCommand}" PassEventArgsToCommand="True"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Image>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

结合

    private RelayCommand<BitmapModel> _changeTileCommand;
        public RelayCommand<BitmapModel> ChangeTilesCommand {
            get { return _changeTileCommand ?? (_changeTileCommand = new RelayCommand<BitmapModel>(UpdateTile, CanDraw)); }
        }

private RelayCommand<MouseEventArgs> _drawingCommand;
public RelayCommand<MouseEventArgs> DrawingCommand {
            get { return _drawingCommand ?? (_drawingCommand = new RelayCommand<MouseEventArgs>(MouseDown)); }
}


void MouseDown(MouseEventArgs mouse) {
            if (mouse.LeftButton == MouseButtonState.Pressed) _mouseDown = true;
            else if (mouse.LeftButton == MouseButtonState.Released) _mouseDown = false;
}

bool CanDraw(BitmapModel tile) {
            return _mouseDown;
}

<Image.InputBinding> 应避免与事件结合使用，因为它可能会像我一样破坏事情。

使用 MouseDown 和 MouseEnter 的 EventToCommand

EventToCommand with MouseDown and MouseEnter

c#

wpf

mvvm

eventtocommand