Make a WPF ListBox comma separate values

Question

I have a ListBox that looks like this:

<ListBox ItemsSource="{Binding Fruits}">
    <!--Make the items wrap--> 
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel></WrapPanel>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name, StringFormat=' {0},'}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This gives me a list like this:

Oranges, Grapes, Bananas,

But what I want is:

Oranges, Grapes, Bananas

(no trailing comma)

Any one have an idea on how to remove the trailing comma?

Answer 1

This can be achieved using IValueConverter to determine whether its last item in a listBox and there by updating StringFormat on your binding using data trigger in XAML.

Create a converter to determine if value is last item in listbox -

public class IsLastItemInContainerConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        DependencyObject item = (DependencyObject)value;
        ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);

        return ic.ItemContainerGenerator.IndexFromContainer(item) ==
                                                        ic.Items.Count - 1;
    }

    public object ConvertBack(object value, Type targetType, object parameter,
                              CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now modify your XAML and add trigger on DataTemplate to remove comma from StringFormat on your TextBlock -

<ListBox ItemsSource="{Binding Fruits}">
   <ListBox.Resources>
      <local:IsLastItemInContainerConverter
             x:Key="IsLastItemInContainerConverter"/>
   </ListBox.Resources>
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <WrapPanel/>
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <TextBlock x:Name="textBlock"
                    Text="{Binding Name, StringFormat=' {0},'}" />
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource 
                                               Mode=FindAncestor, 
                                               AncestorType=ListBoxItem},
                                               Converter={StaticResource IsLastItemInContainerConverter}}" 
                             Value="True">
                    <Setter Property="Text" TargetName="textBlock"
                            Value="{Binding Name, StringFormat=' {0}'}"/>
                 </DataTrigger>
            </DataTemplate.Triggers>
       </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Answer 2

If you refactor your code, you can make a string that has your desired result very easily:

string.Join(", ", Fruits) // e.g. Oranges, Grapes, Bananas

E.g. you could have:

// on your binding object
public string FruitString { get { return string.Join(", ", Fruits); } }
// in your XAML
<TextBlock Text="{Binding FruitString}" />

(or, if the Fruits property was of a class you defined, you could override its ToString(), which would be a good place to put the Join code)