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

Ch.Gayatri Subudhi wrote:
the treeview of asp.net webapplication

If this isn't a Silverlight TreeView, then you may get better results
asking on the ASP.NET board[^].

Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

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

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;
}

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

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 ?

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

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.

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

Glad to be of help Smile | :)

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.

You code did not come through.

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

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

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.

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

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

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.

You should try something like this Link[^]

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

Hi,

I'm trying WPF and databinding....and I've run into a simple(I suppose) problem. Hopefully someone cam point me in the right direction.
If I declare a double like this i window.resources:

<System:Double x:Key="myValue">10</System:Double>

How can I bind a textboxs textproperty to it?

Here's a sample:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:System="clr-namespace:System;assembly=mscorlib"
>
  <Page.Resources>
    <System:Double x:Key="myValue">10</System:Double>
  </Page.Resources>
  <Grid>  
    <TextBox Text="{Binding Source={StaticResource myValue}, Mode=OneWay}" />
  </Grid>
</Page>

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

My blog | My articles | MoXAML PowerToys

Thank you very much, but how about TwoWay binding? Why doesnt that work? If I create a simple class and have a property of type double and bind to that property it works fine.

It won't work in this sample because you don't have a variable backer to bind into - it's a StaticResource. If you had a variable the two way binding would work.

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

My blog | My articles | MoXAML PowerToys

Hmmmm....I've probably missunderstood something here.... Smile | :)

I thought that I declared a variable, but it looks lite I can treat these declarations as "const"s....

How about DynamicResource, can I use that instead?

hi all,

with Silver3.0 can we use managed VC++ Dll or C# Dll as we can can use in WPF
using HndHost??

Thanks in Advance

Samir Satardekar