ListBox within WPF TextBox - Chips - wpf

Question

I need to add ListBox within a TextBox i.e., CHIPS
Refer the Screen shot: (Expectation)
Just Consider the View Model:
public class Person
{
private ObservableCollection<string> _personList = new ObservableCollection<string>();
public ObservableCollection<string> PersonList
{
get { return _personList; }
set
{
_personList = value;
if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("PersonList"));
}
}
private string _personStr = String.Empty;
public string PersonStr
{
get { return _personStr; }
set
{
_personStr = value;
if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("PersonStr"));
}
}
public Person()
{
PersonList.Add("IR-Punch");
PersonList.Add("Stack-Overflow");
}
public ICommand BTextCommand
{
get
{
return new DelegateCommand(AppendString);
}
}
public void AppendString()
{
PersonList.Add(PersonStr);
}
}
The working XAML Source Code:
<ItemsControl ItemsSource="{Binding PersonList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding }" TextWrapping="Wrap"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBox Text="{Binding PersonStr}" Width="160" VerticalAlignment="Center" />
<Button Command="{Binding BTextCommand}" Content="Add" />
Kindly assist me how to add ListBox within a TextBox. I take care of Sytle. I'm expecting the core idea.

Answer 1

Don't try to embed additional controls within the TextBox, instead embed the ItemsControl and TextBox in a stack panel as shown below:
<Border BorderThickness="1">
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding PersonList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBox MinWidth="100" BorderBrush="Transparent" BorderThickness="0" Text="{Binding PersonStr}" />
</StackPanel>
</ScrollViewer>
</Border>
You will want to style the outer Border to look like a TextBox (pretty much just finding the correct BorderBrush) but, as requested, I've left the styling to you.
Please note, I've not actually tried this solution, just penned it as an approach that should work. Let me know if you have any problems with it.