Re: Editing items in a bound ListBox? [modified] - WPF Discussion Boards

24-Mar-09 12:25

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:

<ListBox 
     x:Name="ListBoxColors" 
     ItemsSource="{Binding ColorNames}" />

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

<TextBox 
     Text="{Binding ElementName=ListBoxColors, 
     Path=SelectedValue.Content, Mode=TwoWay, 
     UpdateSourceTrigger=PropertyChanged}" />

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

ABitSmart24-Mar-09 19:00

24-Mar-09 19:00

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 Smile | :)

)

XAML,

<TextBox Text="{Binding ElementName=playlists, Path=SelectedValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ListBox Name="playlists" ItemsSource="{Binding Path=Files}" SelectionMode="Single"/>

Code behind,

public class Playist
{
    public ObservableCollection<string> Files { get; set; }

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

private Playist _playlist = new Playist();

public Window1()
{
    InitializeComponent();

    playlists.DataContext = _playlist;
}

David Veeneman25-Mar-09 3:04

25-Mar-09 3:04

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:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <TextBox Text="{Binding ElementName=playlists, Path=SelectedValue.Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <ListBox Name="playlists"  SelectionMode="Single">
            <ListBoxItem>a</ListBoxItem>
            <ListBoxItem>b</ListBoxItem>
            <ListBoxItem>c</ListBoxItem>
            <ListBoxItem>d</ListBoxItem>
        </ListBox>
        <!-- ItemsSource="{Binding Path=Files}" -->
    </StackPanel>
</Window>

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 ObservableCollection<string> Files { get; set; } 
        public PlayList() 
        {
            Files = new ObservableCollection<string>(); 
            Files.Add("a"); 
            Files.Add("b"); 
            Files.Add("c"); 
            Files.Add("d"); 
        } 
    }
}

David Veeneman
www.veeneman.com

ABitSmart25-Mar-09 3:53

Re: Editing items in a bound ListBox? [modified]

25-Mar-09 3:53

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

XAML,

<TextBox Text="{Binding ElementName=playlists, Path=SelectedItem.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ListBox Name="playlists" ItemsSource="{Binding Path=Files}" SelectionMode="Single">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>          
    </ListBox.ItemTemplate>
</ListBox>

Code,

public class MyFile
{
    public string Name { get; set; }
}
   
public class Playist
{
    public ObservableCollection<myfile> Files { get; set; }

    public Playist()
    {
        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" });
    }
}

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

Is this what you are trying to sort out ?

David Veeneman25-Mar-09 3:50

25-Mar-09 3:50

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

ABitSmart25-Mar-09 4:02

25-Mar-09 4:02

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 Veeneman25-Mar-09 5:29

25-Mar-09 5:29

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:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <TextBox Text="{Binding ElementName=playlists, Path=SelectedItem.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <ListBox Name="playlists" ItemsSource="{Binding Path=Files}" SelectionMode="Single">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Show file list from DC" Click="Button_Click" />
    </StackPanel>
</Window>

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

ABitSmart25-Mar-09 5:40

25-Mar-09 5:40

Glad to be of help Smile | :)

Member 367392230-Jun-09 20:50

30-Jun-09 20:50

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.

<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.

ABitSmart30-Jun-09 20:56

30-Jun-09 20:56

You code did not come through.

Member 367392230-Jun-09 21:00

30-Jun-09 21:00

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

ABitSmart30-Jun-09 21:21

30-Jun-09 21:21

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

Member 367392230-Jun-09 21:34

30-Jun-09 21:34

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.

ABitSmart30-Jun-09 21:37

30-Jun-09 21:37

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

Member 367392230-Jun-09 22:45

30-Jun-09 22:45

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

Member 367392230-Jun-09 21:05

30-Jun-09 21:05

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.

ABitSmart30-Jun-09 21:35

30-Jun-09 21:35

You should try something like this Link[^]

Member 367392230-Jun-09 20:56