Backgammon v1.00 – UI – Part 1

Хм..вчера реших да започна работа по една игричка, досега не съм правил нещо подобно и затова ми се стори доста интересно. Тъй като е лято и всички знаем, че е най-добре на плажа с бира/мента/мастика (може и 3-те) в ръка, един топъл гъз до другата (по желание не вашия, а нечий противоположнополов) и приятна компания, с която да разцъквате било то бридж, шах или табличка, е точно последното ме вдъхнови да започна работата по тая игричка..а именно Backgammon – нали е модерно да лафим на английски… Та засега съм направил само UI частта, и се надявам да не съм я зас*ал (думата не е „заспал“) до такава степен, че да не мога да й имплементна и грам логика, след което естествено мисля да й бутна някакви анимации – поне в началото ще са супер интересни на потребителя.

Играта я пиша на WPF. А ето и снимка докъде съм я докарал, финалния код (XAML + C#) ще постна в Part 2 на този пост, тъй като съм сигурен, че ще има доста промени още.

Backgammon

Backgammon

Any ентусиасти, ако има да се включат, нека драснат ;)

Double Linked List

Днес мисля да постна малко чист C# код, а именно имплементация на структурата от данни двойно-свързан списък.

Node<T> класът

Да започнем с Node<T> класът или иначе казано какви обекти ще има нашият DoubleLinkedList.

Node class

Полетата next и prev ни трябват, за да пазим връзката между следващия и предходния елемент от свързания списък – нали е двойно свързан, би трябвало да можем да го обхождаме и наобратно ;)

public class DoubleLinkedList<T>

Единствените полета, които са ни нужни в класа + пропъртито Size, което ни връща големината на нашата структура, конструктурът не представлява нищо особено:

DoubleLinkedList class

Сега нека пристъпим към по-интересната част…

Прибавяне на елемент в началото и в края на списъка

В началото на списъка:

В края на списъка:

Индексиране

Естествено, бихме искали да можем да достъпваме нашите елементи в списъка по индекс – нещо, което не е възможно при обикновения свързан списък. Ето как изглежда и кода:

Използваме и два метода, които сме си написали, които сме изнесли в такива, за да си спестим по-нататъчно писане на един и същ код, което не спазва конвенциите за Качествен програмен код. Ето ги и тях:

и остана да реализираме вмъкване на елемент на определена позиция:

InsertAt метод

Actually…where is the code?!

Тъй като приложих самия код на картинки, а никъде не описах някакъв тестов клас, който да провери действието на нашата структура, ето и линкове към кода на DoubleLinkedList класа и тестовия клас.

Как да си стайлнем Checkbox control template

Това е първият ми пост в още топлия ми иначе блог, в който честно казано доста се чудих какво да напиша – хем да е полезно, хем да е интересно, че и на всичкото отгоре съдържателно! Мислих мислих няколко дни, но изведнъж като спрях да мисля (трудно е, повярвайте) идеята сама ме сполетя:  Как да си направим собствен темплейт за checkbox контрола на XAML?

Честно казано чак ей така да ме сполетя не е точно казано, а по-скоро си дойде съвсем нормално след като разбрах какво можеш да правиш с Expression Blend 4 на Microsoft…или по-скоро 1-2% от това какво можеш да правиш В интерес на истината това мое „запалване“ (ако мога така да се изразя, ама що да не мога – нали блога си е мой) по XAML дойде от 2-седмичния интензивен курс по този Markup Language, който посещавах в Telerik Software Academy.

Малко за курса

Още на първата лекция с Дончо, нещата започнаха да изглеждат, така сякаш май ще са интересни, с оглед на това, че последната задача от първото домашно  беше да направиш едно слабо подобие на Spaceship игра, стил края на 80-те, началото на 90-те. Което ме подсеща, че мисля да блогна и за нея, но след като направя едни много яки модификациики – ще стане доста по-забавна. Накрая на самия курс, дойдоха двама пича от Телерик, които работят като Front-End Developer-и там (апропо, големи пичаги) и започнаха да показват що е то Expression Blend-a или по-скоро как да не мразиш XAML и да не се налага да пишеш по няколко хиляди реда код на ръка (все пак това не е чисто C  - един приятел пише на него…ужас!)..та..отплеснах се малко, май – обещавам това да е само в тоя пост и да отсъства в следващите.

Каква беше задачата?

Якото беше, че ни поставиха много добра практическа задача, а именно да направим един бял прозорец да прилича на Телеришкия Control Panel (screenshot-a вляво)Telerik Control Panel. Първо трябваше да измислим това цялото нещо в какво ще го напъхаме, какви контроли да използваме и чак тогава да мислим как да го направим да изглежда така – всъщност в последствие разбрах, че спокойно можеш да процедираш и отзад – напред. Яко, а? Разбира се темплейта за всяка една контрола мога да го разцъкам в отделен пост, но мисля, че чекбокса е добро начало, заради няколко неща, които ще споделя по-надолу.

The Checkbox Template

Търсих доста информация в интернет за това как да стайлнем чекбокс, и по-скоро самото квадратче на чекбокс-а, но никъде неможах да намеря супер свястно описание, и затова реших да напиша едно такова – куул, а?:)

Как започнах? Отворих MSDN-а и видях примера там – в интерес на истината става, да, ама кво ще реча според вас – Data=“M0.45370397,2.9789081 L4.8584409,5.1201844 L9.0095177,0.42685521 L9.0092859,5.1932764 L5.0808349,8.7450323 L0.49096614,6.3567581 z“? Е тая дата направо е нямам думи. Всъщност тя е пропърти на контролата Path, която използваме за да укажем какво аджеба да се изрисува върху checkbox-a примерно като го цъкнем. Не мисля, че някой нормален човек може да разбере съдържанието й Или както каза Калин – „Познавам само 1 човек, който може“. Единственото, което разбрах е, че M e начало на точка, L май беше дължината… не съм сигурен обаче за последното :D Ааа..оказа се, че това животно е и case-sensitive :D Венци Щерев ги поразучи повече, мисля че той може да е моят „1 човек, който може да разбере“ Data-та ! В примера си MSDN рисуват един хикс вместо тикче.

Е тука идва Expression blend-a! Чудих се как да направя тая дата да ми рисува тикче – ами сядаш, отваряш го тоя Blend и рисуваш един бордър, вътре слагаш един ректангъл, добавяш му точки и почваш да си го връткаш както си искаш – в зависимост какво искаш да рисуваш, в моя случай беше тикче.  Накрая отваряш XAML кода, виждаш какво ти е генерирал Blend и го пействаш в темплейта. Eто и линк към нещото, което аз направих като код:

Ето и получената checkbox контрола: Полученият резултат