c# - Binding to the combobox control template item failed

Question

I'm using the combobox and binding through List values as like below

    <ComboBox ItemsSource="{Binding}" Name="testCombo" Margin="67,48,184,204">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBox  Text="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=ComboBox},Mode=OneWay,Path=SelectedItem}" Width="100" Height="50" />
            </DataTemplate>
        </ComboBox.ItemTemplate>            
    </ComboBox>

binding data like below in c#

      IList<string> objLoadData = new List<String> { "Ramesh", "Suresh" };
      testCombo.DataContext = objLoadData;    

I tried to bind the data into textbox, but I couldn't. How do bind datas to textbox?

Answer 1

If your list is just strings just Text="{Binding}" should work

You should think about using an ObservableCollection for your ItemsSource as it will automaticly update the ComboBox when Items change (add/remove etc)

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Name="UI">
    <Grid DataContext="{Binding ElementName=UI}">
        <ComboBox ItemsSource="{Binding ComboItems}" Margin="67,48,184,204">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Width="100" Height="50" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

Code:

public partial class MainWindow : Window
{
    private ObservableCollection<string> _comboItems = new ObservableCollection<string>();

    public MainWindow()
    {
        InitializeComponent();
        ComboItems.Add("Stack");
        ComboItems.Add("Overflow");
    }

    public ObservableCollection<string> ComboItems
    {
        get { return _comboItems; }
        set { _comboItems = value; }
    }
}

If you want to use a TextBox in the ComboBox you will probably want to use an object as the backing store for the string that implements INotifyPropertyChanged this way eveyything is updated and kept in sync.

Example:

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Name="UI">
    <Grid DataContext="{Binding ElementName=UI}">
        <ComboBox ItemsSource="{Binding ComboItems}" Margin="67,48,184,204">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Name}" Width="100" Height="50" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

Code:

public partial class MainWindow : Window
{
    private ObservableCollection<MyItem> _comboItems = new ObservableCollection<MyItem>();

    public MainWindow()
    {
        InitializeComponent();
        ComboItems.Add(new MyItem { Name = "Stack" });
        ComboItems.Add(new MyItem { Name = "Overflow" });
    }

    public ObservableCollection<MyItem> ComboItems
    {
        get { return _comboItems; }
        set { _comboItems = value; }
    }
}

public class MyItem : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get { return _name; }
        set { _name = value; NotifyPropertyChanged("Name"); }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Answer 2

Try this;

Inside constuctor

testCombo.DataContext = this;
testCombo.ItemsSource = objLoadData;  

In XAML

   <ComboBox Name="testCombo" Width="100" Height="50" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding Mode=OneWay}" Width="100" Height="50" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>