Как отобразить список из нескольких элементов в строке WPF DataGrid?

Question

У меня есть этот код XAML:

<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>

Выбранный элемент относится к типу Рецепт.Рецепт содержит список ингредиентов:

ObservableCollection<Ingredient> ingredients

Я хочу отобразить только первые три ингредиента (через запятую) и добавить многоточие (...), если в одном столбце их больше трех.

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

Что мне делать в моем коде XAML ???

Answer 1

Есть несколько способов сделать это.Я бы использовал конвертер лично.Примерно так:

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();
    }
}

Добавьте конвертер, как вы уже добавили RecipeCountConverter, затем добавьте его в привязку следующим образом:

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