# maui-collectionview

Скилл-справочник по CollectionView в .NET MAUI: шаблоны элементов, сетки, группировка, подгрузка при прокрутке и свайп-действия. Пригодится, когда агент пишет XAML для списков.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3200 установок · ★ 5730
- Автор: dotnet
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dotnet/skills/tree/HEAD/plugins/dotnet-maui/skills/maui-collectionview/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/maui-collectionview

## Что делает

Скилл описывает, как собирать прокручиваемые списки и сетки в .NET MAUI через `CollectionView`. Внутри — готовые фрагменты XAML: базовое подключение `ItemsSource`, `DataTemplate` для элемента, `GridItemsLayout` с `Span` и отступами между ячейками, режимы выделения, группировка, пустое состояние, подгрузка при прокрутке, свайп-действия и обновление жестом вниз.

Четыре правила скилл называет обязательными, потому что их нарушение ломает сборку или тихо отключает проверку привязок: не ставить `ViewCell` корнем `DataTemplate`, брать `ObservableCollection<T>` если список меняется после первой отрисовки, менять коллекцию в UI-потоке и задавать `x:DataType` на каждом шаблоне и на корне страницы. Остальное — размеры, точки прилипания, колонтитулы — скилл советует доставать только по конкретному вопросу, а не вываливать всё сразу.

Есть и явные границы: статичные раскладки без прокрутки, списки меток на карте, формы ввода таблицей и вопросы по `CarouselView` или `BindableLayout` — не сюда. Если проблема на деле в привязках, DI или навигации, скилл отсылает к соседним скиллам того же репозитория. Установка идёт через `npx skills add`; для GitHub Copilot команда другая — `gh skill install`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill maui-collectionview -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/maui-collectionview/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/maui-collectionview/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill maui-collectionview -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/maui-collectionview/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill maui-collectionview -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/maui-collectionview/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dotnet/skills maui-collectionview
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/maui-collectionview/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill maui-collectionview -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dotnet/skills --path plugins/dotnet-maui/skills/maui-collectionview
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/maui-collectionview/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dotnet/skills --skill maui-collectionview -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dotnet/skills/tree/HEAD/plugins/dotnet-maui/skills/maui-collectionview/SKILL.md

## Когда брать
- собрать прокручиваемый список элементов с шаблоном
- разложить карточки в сетку с нужным числом колонок
- включить выделение одного или нескольких элементов
- показать заглушку, когда данных нет
- добавить подгрузку следующей порции при прокрутке

## Примеры запросов агенту
- Сделай страницу .NET MAUI со списком заказов через CollectionView, шаблон элемента с картинкой и названием
- Переведи этот CollectionView на сетку в две колонки с отступами между ячейками
- Добавь в CollectionView обновление жестом вниз и пустое состояние, когда список пуст

## Похожие
- [dotnet-maui](https://affpapa.org/nevibecode/rules/dotnet-maui.md) — правило · ★ 40418
- [mvvm-toolkit-di](https://affpapa.org/nevibecode/skills/mvvm-toolkit-di.md) — скилл · 92 установки
- [winui-app](https://affpapa.org/nevibecode/skills/winui-app.md) — скилл · 3200 установок
- [vercel-react-native-skills](https://affpapa.org/nevibecode/skills/vercel-react-native-skills.md) — скилл · 255200 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [argent-lens](https://affpapa.org/nevibecode/skills/argent-lens.md) — скилл · 22500 установок

Из того же набора: [dotnet/skills](https://affpapa.org/nevibecode/by/dotnet/skills.md) — 101 карточка

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md