在图像上添加点击事件答案

【问题标题】：Adding on click event on image在图像上添加点击事件
【发布时间】：2018-11-22 08:32:57
【问题描述】：

我想添加一个可点击的事件，它会转到特定的查询操作
示例：我有这 3 个列表 Image
当我单击其中一个列表并转到我选择并做某事的 id 时如何添加操作

Mydb 示例 Database
查询

select * from library where id_movie = (the one that i clicked)

Xaml

<ItemsControl ItemsSource="{Binding Path=Library}" Margin="0,0,2,0">
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="viewModels:Card">
            <UniformGrid Rows="1" Columns="1">
                <StackPanel Orientation="Horizontal" Width="100" Height="150" Margin="10,25,0,0" >
                    <Image Width="100" Source="{Binding Path=cover}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10,0,0,0">
                    <Label Content="{Binding Path=title}"/>
                </StackPanel>
            </UniformGrid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

我的班级

public class VModel
{
    public VModel()
    {
        DataTable dt = new DataTable();
        DataSet ds = new DataSet();
        using (MySqlConnection connection = new MySqlConnection("SERVER=localhost;" + "DATABASE=library;" + "UID=root;" + "PASSWORD=;"))
        {
            MySqlDataAdapter adapter = new MySqlDataAdapter();
            adapter.SelectCommand = new MySqlCommand("Select * from movie_list", connection);
            adapter.Fill(dt);
        }

        Library = dt.DefaultView;
    }

    public DataView Library { get; private set; }
}

【问题讨论】：

用图片作为背景的按钮代替图片，并使用命令参数传递id。如果您需要完整的答案，请告诉我。
<Button><Image/><Button> 你应该得到一本 WPF 书
除此之外，您可能希望将 ItemsControl 替换为 ListBox 并在 SelectedItem 更改时执行查询。
@Clemens 是的，谢谢，但我需要一个使用命令参数传递 id 的示例，就像 kaspar 说的那样
How to Add OnClick event on Image in WPF Programmatically的可能重复

标签： c# mysql wpf visual-studio xaml

【解决方案1】：

我认为这就是您要寻找的。每个项目都是一个按钮，其中包含一个图像和一个标签。单击按钮调用带有参数的命令（在窗口的 DataContext 上）。

<ItemsControl.ItemTemplate>
    <DataTemplate DataType="viewModels:Card">
        <Button Command="{Binding DataContext.QueryCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 
                CommandParameter="{Binding Path=id}">
            <StackPanel>
                <Image Width="100" Source="{Binding Path=cover}"/>
                <Label Content="{Binding Path=title}" HorizontalContentAlignment="Center"/>
            <StackPanel>
        </Button>
    </DataTemplate>
</ItemsControl.ItemTemplate>

【讨论】：

【解决方案2】：

将图像控件更改为以下代码，它将是带有图像的按钮。看到命令绑定到全局数据上下文，因为在视图模型中我将声明命令。我使用命令参数并在那里传递 Id。

<Button Command="{Binding Path=DataContext.DoSomething, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding id}">
     <StackPanel>
          <Image Width="100" Source="{Binding Path=cover}"/>
     </StackPanel>
</Button>

然后你需要在 ViewModel 中声明命令

public ICommand DoSomething {get;set;}

并在构造函数中初始化

DoSomething = new DoSomethingCommand(this);

为命令定义添加另一个类

internal class DoSomethingCommand: ICommand
    {
        private VModel vm;

        public PlotPlane(VModel mainViewModel)
        {
            this.vm = mainViewModel;
        }

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {

            var id = (id)parameter;

            //do something, use vm to access your viewmodel


        }
    }

【讨论】：

它说方法必须在 PlotPlane 上具有返回类型，但我仍然不了解“类 DoSomethingCommand : ICommand”的工作。你能详细说明一下吗？
很高兴听到，也有可能使用 @Clemens 建议的 SelectedItem。