Editing items in a bound ListBox?

David Veeneman

How do I go about editing items in a bound ListBox? I thought it would be as simple as binding a TextBox to the ListBox, but apparently, it's not. I am creating a WPF window that displays a list of color names in a ListBox. The list comes from a property on the DataContext, to which the ListBox.ItemsSource property is bound. When I select a ListBox item, I want it to appear in a TextBox. Any changes I make in the TextBox should update the selected ListBox item. Here's my XAML for the ListBox:

And here's my XAML for the TextBox, whose Text property is bound to the ListBox:

The ListBox binding works fine in both directions, but the TextBox binding only works in one direction--from the ListBox to the TextBox. Canges in the TextBox are not propagated back to the ListBox. Here's my question: Can a TextBox Be bound to a bound ListBox in XAML, or do I have to go back to handling events in code-behind. If it can be done with XAML bindings, how? Thanks for your help.

David Veeneman www.veeneman.com

ABitSmart

It worked fine. When I select something in the ListBox the TextBox shows that value. When I type something in the Textbox the corresponding item does get selected (i.e. if the value in TextBox exists in the ListBox else nothing is selected). Mine is a simple example though, just a list of strings. My code (used the same example that I built for Christian in the above post :) ) XAML,

Code behind,

public class Playist
{
public ObservableCollection Files { get; set; }

public Playist()
{            
    Files = new ObservableCollection();
    Files.Add("a");
    Files.Add("b");
    Files.Add("c");
    Files.Add("d");           
}

}

private Playist _playlist = new Playist();

public Window1()
{
InitializeComponent();

playlists.DataContext = \_playlist;

}

David Veeneman

Thanks, but I pasted your code and markup into a WPF project, and I still have the same problem. I have pasted my complete code and markup below. What I want to do is implement two-way binding between the listbox and the textbox; i.e., click on a listbox item and have it appear in the textbox. Then, edit the item in the textbox and have the changes propogated back to the list box. If the listbox ItemsSource property is bound to a DataContext, two-way databinding between the listbox and the textbox doesn't work--it's only one way, from the listbox to the textbox. To see what I mean, remove the ItemsSource binding from the listbox, then add the four PlayList strings to the listbox using the Designer's Items property. Change the textbox binding path to SelectedValue.Content, and run. You will have two-way binding between the textbox and the listbox. Edit the textbox, and the changes appear in the listbox. Now, restore the original code. The textbox-listbox binding is now only one-way--from the listbox to the textbox. Changes in the textbox are not propagated back to the listbox. That brings me back to my original question: Is there any way to implement two-way binding between the textbox and the listbox, while maintaining the listbox ItemsSource binding to the PlayList object? My markup:

My code:

using System.Windows;
using System.Collections.ObjectModel;

namespace WpfApplication1
{
public partial class Window1 : Window
{
private PlayList _playlist = new PlayList();
public Window1()
{
InitializeComponent();
playlists.DataContext = _playlist;
}
}

public class PlayList 
{ 
    public Observable

David Veeneman

Post deleted because it's wrong. ABitSmart came up with the solution. David Veeneman Foresight Systems

David Veeneman www.veeneman.com

modified on Wednesday, March 25, 2009 11:22 AM

ABitSmart

My apologies, I misintepreted your question. Updated the code snippet, hopefully I have got you correct this time. XAML,

Code,

public class MyFile
{
public string Name { get; set; }
}

public class Playist
{
public ObservableCollection Files { get; set; }

public Playist()
{
    Files = new ObservableCollection();
    Files.Add(new MyFile { Name = "a" });
    Files.Add(new MyFile { Name = "b" });
    Files.Add(new MyFile { Name = "c" });
    Files.Add(new MyFile { Name = "d" });
}

}

public partial class Window1 : Window
{
private PlayList _playlist = new PlayList();
public Window1()
{
InitializeComponent();
playlists.DataContext = _playlist;
}
}

Is this what you are trying to sort out ?

ABitSmart · modified on Wednesday, March 25, 2009 11:22 AM

I was writing my reply while you posted this. Well, yes, you can use one of the two, not both at a time. In your case, using ItemsSource renders Items readonly. But you can modify ItemsSource. The example I posted does that.

David Veeneman

Brilliant! Works like a champ. Thanks for your help on this. I cleaned up the code just a bit--complete code and XAML is posted below. XAML:

Code:

using System.Windows;
using System.Collections.ObjectModel;
using System.Text;

namespace WpfApplication1
{
public partial class Window1 : Window
{
private PlayList _playlist = new PlayList();
public Window1()
{
InitializeComponent();
playlists.DataContext = _playlist;
}

    private void Button\_Click(object sender, RoutedEventArgs e)
    {
        StringBuilder sb = new StringBuilder();
        foreach (MyFile file in \_playlist.Files)
        {
            sb.Append(file.Name + " ");
        }
        MessageBox.Show(sb.ToString());
    }
}

public class MyFile 
{ 
    public string Name { get; set; } 
}

public class PlayList 
{
    public ObservableCollection<MyFile> Files { get; set; }

    public PlayList() 
    {
        Files = new ObservableCollection<MyFile>();
        Files.Add(new MyFile { Name = "a" });
        Files.Add(new MyFile { Name = "b" });
        Files.Add(new MyFile { Name = "c" });
        Files.Add(new MyFile { Name = "d" }); 
    } 
}

}

David Veeneman www.veeneman.com

ABitSmart

Glad to be of help :)

User 3671134

Hi, I am facing the similar kind of issue. But I am actually changing the controTemplate of ListBoxItem itself with ContentPresenter & a TextBox. Did the same thing as per the posted contents but it did not work with the binded list. I have given something like below in the ControlTemplate of ListBox Item. ; Kindly suggest.

ABitSmart

You code did not come through.

User 3671134

Hi, I am facing the similar kind of issue. But I am actually changing the controTemplate of ListBoxItem itself with ContentPresenter & a TextBox. I did the same thing as per the posted contents but it did not work with the binded list. I have given something like below in the ControlTemplate of ListBox Item. <ContentPresenter x:Name="displayTextBlock" Grid.Column="0" Grid.ColumnSpan="1" Margin="11,5,11,5" HorizontalAlignment="Stretch"/> <TextBox x:Name="listItemTextBox" Padding="11,5,11,5" HorizontalAlignment="Stretch" Background="Transparent" Grid.Column="0" Visibility="Collapsed" Grid.ColumnSpan="1" Text="{Binding Path=Content, ElementName=displayTextBlock, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" /> Kindly suggest. Thnx, Ritesh

User 3671134

See if it appears perfectly now.. Hi, I am facing the similar kind of issue. But I am actually changing the controTemplate of ListBoxItem itself with ContentPresenter & a TextBox. I did the same thing as per the posted contents but it did not work with the binded list. I have given something like below in the ControlTemplate of ListBox Item. <ContentPresenter x:Name="displayTextBlock" Grid.Column="0" Grid.ColumnSpan="1" Margin="11,5,11,5" HorizontalAlignment="Stretch"/> <TextBox x:Name="listItemTextBox" Padding="11,5,11,5" HorizontalAlignment="Stretch" Background="Transparent" Grid.Column="0" Visibility="Collapsed" Grid.ColumnSpan="1" Text="{Binding Path=Content, ElementName=displayTextBlock, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" /> Kindly suggest. Thnx, Ritesh

User 3671134

Actually TextBox will be hidden & will be visible on DoubleClick. At that time, I want the content of ListBox item to be modified in Textbox & after lostfocus of TextBox, it should update ListBox Item & again becomes hidden. This works for unbound list but for bound list, I need your suggestions.

ABitSmart

It won't work because you are binding the TextBox to the ContentPresenter. There is no binding to your data element at all.

User 3671134

This is a custom control. In window, ItemSource of this control is bind to a collection Object. Do you suggest some other approach for this.

ABitSmart

You should try something like this Link[^]

ABitSmart

But you have not bound any property of the collection to the ListBox item. How do you expect the collection to change?

User 3671134

Hi, We are doing the binding as below: <eclp:EclpList Name="eclpList" Margin="5" Height="Auto" Width="100" ItemsSource="{Binding}" DisplayMemberPath="Name" SelectionChanged="cmb_SelectionChanged" /> See if this can give any ideas.. Thnx Ritesh