Share
După cum spune titlul, vom crea un wallview inspirat de iTunes. Acest tutorial este împărțit în două părți - unul pentru designul din Blend și celălalt pentru codul din spatele Visual Studio.
Uitați-vă la această demonstrație video a rezultatului final la care vom lucra (sau doar verificați demo-ul de mai sus):
În această parte a tutorialului vom proiecta două UserControls în Expression Blend. Acest tutorial arată destul de mult din numărul de pași, dar acest lucru se datorează faptului că este foarte aprofundat; există o explicație și o captură de ecran pentru aproape fiecare clic pe care trebuie să-l faceți. Motivul pentru care l-am scris cu atâta detaliu este că colegii mei de la universitate au descoperit că Blend este prea complex și greu de folosit.
Deschideți Visual Studio și faceți clic pe "Fișier"> "Nou"> "Proiect" în bara de meniu de sus.
Selectați aplicația Silverlight Visual C # din meniu și introduceți "WallviewApp" pentru un nume de proiect în partea de jos, precum și locația pentru a salva proiectul.
După aceea, veți vedea un popup. Asigurați-vă că bifați caseta din partea inferioară și selectați Silverlight 4 din combobox.
Start Expression Blend și deschideți proiectul pe care tocmai l-am creat în Visual Studio.
Navigați la fișierul proiectului din directorul proiectului și deschideți-l.
Faceți clic dreapta pe proiectul WallviewApp din arborele proiectului și alegeți "Adăugați un dosar nou". Faceți acest lucru de două ori, sunați dosarele "usercontrols" și "image".
Faceți clic dreapta pe folderul proaspăt creat "usercontrols" și selectați "Add New item ...".
În fereastra pop-up asigurați-vă că UserControl este selectat și introduceți "image.xaml" ca nume.
Alegeți containerul StackPanel din bara de instrumente, care ar trebui să fie în partea stângă în mod implicit ...
... și a trage un dreptunghi în mijlocul LayoutRoot care a fost acolo de la început.
Asigurați-vă că StackPanel este selectat în partea stângă în panoul "Obiecte și Timeline". În partea dreaptă, veți vedea parametrii elementului selectat în prezent. Schimbați lățimea și creșteți la "Auto (0)" făcând clic pe săgețile încrucișate din dreptul câmpului de text. Aplicare orizontală la "Centru" și Aliniament vertical la "Sus". Resetați marginea făcând clic pe pictograma pătrată alăturată de lângă câmpurile de text și selectați Resetați din meniu. După aceea, setați marginea superioară la "5". Acum panoul Layout ar trebui să arate astfel și, deoarece StackPanel are o dimensiune de 0x0 pixeli, nu îl mai puteți vedea:
Mergeți mai departe și selectați containerul Grid din bara de instrumente din partea stângă (unde am selectat StackPanel înainte) și trageți un alt dreptunghi în mijlocul spațiului dvs. de lucru.
Aruncați o privire la panoul "Obiecte și Timeline" și asigurați-vă că grila se află în interiorul StackPanel. Dacă nu faceți clic și trageți-l în StackPanel.
Ajustați setările Layout în timp ce grila este încă selectată. Setați lățimea și înălțimea la "200" pixeli, alinierea orizontală și verticală la "întindere" dacă nu este deja.
Acum vom crea o frontieră. Puteți selecta ca Grid și StackPanel din Bara de instrumente din partea stângă. Desenați un dreptunghi cu Frontiera și mutați-o în Grilă dacă nu este deja.
Deschideți zona pentru perii din partea dreaptă și modificați BorderBrush la următoarea culoare: "# 0076A2F9". Apoi, setați panoul BorderThickness din panoul Aspect la "5" pixeli în toate cele patru direcții și CornerRadius la "5" pixeli. Lățimea și înălțimea trebuie să fie setate la "Auto" făcând clic pe săgețile încrucișate din dreptul casetei de text. HorizontalAlignment trebuie să fie setat la "Center" și VerticalAlignment la "Bottom":
Acum vom adăuga un Shadow Effect la graniță. Faceți clic pe butonul "Nou" din interiorul zonei Aspect, chiar lângă Efect. În fereastra viitoare selectați "DropShadowEffect" și faceți clic pe "OK".
Reglați setările de umbră care au apărut chiar sub butonul "Nou" prin setarea BlurRadius la "10" și ShadowDepth la "1":
Acum vom importa o imagine în Blend. Faceți acest lucru fie făcând clic dreapta pe dosarul numit "imagine" pe care l-am creat mai devreme și selectând "Adăugați un element existent", fie selectând dosarul și trăgând o imagine direct de pe desktop sau explorator.
După import, arborele dvs. de proiect ar trebui să arate astfel:
Pentru a folosi imaginea în control, trageți-o pur și simplu din browserul de proiect, unde l-ați importat, direct pe spațiul de lucru. După cum puteți vedea, este prea mare și într-un recipient greșit:
Pentru a repara că tragem imaginea în chenar:
Schimbați înălțimea și lățimea imaginii la "Auto", Alinierea orizontală și verticală la "Centru", Marginile la "0" și Stretch la "Uniformă" în panoul Proprietăți obișnuite:
Selectați instrumentul TextBlock din bara de instrumente din partea stângă și creați un bloc de text undeva în zona de lucru.
Apăsați tasta "ESC" de pe tastatură pentru a anula editarea textului în interiorul Blocului de Text.
Faceți clic și trageți TextBlock-ul în panoul "Obiecte și Timeline" în StackPanel pe care l-am creat mai devreme.
După aceea, schimbați Culoarea prim planului la "# FF1F1F1F" și setările Layout din partea dreaptă la următoarele valori: Lățime: "Auto", Înălțime: "Auto", HorizontalAlignment: "Center", VerticalAlignment: "Top" -Top: "8". Setați Textul la nimic marcând textul "TextBlock" și ștergându-l sau făcând clic pe pătratul alb de lângă acesta și făcând clic pe "Resetare". De asemenea, schimbați fontul textului în "Verdana":
Creați un alt TextBlock fie repetând pașii 16 și 17, fie selectând pe cel pe care l-am creat deja în panoul "Obiecte și Timeline" și apăsând pe Ctrl + C apoi pe Ctrl + V pentru al duplica. Singurul lucru pe care trebuie să-l facem diferit de pasul 17 este că nu vrem să fie setată nicio marjă. Dacă ați făcut metoda duplicat, ați setat marginea superioară la "0" sau faceți clic pe pătratul alb alături de ea și resetați marginea:
Pentru a putea lucra cu elementele pe care le-am creat până acum, trebuie să le oferim nume. Deci, mergeți mai departe și redenumiți TextBlock-ul în partea inferioară a paginii "imgDate" fie făcând clic încet de două ori, fie făcând clic dreapta și selectând "redenumiți". Schimbați numele celuilalt TextBlock la "imgName", Imaginea la "img", Border to "imgBorder" și Grid la "imgSize". Acum am terminat cu designul acestui control și ierarhia dvs. ar trebui să arate astfel:
Iar designul ar trebui să arate astfel:
Desigur, nu puteți vedea cele două TextBlock-uri în proiectul dvs. de când le-am setat textul la nimic, cu câțiva pași mai devreme.
Eu personal las numele de Blocuri de text, atâta timp cât am nevoie de ele pentru a obține de proiectare făcut înainte de a le elimina. În acest fel, puteți controla dacă totul este la locul potrivit.
Dacă doriți să aruncați o privire la codul pe care tocmai l-am generat faceți clic pe pictograma "< >"în mijlocul vârfului barei de parcurgere dreapta a zonei de lucru. Pentru a reveni la vizualizarea designului, faceți clic pe pictograma din partea de sus.
Codul nostru arată astfel:
Asigurați-vă că reveniți la vizualizarea de proiectare.
Creați un alt UserControl în folderul "usercontrols" făcând clic dreapta pe dosar și selectând "Add New Item" din meniu.
Din meniul de selectare selectați "UserControl" și pentru numele introduceți "wallview-img.xaml":
Alegeți containerul ScrollViewer din Bara de instrumente din stânga ...
... și desenați un dreptunghi cu el în spațiul de lucru.
În timp ce ScrollViewer este selectat, inspectați zona Perii din partea dreaptă și schimbați BorderBrush la "No Brush".
Setați valoarea BorderThickness la "0" pentru toate cele patru direcții, alinierea orizontală și verticală la "întinde", marginea de top la "29" și celelalte margini la "0". De asemenea, controlați dacă Lățimea și Înălțimea sunt pe "Auto" făcând clic pe săgețile încrucișate. Extindeți în continuare zona de dispunere făcând clic pe săgeata mică și setați toate cele patru direcții de împingere la "0":
Selectați StackPanel din bara de instrumente din stânga ...
... și să creeze un StackPanel în mijlocul ScrollViewer.
Selectați StackPanel dacă nu este deja din panoul "Obiecte și Timeline", apoi faceți clic pe butonul "Solid Color Brush" din zona Perii (este cel de-al doilea din stânga, chiar lângă "No Brush") și setați culoarea de fundal la "# FFB8B8B8". Mai mult, modificați alinierea orizontală și verticală la "Stretch", verificați dacă lățimea și înălțimea sunt setate la "Auto" și dacă marginile sunt toate "0":
Alegeți Containerul de rețea din Bara de instrumente și creați o rețea.
Dacă ați creat-o în interiorul StackPanel, trageți-o și plasați-o în LayoutRoot-Grid:
Schimbați înălțimea grătarului la "30" pixeli și lățimea la "Auto". Aplicarea orizontală la "Stretch", Alinierea verticală la "Sus" și marginea la (-1, -1, -1, 0) pentru (stânga, partea de sus, dreapta, partea de jos):
Selectați instrumentul Rectangle din partea stângă, care este deasupra containerelor pe care le-am folosit de mai multe ori deja ...
... și trageți o cutie în zona de lucru.
Deplasați dreptunghiul în grilă pe care am creat-o în pasul anterior:
Schimbați culoarea de umplere a dreptunghiului la "# FF4E4E4E":
Și culoarea Accident vascular cerebral la "# FF1F1F1F":
Setați înălțimea și lățimea la "Auto", orizontală și verticală în poziția "Stretch" și resetați marginea dacă există:
Acum creăm un StackPanel și îl mutăm în Grid:
Schimbați parametrii StackPanel la următoarele: Lățimea și înălțimea la "Auto", Orientare la "Orizontal", HorizontalAlignment la "Stânga", VerticalAlignment la "Center" și marginea-stânga la "10":
Selectați butonul din bara de instrumente ...
... și să creeze un buton undeva în zona de lucru.
Apoi trageți-l în StackPanel pe care tocmai l-am creat:
Setați lățimea și înălțimea butonului la "Auto", HorizontalAlignment la "Stretch", VerticalAlignment la "Center", Margini dacă există "0", Conținutul pentru "All Albums" ușor mai bun) și fontul "Verdana":
Selectați butonul și apăsați Ctrl + C, Ctrl + V pentru a copia și lipi butonul în același StackPanel, apoi Schimba marginea-stânga la "5" și Conținutul la "Album curent":
Selectați StackPanel cu cele două butoane din el din panoul "Obiecte și Timeline" și apăsați CTRL + C, CTRL + V pentru a duplica și el. Ierarhia ar trebui să arate astfel:
Selectați StackPanel duplicat dacă nu ați făcut-o deja, schimbați HorizontalAlignment la "Right" și setați toate Marginile la "0" cu excepția celui pe care l-ați setat la "10" pixeli.
Selectați unul din butoanele din StackPanel duplicat și modificați conținutul acestuia la " < " if you selected the left one and to " > "pentru cea potrivită. Acum avem două butoane cu un simbol săgeată care va fi ulterior folosit pentru navigare.
Selectați Slider-Tool din Bara de instrumente și creați un cursor în spațiul de lucru.
Apoi glisați și fixați-o în partea de sus a StackPanel inferior:
Selectați cursorul și ajustați-l la următoarele setări:
Și sub proprietăți comune:
Ca și în imaginea UserControl pe care am creat-o mai devreme, vom redenumi elementele de care avem nevoie mai târziu. De jos în sus: Buton: "btnNext", Buton: "btnPrev", Glisor: "cursor", săriți butonul StackPanel, butonul: "btnCurrentAlbum", butonul: "btnAllAlbums", săriți următorii elemente până la StackPanel din ScrollViewer. Redenumiți faptul că StackPanel este "conținut". Ierarhia ar trebui să arate astfel:
Acesta este modul în care trebuie să apară acum UserControl "wallview-img":
Acesta este modul în care apare codul xaml pentru UserControl "wallview.img.xaml":
Blend este un instrument excelent pentru a construi modele frumoase și animații. Puteți chiar să scrieți întregul cod în Blend, dar prefer să folosesc Visual Studio deoarece este mai puternic, are un program de depanare și un IntelliSense mai bun pentru propuneri și pentru completarea automată.
În a doua parte a acestui tutorial vom scrie întregul cod în urmă pentru cele două UserControls din C #, precum și propria noastră webservice care aduce fiecare imagine dintr-un anumit folder în wallview.
Din moment ce acesta este primul meu tutorial, sper că ți-a plăcut să lucrezi prin ea și ai învățat ceva util. Pentru orice comentarii, sugestii sau preocupări, lăsați o notă în secțiunea de comentarii.
Vă mulțumim pentru lectură!
Procesul de 30 de zile al lui Blend
O introducere în Microsoft Silverlight 4 - Blend
Accentsconagua