Caliburn.Micro Добавить событие Click в изображение для ItemsControl

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 к моему изображению и передать 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 и выполнить необходимую обработку. Вы можете прочитать больше о действиях Caliburn Micro здесь

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();
        }
    }
}