c# - c# mvvm databind 用于多个点击事件不起作用

问题描述

我在 c# 中创建了一个 picross 应用程序，作为我的第二个 c# 应用程序。我试图保留它 mvvm。但对此有一点问题。

我有一个矩形数组，当有人点击这些矩形中的一个时，这个矩形的状态需要更改（颜色更改）。

我已经设法以非 mvvm 方式做到这一点，但真正想做的是 mvvm。

所以代码。首先是 xaml 代码。

<Window x:Class="View.CreatePuzzle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:View"
    xmlns:controls="clr-namespace:View.Controls"
    mc:Ignorable="d"
    Title="CreatePuzzle" Height="450" Width="800">
<Window.Resources>
    <VisualBrush x:Key="myBrush">
        <VisualBrush.Visual>
            <Grid>
                <Rectangle Fill="Red"/>
                <Image Source="Images/backgroundmain.jpg"/>
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource myBrush}" RenderTransformOrigin="0.508,0.819" Height="450" Margin="10,0,10,0">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="600"/>
    </Grid.ColumnDefinitions>

    <StackPanel>
        <TextBlock Grid.Column="0" Text="your name" />
        <TextBox Grid.Column="0" Text="{Binding Author}" />
    <TextBlock Grid.Column="0" Text="width" />
        <controls:numberinput x:Name="widthfield" Grid.Column="1"  Value="{Binding puzzlewidth}">
        </controls:numberinput>
    <TextBlock Grid.Column="0" Text="height" />
        <controls:numberinput x:Name="heightfield" Grid.Column="0" Value="{Binding puzzleheight}">
        </controls:numberinput>

        <Button Grid.Column="0" Height="25" Content="generate puzzle" 
        Command="{Binding Path=generatefield}"/>
    </StackPanel>

    <controls:PiCrossControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" x:Name="picrossControl" ColumnConstraints="{Binding ColumnConstraints}" RowConstraints="{Binding RowRonstraints }" Grid="{Binding Grid}" >
        <controls:PiCrossControl.SquareTemplate>
            <DataTemplate >
                <Rectangle Width="32" Height="32" Stroke="Black" MouseRightButtonDown="Rectangle_MouseRightButtonDown" MouseWheel="Rectangle_MouseWheel">
                    <Rectangle.InputBindings>
                        <MouseBinding Gesture="LeftClick" Command="{Binding Path=Rectangle_MouseLeftButtonDown}"/>
                    </Rectangle.InputBindings>
                    <Rectangle.Fill>
                        <Binding Path="Contents.Value"  UpdateSourceTrigger="PropertyChanged">
                            <Binding.Converter>
                                <local:SquareConverter Empty="White" Filled="Black" Unknown="green" />
                            </Binding.Converter>
                        </Binding>
                    </Rectangle.Fill>
                </Rectangle>
            </DataTemplate>
        </controls:PiCrossControl.SquareTemplate>

    </controls:PiCrossControl>
        <Button Grid.ColumnSpan="2" Height="50" Content="create puzzle" 
        Command="{Binding Path=createpuzzle}" Margin="0,340,0,0"/>
    </Grid>

这是想要从 xaml.cs 中取出的方法之一

    private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
    {
        Rectangle rectangle = (Rectangle)sender;
        IPlayablePuzzleSquare square = (IPlayablePuzzleSquare)rectangle.DataContext;
       square.Contents.Value = Square.EMPTY;
    }

以及我想用视图模型方法替换它：

        public void Rectangle_MouseLeftButtonDown(object sender )
    {
        Debug.WriteLine("leftmousevent in vm");

    }

因此，当我运行此代码时，每个矩形都会出现以下错误：

System.Windows.Data Error: 40 : BindingExpression path error: 'Rectangle_MouseLeftButtonDown' property not found on 'object' ''PlayablePuzzleSquare' (HashCode=36468595)'. BindingExpression:Path=Rectangle_MouseLeftButtonDown; DataItem='PlayablePuzzleSquare' (HashCode=36468595); target element is 'MouseBinding' (HashCode=10961125); target property is 'Command' (type 'ICommand')

我希望有一个人可以帮助我。请注意，我对 c# 很陌生，但有更多的 java 经验。

在此先感谢杰夫·乌伊特霍文

标签： c#wpfmvvmdata-binding

由于您不希望代码落后，您必须从 xaml.cs 中删除鼠标左键单击事件处理程序。相反，您可以使用 System.Windows.Interactivity.dll 。首先将此引用添加到您的项目中。然后在 xaml 中添加以下代码。（例子）

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown" >
            <i:InvokeCommandAction Command="{Binding MouseLeftButtonDownClick}"  >

            </i:InvokeCommandAction>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Rectangle>

正如您在示例中看到的，我的事件绑定到命令，它位于视图模型中。如果您不熟悉 EventToCommand 绑定，可以从以下链接了解更多信息

WPF 将 UI 事件绑定到 ViewModel 中的命令

在此之后，您必须在 viewmodel 中实现 ICommand 。（例子）

public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public ICommand MouseLeftButtonDownClick { get; }
        public ViewModel()
        {
            MouseLeftButtonDownClick = new RelayCommand(OnMouseLeftButtonClick);
        }

        private void OnMouseLeftButtonClick(object obj)
        {
            //Your logic on left button click
        }

        public void OnPropertyChanged(string PropName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropName));
        }
    }

我在我的视图模型中使用了 RelayCommand 类，它只是 ICommand 实现。如果您不熟悉 ICommand ，可以从以下链接了解更多信息

ICommand MVVM 实现

c# - c# mvvm databind 用于多个点击事件不起作用

问题描述

解决方案

推荐阅读