Как вывести список объектов в DataGrid в WPF и настроить колонки?
Нужно показать таблицу с данными (список пользователей) в WPF. Нашёл контрол DataGrid, но не понимаю, как привязать к нему коллекцию и задать свои колонки вместо автоматических. Как правильно?
2 ответа
DataGrid — это контрол-таблица для отображения и редактирования коллекций. Привязывается через свойство ItemsSource.
- Модель и 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.
- 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".
Если нужна нестандартная ячейка (кнопка, картинка, прогресс-бар), используйте 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, до которой надо «дотянуться» вверх по дереву.