Search code examples
c#.net-coreavaloniaui

ListBox with DataTemplate recognize SelectedItem


I have a ListBox with a simple DataTemplate, a CheckBox, and a TextBox. If the user checks a CheckBox I want to get this changed item, like the property SelectedItem of the ListBox.

How can I get the element from List2, which has changed?

MyListItem:

public class MyListItem2 : ReactiveObject
{

    private string _name;
    public string Name
    {
        get { return _name; }
        set
        {
            this.RaiseAndSetIfChanged(ref _name, value, "Name");
        }
    }
    private bool _isMarked;
    public bool IsMarked
    {
        get { return _isMarked; }
        set
        {
            this.RaiseAndSetIfChanged(ref _isMarked, value, "IsMarked");
        }
    }
}

View:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataTemplate.Views.MainWindow"
        xmlns:viewsmodels="clr-namespace:DataTemplate.ViewModels;assembly=DataTemplate"
        xmlns:dt="clr-namespace:DataTemplate;assembly=DataTemplate"
        Title="DataTemplate" Width="700">
<Window.DataContext>
  <viewsmodels:MainWindowViewModel />
</Window.DataContext>

<Grid ColumnDefinitions="250">
  <ListBox Grid.Column="1" Items="{Binding List2}">
    <ListBox.ItemTemplate>
      <DataTemplate DataType="dt:MyListItem2">
        <Grid ColumnDefinitions="50*,50*">              
          <CheckBox Grid.Column="0" Content="Mark" IsChecked="{Binding IsMarked}"/>  
          <TextBox Grid.Column="1" Text="{Binding Name}"/>  
        </Grid>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</Grid>

ViewModel:

public class MainWindowViewModel : ReactiveObject
{
    public ObservableCollection<MyListItem2> List2 { get; set; }    

    public MainWindowViewModel()
    {
        List2 = new ObservableCollection<MyListItem2>();
        Random rand = new Random();

        for (int i = 0; i < rand.Next(1, 20); i++)
        {
            MyListItem2 mli = new MyListItem2();
            mli.Name = "ListItem" + i;
            mli.IsMarked = false;
            mli.PropertyChanged += ItemChanged; 
            List2.Add(mli);
        }
    }
    private void ItemChanged(object sender, PropertyChangedEventArgs e)
    {            
        var item = sender as MyListItem2;
        Console.WriteLine(string.Format("changed: {0} {1}", item.Name, item.IsMarked));            
    }
}

Solution

  • I can see two ways:

    • Since you are using MVVM, implement the INotifyPropertyChanged interface on the MyListItem2 class (Microsoft Reference on INotifyPropertyChanged implementation). Raise the property change event when the IsMarked value is set/changed, then wire into the PropertyChanged event handler of the item to determine when it is changed. . OR
    • If you have codebehidn, add a "Checked" and/or "Unchecked" event handler on the checkbox itself from the XAML. Shown below.

      CheckBox Grid.Column="0" Content="Mark" IsChecked="{Binding IsMarked}"/>
      Checked="IsMarked_Checked"

    Codebehind

    public void IsMarked_Checked(object sender, RoutedEventArgs e)
    {
        var ck = sender As Checkbox;
    
        if (ck == null) 
        {
             return;
        }
    
        // do whatever you need to here using the datacontext of the Checkbox
    }