How to write the event for button inside the listbox

Question

I have one list box. Inside that i have buttons for each row. When i click the button the page will navigate to another page. If i click the list box items the page will navigate to another page.

Now i can not write the events for button inside the list box.

 <Grid x:Name="ListBoxEventsUIContainer" Grid.Row="1" Margin="2,0,2,0">
            <ListBox Height="444" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="2,34,0,0" Name="listBox1" VerticalAlignment="Top" Width="476" BorderBrush="#00410D0D">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                            <StackPanel Orientation="Horizontal">
                                <Border BorderBrush="Wheat" BorderThickness="1">
                                    <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                </Border>
                                <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />

                                <Button Height="80" Width="80" Command="{Binding addPerson}">
                                    <Button.Background>
                                        <ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
                                    </Button.Background>
                                </Button>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid> 

i want to write the event for :-

<Button Height="80" Width="80" Command="{Binding addPerson}">
                                        <Button.Background>
                                            <ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
                                        </Button.Background>
                                    </Button>

In View Model. Normally i will write the button event like:-

ReactiveAsyncCommand addPerson = new ReactiveAsyncCommand();
  public ListBoxEventsViewModel()
        {
            var getOrgDetails = new ReactiveAsyncCommand();

            getOrgDetails.Subscribe(x =>
            {
                StudentDetails = new ObservableCollection<ListBoxEventsModel>();
                StudentDetails = ListBoxEventsModel.extract(myData.ToString());

            });
            getOrgDetails.Execute(true);

            addPerson = new ReactiveAsyncCommand();
            addPerson.Subscribe(x=>{
                MessageBox.Show("Selected..");
            });
        }

But i can addPerson button is not working. Please let me know how to write the event? Thanks in advance..

Answer 1

Set the DataContext to the button.

Xaml:

<Button DataContext="{Binding DataContext, ElementName=listBox1}"
    Height="80"
    Width="80"
    Command="{Binding addPerson}">
<Button.Background>
    <ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png"
                Stretch="Fill" />
</Button.Background>

Answer 2

You can do any of the following..

1. Directly write the "click" event in the item template and then get the corresponding data item which called it using as follows

in xaml..

<Button Height="80" Width="80" Command="{Binding addPerson}" click="addPersonClick">
                                        <Button.Background>
                                            <ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
                                        </Button.Background>
                                    </Button>

In the backend..

private void addPersonClick(object sender, RoutedEventArgs e)
{

  StudentsDetails object=(sender as Button).DataContext as StudentsDetails;
  //You can use this object for any of your operations
}

2 . Or you can totally use a new feature called ContextMenu to implement one of the navigation you want.