使用 MVVM 使用 WPF 裁剪图像答案

【问题标题】：Cropping image with WPF using MVVM使用 MVVM 使用 WPF 裁剪图像
【发布时间】：2015-02-28 20:34:51
【问题描述】：

http://www.codeproject.com/Articles/30725/Cropping-Images

这篇文章解释了如何使用后面的代码来裁剪图像，但我想使用 View 模型和命令来裁剪图像。这可以实现吗？

我不确定如何将 (object sender, MouseEventArgs e) 发送到命令。

【问题讨论】：

在您的视图中添加Button 并将ViewModel Command 绑定到它并将此图像作为Command Parameter 传递...
@AmolBavannavar 但我如何传递鼠标事件？

【解决方案1】：

回答这个问题可能有点晚了，但我也在尝试使用 mvvm 创建一个图像裁剪应用程序。我不是专家，对 WPF 和 MVVM 仍然很陌生，但为了让我发送 mouseleftbuttondown、mousemove、mouseleftbuttonup 等鼠标事件来查看，我使用了来自表达式混合的事件触发器。在视图中，我分配或命名我选择的事件触发器并将命令绑定到适当的控件。在我的应用程序中，我在 Grid 中有一个带有矩形子元素的画布，它也包含图像。用户导入图像并在图像上绘制一个矩形以对其进行裁剪，这是通过使用鼠标事件实现的。我在我的网格中绑定命令，当有人对我在网格中的任何地方实现的事件（mouseleftbuttondown/up，mousemove）采取行动时，它将触发触发器。下面是它在 xaml 中的样子（或者它的一部分，因为我还没有完成）：

    <Grid x:Name="GridLoadedImage" HorizontalAlignment="Left" VerticalAlignment="Top">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <i:InvokeCommandAction Command="{Binding MouseLeftButtonDownCommand}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Grid.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}"/>
                </Grid.LayoutTransform>
                <Image x:Name="LoadedImage" Margin="10" Source="{Binding ImagePath}"/>
                <Canvas  x:Name="BackPanel" Margin="10">
                    <Rectangle x:Name="selectionRectangle"  Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed"/>
                </Canvas>
    </Grid>

我目前正在将代码放在我的视图模型中，我计划为所有三个鼠标事件提供函数命令。如果您打算使用事件触发器，则需要在主窗口 xaml 中添加以下语句

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

您还需要安装 Expression Blend SDK。我安装了 nuget 包管理器，并用它来安装表达式混合。希望这会有所帮助

【讨论】：

我正在寻找类似的东西，你的实现完成了吗？