Това е първият ми пост в още топлия ми иначе блог, в който честно казано доста се чудих какво да напиша – хем да е полезно, хем да е интересно, че и на всичкото отгоре съдържателно! Мислих мислих няколко дни, но изведнъж като спрях да мисля (трудно е, повярвайте) идеята сама ме сполетя: Как да си направим собствен темплейт за 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 вляво)
. Първо трябваше да измислим това цялото нещо в какво ще го напъхаме, какви контроли да използваме и чак тогава да мислим как да го направим да изглежда така – всъщност в последствие разбрах, че спокойно можеш да процедираш и отзад – напред. Яко, а? Разбира се темплейта за всяка една контрола мога да го разцъкам в отделен пост, но мисля, че чекбокса е добро начало, заради няколко неща, които ще споделя по-надолу.
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 май беше дължината… не съм сигурен обаче за последното 😀 Ааа..оказа се, че това животно е и case-sensitive 😀 Венци Щерев ги поразучи повече, мисля че той може да е моят „1 човек, който може да разбере“ Data-та ! В примера си MSDN рисуват един хикс вместо тикче.
Е тука идва Expression blend-a! Чудих се как да направя тая дата да ми рисува тикче – ами сядаш, отваряш го тоя Blend и рисуваш един бордър, вътре слагаш един ректангъл, добавяш му точки и почваш да си го връткаш както си искаш – в зависимост какво искаш да рисуваш, в моя случай беше тикче. Накрая отваряш XAML кода, виждаш какво ти е генерирал Blend и го пействаш в темплейта. Eто и линк към нещото, което аз направих като код:
Ето и получената checkbox контрола: 