Handle an event that is inside user control in list view

Question

I have a list of user control and each user control have two buttons, and when I click on them, something must happen, but I want to handle this event not inside the user control, I want to handle the events inside the main page So, How can I catch the events that fired by the selected item user control of list view?

user control code behind:

 public sealed partial class TestingUerControl : UserControl
{
    public TestingUerControl()
    {
        this.InitializeComponent();
    }

    public event EventHandler FirstButtonEvent;
    public event EventHandler SecondButtonEvent;

    private void firstButton_Click(object sender, RoutedEventArgs e)
    {
        //Some stuff of code
        FirstButtonEvent?.Invoke(this, new EventArgs());
    }

    private void secondButton_Click(object sender, RoutedEventArgs e)
    {
        //Some stuff of code
        SecondButtonEvent?.Invoke(this, new EventArgs());
    }
}

main page xaml markup:

  <ListView x:Name="listUserControl"
              Width="100"
              Header="400">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:MyModel">
                <userControl:TestingUerControl/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I used this statement:

((TestingUerControl)listUserControl.SelectedItem).FirstButtonEvent += OnFirstButtonEvent;

but this doesn't work I can cast the SelectedItem to MyModel class only So How can I reach to "FirstButtonEvent" and "SecondButtonEvent" of selected user control of list view

Answer 1

The way with commands and MVVM is preferable, but you can also work with custom RoutedEvent instead of Event:

public sealed partial class TestingUerControl : UserControl
{
    public TestingUerControl()
    {
        this.InitializeComponent();
    }

    public static readonly RoutedEvent FirstButtonEvent = EventManager.RegisterRoutedEvent(
        nameof(FirstButton), RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(TestingUerControl));

    public event RoutedEventHandler FirstButton
    {
        add { AddHandler(FirstButtonEvent, value); }
        remove { RemoveHandler(FirstButtonEvent, value); }
    }

    private void firstButton_Click(object sender, RoutedEventArgs e)
    {
        //Some stuff of code
        RaiseEvent(new RoutedEventArgs(TestingUerControl.FirstButtonEvent));
    }

    private void secondButton_Click(object sender, RoutedEventArgs e)
    {
        //See first btn
    }
}

and then in XAML just assign an event handler:

<ListView x:Name="listUserControl" Width="100" Header="400">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:MyModel">
            <userControl:TestingUerControl FirstButton="OnFirstButton_Click"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

Use MVVM:

public class TestCommand : ICommand
{
    Action<object> _execute;
    Func<object, bool> _canExecute;


    public TestCommand(Action<object> execute)
      : this(execute, DefaultCanExecute)
    {
    }

    public TestCommand(Action<object> execute, Func<object, bool> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute");
        }

        if (canExecute == null)
        {
            throw new ArgumentNullException("canExecute");
        }

        this._execute = execute;
        this._canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            CommandManager.RequerySuggested += value;
        }
        remove
        {
            CommandManager.RequerySuggested -= value;
        }
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute != null)
        {
            return _canExecute(parameter);
        }
        else
        {
            return false;
        }
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    private static bool DefaultCanExecute(object parameter)
    {
        return true;
    }

}

public class MyModel 
{
    public MyModel()
    {
        FirstButtonCmd = new TestCommand(OnFirstButtonCmd);
        SecondButtonCmd = new TestCommand(OnSecondButtonCmd);
    }
    
    public ICommand FirstButtonCmd{get;set;}
    public ICommand SecondButtonCmd{get;set;}
    
    private void OnFirstButtonCmd()
    {
        //click first button
    }
    
    private void OnSecondButtonCmd()
    {
        //click second button
    }
}

TestingUerControl.xaml

<Button Click={Binding FirstButtonCmd}></Button>
<Button Click={Binding SecondButtonCmd}></Button>

TestingUerControl.xaml.cs

public sealed partial class TestingUerControl : UserControl
{
    public TestingUerControl()
    {
        this.InitializeComponent();
    }
}