WPF Textbox to ListBoxItem Binding

Question

Hi, I am new in WPF, i need to bind textbox text to listbox items.

This is My XAML CODE: My XAML code have 3 columns.

First column have one button, that button generated textbox automatically when user double click the mouse.
Second column is like canvas display the textbox
Third column is listbox.

When user click the button in stackpanel1, Textbox automatically generated into the Second_Stackpanel. Then, user type text into the textbox, that text automatically bind into listboxitem(stackpanel3).(user change the same text into the textbox, in that text also update the same listboxitem index.)

User click the button again another textbox automatically generated, that text bind to listboxitem in next index...

How to bind Textbox to ListboxItems in wpf please help me

I find on google and stackoverflow site (listbox to textbox bind only here). but i need to textbox to listbox binding.


<Window x:Class="WpfApp5.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:local="clr-namespace:WpfApp5"
     xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
     xmlns:Control="clr-namespace:Syncfusion.Windows.Tools.Controls;assembly=Syncfusion.Tools.Wpf"
     mc:Ignorable="d"
     Title="MainWindow" Height="450" Width="800">
 <Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
     </Grid.ColumnDefinitions>
     <StackPanel Grid.Column="0" Background="LightCoral" x:Name="stackpanel1">
         <Button Height="40" Width="60" Content="Text" Background="Black" Foreground="Red"
                 HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" FontSize="20"
                 MouseDoubleClick="TextBox_DynamicallyGenerated_Mouse_DoubleClick"></Button>
     </StackPanel>
     <StackPanel Grid.Column="1" Background="White" x:Name="stackpanel2">
     </StackPanel>
     <StackPanel Grid.Column="2" Background="Gray" x:Name="stackpanel3">
         <ListBox Height="300" x:Name="lstboxitems" Background="Aquamarine" Margin="20"></ListBox>
     </StackPanel>
     
 </Grid>
</Window>

This is My Code-Behind

public partial class MainWindow : Window
    {
        public static TextBox textBox;
       
        public MainWindow()
        {
            InitializeComponent();
        }

       
        
        private void TextBox_DynamicallyGenerated_Mouse_DoubleClick(object sender, MouseButtonEventArgs e)
        {
            textBox = new TextBox();
            textBox.Text = "Enter Text Here";
            textBox.Width = 120;
            textBox.Height = 25;
            textBox.Background = Brushes.White;
            textBox.BorderBrush = Brushes.Red;
            textBox.Name = "txtbox";
            textBox.IsEnabled = false;
            textBox.Foreground = Brushes.Red;
            stackpanel2.Children.Add(textBox);
            Canvas.SetLeft(textBox, e.GetPosition(stackpanel2).X);
            Canvas.SetTop(textBox, e.GetPosition(stackpanel2).Y);
            textBox.MouseDoubleClick += TextBox_MouseDoubleClick;
        }

        private void TextBox_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            textBox = sender as TextBox;
            textBox.IsEnabled = true;
            textBox.MouseLeave += TextBox_MouseLeave;
        }

        private void TextBox_MouseLeave(object sender, MouseEventArgs e)
        {
            textBox = sender as TextBox;
            textBox.IsEnabled = false;
        }
    }

Hi, you would have to declare the binding in code-behind when you create the TextBox. Is there a specific reason you want to do it this way instead of having the textbox inside the ListItem so you can directly edit them ? — Ostas
I need to design like paint app. user drag & drop object in canvas page. then user generate the text in canvas and edit the text. in that show in list box. when user edit the textbox.text listbox item also update automatically — karthick19892089

Ostas Ostas · Accepted Answer · 2020-07-24T17:15:31

You can set the binding in code behind when you create the textBox.

TextBlock lisboxItemTxtBlock = new TextBlock();
this.lstboxitems.Items.Add(new ListBoxItem { Content = lisboxItemTxtBlock });
Binding binding = new Binding("Text");
binding.Source = textBox;
BindingOperations.SetBinding(lisboxItemTxtBlock, TextBlock.TextProperty, binding);

I have a few remarks that might help:

In the code you posted, you set the Name of the TextBox to "txtbox" when you probably want to generate a unique name and keep track of it so you can do other modifications late.
You set the IsEnabled property of the textBox to false and you add an event on MouseDoubleClick. This won't work, the event won't be triggered on a textBox which is not enabled. You can take a look at : Disable a WPF button, but still swallow the click events
While this is the best way I found to answer the question, be aware that this doing it like this is not MVVM friendly so you might want to check the MVVM pattern for WPF before making a decision.

WPF Textbox to ListBoxItem Binding

1 Answers