How to add a placeholder item to an ItemsControl?

Question

How can I add a custom text at the end to a listbox without adding it to the apples collection using ItemsSource?

e.g.
Listbox:
Listbox Item1-Apple
Listbox Item2-Apple
Listbox Item3-Apple.. Could be more or less Apple the last item should say "ADD NEW..."
Listbox Item4-ADD NEW...

XAML:

<Grid>
    <ListBox Name="lbxFruits" Margin="0,0,70,52">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation = "vertical" Background="Green">
                    <Label>Hello</Label>
                    <TextBlock Text = "{Binding Price, ElementName=lbxFruits}" Width = "14" />

                    <TextBlock Text = "{Binding Name, ElementName=lbxFruits}" />

                </StackPanel >
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button Content="Button" HorizontalAlignment="Left" Margin="690,404,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>

C#:

private void RebuildList()
{
    ListBoxItem addItem = new ListBoxItem() { Content = "ADD NEW ..." };
    lbxFruits.ItemsSource = apples;
}

private ObservableCollection<Fruit> apples ;
public ObservableCollection<Fruit> Apples
{
    get
    {
        return this.apples;
    }

    set
    {
        if (value != this.apples)
        {
            this.apples = value;
            NotifyPropertyChanged();
        }
    }
}

Answer 1

You can use the placeholder feature of the CollectionView : it will handle the positioning of the placeholder item automatically (for example pin it at the end or beginning). When iterating over the collection, this placeholder item won't appear, thus won't pollute your data structure.

The big advantage is that since focusing on the collection view, you don't have to modify existing data models and their related logic.

You enable the placeholder item by setting the IEditableCollectionView.NewItemPlaceholderPosition property to either NewItemPlaceholderPosition.AtBeginning or NewItemPlaceholderPosition.AtEnd . Common collections that implement IList (for example ObservableCollection ) are represented by the ListCollectionView which implements IEditableCollectionView .
After enabling the placeholder feature, the collection view of the underlying source collection will now contain the static CollectionView.PlaceholderItem .

You can then create a dedicated DataTemplate for the CollectionView.NewItemPlaceholder which is of type object (the underlying type is defined internal and therefore not accessible for client code of the .NET library).

A custom DataTemplateSelector will then identify this placeholder item to return the appropriate DataTemplate .

The DataTemplate for the placeholder item contains a Button that allows to add a new item on click (using an ICommand or event handler) and to display the placeholder item's text.

FruitTemplateSelector.cs

public class FruitTemplateSelector : DataTemplateSelector
{
  /* Add more template properties in case you have more data types */

  public DataTemplate AppleTemplate { get; set; }
  public DataTemplate PlaceholderTemplate { get; set; }

  public override DataTemplate SelectTemplate(object item, DependencyObject container) => item switch
  {
    var dataItem when dataItem == CollectionView.NewItemPlaceholder => this.PlaceholderTemplate,
    Apple _ => this.AppleTemplate,
    _ => base.SelectTemplate(item, container),
  };
}

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public ObservableCollection<string> TextItems { get; }

  public MainWindow()
  {
    InitializeComponent();
    this.DataContext = this;
 
    this.TextItems = new ObservableCollection<string>
    {
      "Item #1",
      "Item #2",
      "Item #3"
    };

    // Get the default collection view of the source collection
    ICollectionView textItemsView = CollectionViewSource.GetDefaultView(this.TextItems);

    // Enable the placeholder item 
    // and place it at the end of the collection view
    IEditableCollectionView editableCollectionView = textItemsView as IEditableCollectionView;
    editableCollectionView.NewItemPlaceholderPosition = NewItemPlaceholderPosition.AtEnd;
  }

  private void AddNewItem_OnClick(object sender, EventArgs e)
    => this.TextItems.Add($"Item #{this.TextItems.Count + 1}";
}

MainWindow.xaml

<Window xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <ListBox ItemsSource="{Binding TextItems}"
           HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplateSelector>
      <local:FruitTemplateSelector>
        <local:FruitTemplateSelector.AppleTemplate>
          <DataTemplate DataType="{x:Type sys:String}">
            <TextBlock Text="{Binding}" />
          </DataTemplate>
        </local:FruitTemplateSelector.AppleTemplate>

        <local:FruitTemplateSelector.PlaceholderTemplate>
          <DataTemplate>
            <Button Content="Add New Item..."
                    Click="AddNewItem_OnClick"
                    Background="Orange" />
          </DataTemplate>
        </local:FruitTemplateSelector.PlaceholderTemplate>
      </local:FruitTemplateSelector>
    </ListBox.ItemTemplateSelector>
  </ListBox>
</Window>

Answer 2

There are several ways in which this can be achieved. I would suggest that you define an interface for your Fruit and have your ObservableCollection contain a list of class instances that implement that interface. Something like:

interface IFruit
{
  string Name{get;set;}
  string Price{get;set;}
}

class Apple:IFruit
{
  string Name{get;set;}
  string Price{get;set;}
}

class AddApple:IFruit
{
  string Name{get;set;} = "Add New Apple";
  string Price{get;set;}
}

public ObservableCollection<IFruit> Apples

Then you just need to trigger your the code to add a new Apple either by reacting to an OnClick event and determining whether it has come from an AddApple class type or by adding a command to the interface which is implemented within AddApple to run the add new apple code and within the Apple class to do something else (or nothing at all).

You could in fact add the interface to Fruit class as I assume that Apple inherits from it.

eg,

abstract class Fruit : IFruit
{
  public virtual string Name{get;set;}
  public virtual string Price{get;set;}
}

class Apple : Fruit
{
    public override string Name { get; set; } = "Apple"
    public override string Price { get; set; }
}

Then you can have similar code for all types inheriting from Fruit .

Or you just have:

class NewApple : Fruit
{
  public override string Name{get;set;} = "Add New Apple";
  public override string Price{get;set;}
}

Place that in your collection, keeping your code much the same as before.