← Все вопросы

Как вывести список объектов в DataGrid в WPF и настроить колонки?

Задан 29 месяцев назад1к просмотров2 ответа
7

Нужно показать таблицу с данными (список пользователей) в WPF. Нашёл контрол DataGrid, но не понимаю, как привязать к нему коллекцию и задать свои колонки вместо автоматических. Как правильно?

2 ответа

12
✓ Принятый ответ — помог автору

DataGrid — это контрол-таблица для отображения и редактирования коллекций. Привязывается через свойство ItemsSource.

  1. Модель и ViewModel с коллекцией:
public class User
{
    public string Name { get; set; } = "";
    public int Age { get; set; }
    public bool IsActive { get; set; }
}

public class UsersVm
{
    public ObservableCollection<User> Users { get; } = new()
    {
        new User { Name = "Иван",  Age = 30, IsActive = true },
        new User { Name = "Мария", Age = 25, IsActive = false },
    };
}

Обратите внимание: для таблиц используйте ObservableCollection<T>, чтобы добавление/удаление строк автоматически отражалось в UI.

  1. XAML с ручными колонками (AutoGenerateColumns="False"):
<DataGrid ItemsSource="{Binding Users}"
          AutoGenerateColumns="False"
          CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Имя"     Binding="{Binding Name}" Width="*"/>
        <DataGridTextColumn Header="Возраст" Binding="{Binding Age}"  Width="100"/>
        <DataGridCheckBoxColumn Header="Активен" Binding="{Binding IsActive}"/>
    </DataGrid.Columns>
</DataGrid>

Ключевое:

  • ItemsSource="{Binding Users}" — привязка коллекции;
  • AutoGenerateColumns="False" — отключает авто-колонки, чтобы задать свои;
  • внутри Columns каждый Binding указывает свойство объекта-строки;
  • Width="*" — колонка тянется на свободное место.

Типы колонок: DataGridTextColumn (текст), DataGridCheckBoxColumn (галочка), DataGridComboBoxColumn (выпадающий список), DataGridTemplateColumn (любой свой шаблон).

Если таблица только для чтения — добавьте IsReadOnly="True".

5

Если нужна нестандартная ячейка (кнопка, картинка, прогресс-бар), используйте DataGridTemplateColumn:

<DataGridTemplateColumn Header="Действие">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Content="Удалить"
                    Command="{Binding DataContext.DeleteCommand,
                              RelativeSource={RelativeSource AncestorType=DataGrid}}"
                    CommandParameter="{Binding}"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Обратите внимание на RelativeSource={RelativeSource AncestorType=DataGrid} — это нужно, потому что DataContext строки это сам объект User, а команда живёт в общей ViewModel, до которой надо «дотянуться» вверх по дереву.

Ваш ответ

Войдите, чтобы ответить на вопрос.
Поддержать проект