Robert Mazurowski Robert Mazurowski - 2 months ago 11
C# Question

Attaching an Event to an item in a listviewItem/Deleting ListviewItem when clicked on child element

I have a Listview which contains which is a drag and drop listview, each listview items contains and icon (which is an MahApps X icon) and a file name. I want that every ListviewItem has this x icon, and when user click on the icon it will remove the file name from the Listview or the ObservableCollection fileNames. Unfortunately it seems in this case I don't know how to handle this event, what ever code i wrote was wrong. My question is to show me how to do this or explain me how will the event handling work in this case and how to get the ListViewItem from the sender. Thank you

This is the XAML:

<ListView x:Name="DropList" DockPanel.Dock="Left" Foreground="White"
Drop="DropList_Drop"
DragEnter="DropList_DragEnter"
AllowDrop="True"
DragOver="DropList_DragOver" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="DeleteAttachment" Height="Auto" Width="Height" MouseLeftButtonDown="DeleteAttachment_MouseLeftButtonDown">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_checkmark_cross}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


This is the code:

ObservableCollection<String> fileNames;

public Page()
{
InitializeComponent();
DropList.ItemsSource = fileNames;
}

private void DeleteAttachment_MouseLeftButtonDown(object sender, MouseButtonEventArgs) {
fileNames.Remove();
}

Answer

Try this:

XAML:

<Controls:MetroWindow
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                  xmlns:local="clr-namespace:MahApps.Metro.Application24" 
                  x:Class="MahApps.Metro.Application24.MainWindow"
                  BorderBrush="{StaticResource AccentColorBrush}"
                  BorderThickness="2"
                  Title="MainWindow"
                  Height="300"
                  Width="300">

<Grid>
    <ListView x:Name="list1" ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Height="15" Width="15" VerticalAlignment="Center" MouseLeftButtonDown="r1_MouseLeftButtonDown">
                        <Rectangle.Fill>
                            <VisualBrush Visual="{StaticResource appbar_checkmark_cross}" />
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Text="{Binding}" Padding="5,5,5,5" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

MainWindow:

public partial class MainWindow : MetroWindow
{
    MyViewModel vm;

    public MainWindow()
    {
        InitializeComponent();

        vm = new MyViewModel();
        DataContext = vm;
    }

    private void r1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Rectangle r = sender as Rectangle;
        vm.Data.Remove(r.DataContext.ToString());
    }
}

ViewModel:

public class MyViewModel
{
    public ObservableCollection<string> Data { get; set; }

    public MyViewModel()
    {
        Data = new ObservableCollection<string>
        {
            "Item 1",
            "Item 2",
            "Item 3",
            "Item 4",
            "Item 5"
        };
    }
}

enter image description here