Поиск
 
 

Результаты :
 


Rechercher Расширенный поиск

Кто сейчас на форуме
Сейчас посетителей на форуме: 2, из них зарегистрированных: 0, скрытых: 0 и гостей: 2

Нет

[ Посмотреть весь список ]


Больше всего посетителей (7) здесь было Сб Июн 17, 2017 3:57 pm
Самые активные пользователи за неделю


Спойлеры: как сделать курсовой проект

Предыдущая тема Следующая тема Перейти вниз

Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 3:20 pm

Центральная мысль в WPF — это разделение данных («информационных» классов) и их визуализации. Используемая в WPF модель предполагает проектирование следующих частей программы:

• Информационные классы (Cell, Field)
• Их отображение с помощью шаблонов
• Дополнительная программная логика в коде, исполняющая собственно игру

Можно ли отобразить чисто информационные классы в виде красивого поля?



Ответ — да, можно. Единственный вопрос: как?
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 3:29 pm

Ключом к разгадке является понятие шаблона данных. Шаблон данных (DataTemplate) позволяет визуализировать любой объект данных по заданному правилу. На картинке выше каждый объект Cell превращается при отображении в зелёный шарик. Для этого я создал шаблон данных, в котором написал создание зелёного эллипса с заливкой круговой градиентной кистью.





По строкам. Здесь сказано:

59 — начинаем объявлять шаблон данных
60 — каждый объект Cell будет представлен панелью Grid (таблицей 1 на 1 ячейка — это часто употребляемый способ наложить несколько слоёв элементов один на другой). Тут же жёстко задан размер ячейки — 32 на 32 устройство-независимых пикселя
61 — внутри Grid располагается эллипс (он заполнит всё пространство, то есть тоже будет 32 на 32 пикселя)
62 — зададим свойство Ellipse.Fill. Заливка представлена сложно конфигурируемым объектом, поэтому используется длинный синтаксис (элемент свойства)
63 — заливкой является объект RadialGradientBrush (круговой градиент)
GradientOrigin — центр градиента (позиция белой точки). Координаты 0.25,0.25 означают, что точка смещена вверх влево
64, 65 — задаём крайние цвета для перелива. В точке «старта» (смещение 0) цвет белый, в точке финиша (смещение 1) цвет тёмно-зелёный.
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 3:50 pm

Шаблон данных нельзя располагать в вакууме — его надо прикрепить к элементу управления, который будет заниматься визуализацией. У нас много объектов Cell, поэтому отвечать за визуализацию будет списочный элемент, например, ListBox.

ListBox для наших целей избыточен. Напомним иерархию списочных классов:



• Control — базовый класс для всех элементов управления WPF
• ItemsControl — базовый класс для всех элементов, у которых содержимое — это множество (коллекция) подчинённых элементов. (Дословно: «Control со свойством содержимого Items»).
• Selector — те элементы управления, у которых можно выбрать один или больше Item
• ListBox, ComboBox — конкретные элементы управления

Нам не понадобится то, что добавляют ListBox и ComboBox. Они добавляют свои правила визуализации (шаблон элемента), который мы собираемся заменить. Нам также не понадобится понятие SelectedItem / SelectedIndex, добавляемое классом Selector. Нам вполне будет достаточно ItemsControl.
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 3:58 pm

Для понимания дальнейшего нужны следующие 3 центральные свойства класса ItemsControl:

1) Items / ItemsSource. Это коллекция значений, хранящихся в списочном элементе. Можно хранить произвольные значения, в нашем случае — набор объектов Cell (IEnumerable<Cell>).



Разница между Items и ItemsSource такая:
• Items — обычное свойство .NET (не свойство зависимости). Открыто только для получения (get-функция без set). Можно модифицировать методами Add(), Remove(), Clear(). Нельзя заменить целиком.
• ItemsSource — свойство зависимости. Можно заменять целиком. Может участвовать в привязке данных (Binding).

2) ItemsPanel — панель, внутренне используемая ItemsControl-ом для расположения своих детских элементов, например:

• ItemsPanel задана как StackPanel (вертикальная):


• ItemsPanel задана как StackPanel (горизонтальная):


• ItemsPanel задана как UniformGrid:


3) ItemTemplate — шаблон данных (DataTemplate), применяемый к каждому элементу Item коллекции Items. Сюда нужно подставить наш шаблон.


Последний раз редактировалось: Ярослав (Чт Дек 07, 2017 4:34 pm), всего редактировалось 1 раз(а)
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 4:03 pm

Информационные классы (немного упрощённые для ясности):






avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 4:13 pm

Я собираюсь завести объект Field и привязываться к нему в разметке XAML. Поэтому хорошим местом для этого является свойство Window.DataContext:


( Важно! у меня в коде класс Field называется Board, но различия несущественные)

Шаг 1. Свойство Items

Начнём с пустого элемента ItemsControl и настроим привязку:

Здесь сказано: коллекция Items привязана к свойству Cells — плоской коллекции объектов-ячеек. Объектом-источником значения выступает DataContext, то есть объект Field (Board в моём коде).

Получаем картинку, близко не похожую на то, что надо (потому что мы ещё не подключили шаблон):

Во всяком случае, видно, что в ItemsControl отображаются объекты Cell.
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 4:20 pm

Шаг 2. Панель ItemsPanel

Настроим свойство ItemsControl.ItemsPanel:


По строкам:
13 — Грид внутри Window. Это способ разместить что-то помимо минного поля в главном окне.
14 — Наш элемент ItemsControl. Привязка Binding сохранилась с предыдущего шага.
15 — Заполняем свойство ItemsPanel. Используем длинный синтаксис, так как содержимое — это сложно настраиваемый объект
16 — В качестве содержимого для свойства ItemsPanel принимается только специальный класс ItemsPanelTemplate («шаблон панели элементов»). Внутри него надо писать собственно панель на замену стандартной.
17 — Выбираем в качестве панели UniformGrid. По-хорошему UniformGrid нуждается в привязках к свойствам Rows и Columns. (В моём примере срабатывает без них, потому что UniformGrid пытается построить свои элементы квадратиком — но это не так для поля сложности Эксперт или настраиваемой.)

На этом этапе наблюдаем такую картину:
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Ярослав в Чт Дек 07, 2017 4:31 pm

Шаг 3. Подключаем шаблон данных

Осталось заполнить свойство ItemTemplate (шаблон одного Item):



По строкам:
14 — Добавил HorizontalAlignment=Center и VerticalAlignment=Center. Если их не указывать, значения будут Stretch (растянуть), и UnifromGrid растягивается, создавая гигантские пропуски между клетками
15–19 — Без изменений
Я рисую каждую клетку в три слоя:
23 — светло-серый круг — подкладка при открытой клетке
24 — центрированный текст — цифра числа мин
25 — зелёный круг с цветовым переливом — верхний слой при закрытой клетке



Что ещё остаётся сделать:
• Добавить привязки в шаблоне к объекту Cell
• Добавить реакцию в коде в ответ на действия пользователя (нажатие мышки → Cell.IsOpen = true)
• Добавить анимацию или триггеры

Есть ещё несколько неочевидных подводных камней:

• Как WPF узнает, что свойство поменялось (и узнает ли)?
Не узнает — нужно реализовать интерфейс INotifyPropertyChanged

• Обновится ли поле, если коллекция ячеек поменяется?
Нет — нужна либо коллекция ObservableCollection, либо опять же интерфейс INotifyPropertyChanged

• Умеет ли WPF преобразовывать bool → Visibility?
Почти — надо присоединить BooleanToVisibilityConverter к Binding.
avatar
Ярослав
Admin

Posts : 346
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Спойлеры: как сделать курсовой проект

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения