Caliburn.Micro 为 ItemsControl 的 Image 添加 Click 事件

Question

我正在使用 Caliburn.Micro 来制作 Wpf Control。我的部分 XAML 代码如下：

<ItemsControl x:Name="Devices" Grid.Row="1">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border x:Name="border" 
                            BorderBrush="Black" 
                            BorderThickness="0" 
                            CornerRadius="5"
                            Margin="20">
                        <StackPanel>
                            <Image Source="{Binding ImageMain}" Height="200" />
                            <TextBlock HorizontalAlignment="Center" 
                                       Margin="0 0 0 20"
                                       Text="{Binding Name}" />
                        </StackPanel>
                    </Border>
                    <DataTemplate.Triggers>
                        <Trigger SourceName="border" Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
                            <Setter TargetName="border" Property="BorderThickness" Value="5"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

而且它工作正常。现在我想要将 Click 事件添加到我的 Image 并将 Devices.deviceId 传递给事件。

我尝试了不同的方法，但它们都不起作用。任何人都可以给我一个提示吗？非常感谢。

我试过了：

...
<Button>
   <Image Source="{Binding ImageMain}" Height="200" />
</Button>

但它不会显示图像。

Answer 1

您可以使用$dataContext 将所需信息作为参数传递。例如，

<Image Source="{Binding ImageMain}" Height="200"  cal:Message.Attach="[Event MouseDown]=[Action ImageClicked($dataContext)]" />

ImageClicked 在 ViewModel 中定义为

 public void ImageClicked(Device data)
 {

 }

您现在可以从data 实例中检索设备ID 信息并进行所需的处理。您可以阅读更多关于 Caliburn 微操作 here

Answer 2

在阿努的帮助下。终于完成了。这是完整的代码。希望将来能对其他人有所帮助：

观点：

<UserControl x:Class="ConfigUI.Views.ShowDevicesView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cal="http://www.caliburnproject.org"
             xmlns:local="clr-namespace:ConfigUI.Views"
             mc:Ignorable="d" 
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             FontFamily="Segoe UI Light" HorizontalAlignment="Center" VerticalAlignment="Center"
             d:DesignHeight="400" d:DesignWidth="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" HorizontalAlignment="Center" FontSize="24" 
                   Text="{DynamicResource ShowDevice}"
                   Margin="0 0 0 20"
                   />

        <ItemsControl x:Name="Devices" Grid.Row="1">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border x:Name="border" 
                            BorderBrush="Black" 
                            BorderThickness="0" 
                            CornerRadius="5"
                            Margin="20">
                        <StackPanel>
                            <Image Source="{Binding ImageMain}" Height="200" 
                                    cal:Message.Attach="[Event MouseDown]=[Action ImageClicked($dataContext)]" 
                                   />
                            <TextBlock HorizontalAlignment="Center" Margin="0 0 0 20" Text="{Binding Name}" />
                        </StackPanel>
                    </Border>
                    <DataTemplate.Triggers>
                        <Trigger SourceName="border" Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
                            <Setter TargetName="border" Property="BorderThickness" Value="5"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </Grid>
</UserControl>

视图模型：

using Caliburn.Micro;
using ConfigUI.Library.Models;
using ConfigUI.Local;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ConfigUI.ViewModels
{
    public class ShowDevicesViewModel: Screen
    {
        private BindableCollection<DetecctedDevice> _devices;

        public BindableCollection<DetecctedDevice> Devices
        {
            get { return _devices; }
            set {
                _devices = value;
                NotifyOfPropertyChange(() => Devices);
            }
        }

        public ShowDevicesViewModel()
        {
            _devices = new BindableCollection<DetecctedDevice>(LocalDevices.GetLocalDevices());
        }

        public void ImageClicked(DetecctedDevice selectedDevice)
        {
            Console.WriteLine();
        }
    }
}