How to display a list of few items inside a row of a WPF DataGrid?

Question

I have this XAML code:

<Window x:Class="SourcicoProjectTest.RecipeListWindow"
    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:SourcicoProjectTest.code"
    mc:Ignorable="d"
    Title="RecipeListWindow" Height="450" Width="800" Loaded="Window_Loaded">

<Window.DataContext>
    <local:MainMVVM/>
</Window.DataContext>

<Window.Resources>
    <local:RecipeCountConverter x:Key="countConverter"/>
</Window.Resources>

<Grid>
    <DataGrid Margin="5, 5, 5, 5" 
              SelectedItem="{Binding selectedRecipe}" 
              ItemsSource="{Binding recipesList}"
              IsReadOnly="True"
              AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Recipe ID"
                  Binding="{Binding ID}" />

            <DataGridTextColumn Header="Recipe Name"
                  Binding="{Binding name}" />

            <DataGridTextColumn Header="Recipe Source"
                  Binding="{Binding source}" />

            <DataGridTextColumn Header="Num. of Ingredients"
                  Binding="{Binding Path=ingredients.Count}" />

            <DataGridTextColumn Header="Ingredients"
                  Binding="{Binding Path=ingredients}" />

            <DataGridTextColumn Header="Prep. Time"
                  Binding="{Binding prepTime}" />

            <DataGridTextColumn Header="Prep. Instructions"
                  Binding="{Binding prepInstructions}" />

            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Content="Details"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Content="Delete"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        </DataGrid.Columns>
    </DataGrid>
</Grid>

The selected item is of type Recipe. Recipe has a list of ingredients:

ObservableCollection<Ingredient> ingredients

I want to display just the first three ingredients(comma separated) and add ellipsis(...) if there is more than three in a single column.

<DataGridTextColumn Header="Ingredients"
                  Binding="{Binding Path=ingredients}" />

What should I do in my XAML code???

Answer 1

There's a few ways you could do this. I would use a converter personally. Something like this:

class IngredientsListToStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var list = value as IEnumerable<string>;

        if (list == null) 
            return String.Empty;

        var output = String.Join(", ", list.Take(3));

        if (list.Count > 3)
            output += "...";

        return output;
    }

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

Add the converter like you've already added your RecipeCountConverter then add it to your binding like so:

<DataGridTextColumn Header="Ingredients"
                  Binding="{Binding Path=ingredients, Converter={StaticResource IngredientsListToStringConverter}" />