C# WPF How to get binding value in code behind

Question

I have a custom control ChatTextControl with 2 textbox and a button . The xaml is like this :

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <!-- Message -->
        <ColumnDefinition Width="*"/>
        <!-- delete message -->
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <!-- Message content -->
    <StackPanel>
        <TextBlock Text="{Binding Path= Pseudo}" FontWeight="SemiBold"/>
        <TextBlock Text="{Binding Path= Message}" TextWrapping="Wrap"/>
    </StackPanel>

    <Button Grid.Column="1" Padding="8" VerticalAlignment="Top" Width="20" Height="20" Background="{x:Null}" Click="Button_Click"/>
</Grid>

The pseudo and message come from the following class :

public class ChatListItemViewModel : BaseViewModel
{
    public string Pseudo { get; set; }

    public string Message { get; set; }

    public int Id { get; set; }
}

ChatTextControl is called in another custom control ChatListControl :

<Grid Background="White">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:ChatTextControl />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

In my main window I call ChatListControl like so :

<local:ChatListControl x:Name="MyChat" Margin="389,10,10,38"/>

And set the DataContext in code behind :

ChatListModel chat = new ChatListModel();
MyChat.DataContext = chat;

ChatListModel :

public class ChatListModel : ChatListViewModel
{
    private static int idCount = 0;

    public ChatListModel()
    {
        Items = new List<ChatListItemViewModel>();
    }

    public void AddMessage(string p, string m)
    {
        Items.Add(new ChatListItemViewModel
        {
            Pseudo = p,
            Message = m,
            Id = idCount
        });
        idCount++;
    }
}

The goal is to use the Button_Click event in ChatTextControl to delete the element with the corresponding id in the list. But i don't know how to get the id in the code behind whether it's in the ChatTextControl.cs or MainWindow.cs .

If someone know how to do it or have a better idea for the delete button please let me know.

Answer 1

You could for example set an IsDelete property in ChatListItemViewModel when the button is clicked, raise an event and handle this event in ChatListModel . You need to use an ObservableCollecton<T> instead of a List<T> for the item to get removed in the view:

public class ChatListModel : ChatListViewModel
{
    private static int idCount = 0;

    public ChatListModel()
    {
        Items = new ObservableCollection<ChatListItemViewModel>();
        AddMessage("p", "m");
    }

    public void AddMessage(string p, string m)
    {
        ChatListItemViewModel newItem = new ChatListItemViewModel
        {
            Pseudo = p,
            Message = m,
            Id = idCount
        };
        newItem.PropertyChanged += NewItem_PropertyChanged;
        Items.Add(newItem);
        idCount++;
    }

    private void NewItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        ChatListItemViewModel removedItem = (ChatListItemViewModel)sender;
        removedItem.PropertyChanged -= NewItem_PropertyChanged;
        Items.Remove(removedItem);
        idCount--;
    }

    public ObservableCollection<ChatListItemViewModel> Items { get; }
}

public class ChatListItemViewModel : BaseViewModel
{
    public string Pseudo { get; set; }

    public string Message { get; set; }

    public int Id { get; set; }

    private bool _isDeleted;
    public bool IsDeleted
    {
        get { return _isDeleted; }
        set { _isDeleted = value; OnPropertyChanged(nameof(IsDeleted)); }
    }

    public ChatListItemViewModel()
    {
        DeleteCommand = new RelayCommand(_ => true, _ => IsDeleted = true);
    }

    public ICommand DeleteCommand { get; }
}

ChatTextControl.xaml:

<Button Grid.Column="1" Padding="8" VerticalAlignment="Top" Width="20" Height="20" 
        Background="{x:Null}" Command="{Binding DeleteCommand}" />

Answer 2

I could not verify the answer of mm8 because of the reason put in my comment, so here is the solution that I found.

After putting break point in the Button_Click event, I noticed that I could obtain the Id of ChatListItemViewModel by casting the this.DataContext in ChatTextControl and send an event like this :

    public delegate void DeleteClick(int id);
    public static event DeleteClick OnDeleteClick;
    private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        OnDeleteClick?.Invoke(((ChatListItemViewModel)this.DataContext).Id);
    }

Doing so, I can get the Id and delete the item in the main window :

    public ChatListModel chat;
    public MainWindow()
    {
        InitializeComponent();
        chat = new ChatListModel();
        chat.AddMessage(name, "Hello World!");
        MyChat.DataContext = chat;
        ChatTextControl.OnDeleteClick += ChatTextControl_OnDeleteClick;
    }

    private void ChatTextControl_OnDeleteClick(int id)
    {
        chat.DelMessage(id);
        MyChat.DataContext = null;
        MyChat.DataContext = chat;
    }