, skabe en wallview for billeder med silverlight: kode,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, velkommen til den anden del, for at skabe en itunes inspireret wallview.i denne del, vi skal skrive det hele koden i c&#for de to usercontrols, at vi skabte med udtryk blanding i de foregående tutor.,,,, endelige resultat forpremiere, tage endnu et kig på videoen demo af endelige resultat, vi arbejder hen imod (eller bare se web - baseret demo ovenfor):,,, trin 1: åbne projektet, åbne visuelle studie og klik på "journal" > "åbne" > "projekt - /løsning" på menuen bar., så kigge til projektet oprettede vi i første del af denne forelæsning.vi kaldte det "wallviewapp".,, trin 2: åbne c&#dokumenter, på den højre side af visuelle studie er løsningen her ved misligholdelse.her kan du se hver fil fra projektet.- luk bare to *. cs files "image. xaml. cs" og "wallview img. xaml. cs" fra de to usercontrols vi har skabt i de tidligere lektion i blandinger samt "mainpage. xaml. cs", som har givet automatisk.,, når de har åbnet disse tre sager, - kan se, at alle tre kategorier er helt tom.,, trin 3: billede klasse erklærer variabler, lad os starte med kodning billedet klasse.vær sikker på, at du er i færd med at redigere "image. xaml. cs" fil og tilføje følgende erklæringer over konstruktøren "offentlige image()": offentlige bool udvalgte private dobbelt defaultsize; private wallview_img wallview; private solidcolorbrush colordefault, colorselected;,, trin 4: billede klassen skrive konstruktør, nu skal vi - producenten, der har to parametre: a bitmapimage og en snor.desuden den tidligere erklæret variabler er igangsat, parametrene fra entreprenøren henføres til kilden til "img" og teksten til "imgname" textblock.vi protesterer også en eventhandler for mouseleftbuttondown tilfælde af "img": offentlige image (bitmapimage src, snor navn) (//, der kræves for at aktivere variabler initializecomponent(); udvalgte = falske defaultsize = 200; colordefault = nye solidcolorbrush (farve. fromargb (0x00, 0x76, 0xa2, 0xf9)); colorselected = ny solidcolorbrush (farve. fromargb (0xff, 0x76, 0xa2, 0xf9)); this.img.source = src, this.imgname.textalignment = textalignment. center. this.imgname.text = navn; this.imgdate.textalignment = textalignment. center. this.img.mouseleftbuttondown + = nye mousebuttoneventhandler (image_mouseleftbuttondown)}, parameter bitmapimage understreges med en rød farve, fordi visuelle studie kan ikke finde navnetempo.at fastsætte det bare klik ordet bitmapimage og en lille blåt rektangel skal anføres under bogstavet b:,, når du flytter din mus i de små rektangel en menu, kommer ud.klik på "ved hjælp af systemet. vinduer. medier. billeddannelse":,, visuelle studiet ved, at namespace og røde understrege, vil forsvinde.,, løntrin 5: billede gruppekoden nogle metoder, når producenten skal vi skrive nogle metoder, som vi får brug for det senere.de metoder, der er ingen beskrivende fra deres metode navne., image_mouseleftbuttondown, er tilfælde fører til, mouseleftbuttondown, tilfælde af "img", at vi er registreret i den pågældende.den grundlæggende kontrol, hvad der sker, når du klikker på billedet, afhængigt af dets status (hvad enten det er udvalgt eller ikke), offentlige eller setwallview (wallview_img samarbejde) (wallview = samarbejde;} offentlige tomrum changesize (dobbelt newsize) (this.imgname.width = defaultsize * newsize; this.imgsize.width = defaultsize * newsize; this.imgsize.height = defaultsize * newsize;) offentlige tomrum unselectimage() (udvalgte = falske this.imgborder.borderbrush = colordefault;} offentlige tomrum selectimage() (udvalgte = sandt. this.imgborder.borderbrush = colorselected;} private tomrum image_mouseleftbuttondown (objekt afsender, system.windows.input.mousebuttoneventargs e) (wallview.imageselected = sandt.hvis (wallview.ctrlpressed = = sand) (hvis (udvalgte = = sand) unselectimage(); andre selectimage();} andre (wallview. unselectallimages(); selectimage();} e håndteres = sandt.}, nu er vi færdige med det billede, klasse.skal du ikke bekymre dig om den røde understregede dele i din kode.disse variabler og metoder eksisterer ikke endnu, og det er derfor, visuelle studie kender dem ikke, men vi vil ændre det snart.,, trin 6: wallview img klasse erklærer variabler, for vi er færdige med det billede, klasse åben "wallview img. xaml. cs" dokument.ved første skriver anmeldelser af variabler, lige over konstruktøren "offentlige wallview_img()": offentlig liste < image > imagelist; private liste < stackpanel > paneldeltager offentlige bool ctrlpressed, imageselected; private dobbelt defaultsize, changesize; ligesom før med bitmapimage visuelle studie ikke kender namespace af liste.at ordne det, som før, klik på en af listerne, så på blåt rektangel og udvælge "ved hjælp af systemet. samlinger. generisk" fra menuen:,, trin 7: wallview img - kode konstruktør, tilføje følgende kode, som initializes tidligere erklæret variabler, registre, nogle begivenheder og deaktiverer knapper i sejlads bar: offentlige wallview_img() (//, der kræves for at aktivere variabler initializecomponent(); ctrlpressed = falske imageselected = falske imagelist = nye liste < image > c); paneldeltager = nye liste < stackpanel > c); defaultsize = 200; changesize = 1; //registrering af alle de begivenheder, mouseleftbuttonup + = nye mousebuttoneventhandler (wallviewmouseleftbuttonup); sizechanged + = nye sizechangedeventhandler (resizescrollviewer); keydown + = nye keyeventhandler (keydownevent); keyup + = nye keyeventhandler (keyupevent); this.slider.valuechanged + = nye routedpropertychangedeventhandler < dobbelt > (slidervaluechanged); //knapper. vi har ikke brug for endnu this.btnallalbums.isenabled = falske this.btncurrentalbum.isenabled = falske this.btnnext.isenabled = falske this.btnprev.isenabled = falske}, trin 8: wallview img - klassen skrive de metoder, tilføje følgende metoder under de pågældende.den bemærkning, før hver enkelt metode forklarer, hvad metoden gør: //tilføjer et billede til imagelist og opfordrer resizeimages(), som dybest set er det det sidste stackpanel offentlige tomrum addimage (billede img) (img.imgname.width = 200; img. setwallview (dette). imagelist. der tilsættes (img); resizeimages();} //. hele trukket indhold, hvert panel, albumlist og paneldeltager offentlige tomrum clearlists() {imagelist. clear(); for hvert (stackpanel x i paneldeltager) (x.children. clear();}. indhold. børn. clear(); medlem. clear();} //regner på, hvor mange stackpanels = rækker for offentlige tomrum updatepanels() (hvis (imagelist.count >, 0) (for hvert (stackpanel spi paneldeltager) sp.children. clear(); medlem. clear(); dobbelt gridwidth = 0, hvis (this.content.actualwidth = = 0) gridwidth = 800; andre gridwidth = this.content.actualwidth; int gridwidthint = konvertere. toint32 (gridwidth); int imageamount = imagelist. tæl; int imagemargin = 10; int imagewidth = konvertere. toint32 (defaultsize * changesize); int imagesize = imagewidth + 2 * imagemargin; dobbelt ratio = gridwidth /(dobbelt) imagesize; int ratioint = konvertere. toint32 (forhold); hvis (ratioint - ratio > 0) ratioint - = 1; int newimagemargin = ((gridwidthint - ratioint * imagewidth) /ratioint) /2; dobbelt panelamountdouble = (dobbelt) imageamount /ratioint; int panelamountint = (int) panelamountdouble; hvis (panelamountdouble - panelamountint > 0) panelamountint +; hvis (panelamountint < 1) panelamountint = 1; int x = 0; int (i = 0, - < panelamountint; jeg + +) (stackpanel panel = nye stackpanel(); panel. orientering = orientering. vandret panel. margen = nye tykkelse (0, 5, 0, 0) for int (j = 0 j < ratioint; j + +) (hvis (x < imageamount) (imagelist [x]. margen = nye tykkelse (newimagemargin, 0, newimagemargin, 10); imagelist [x]. changesize (changesize); imagelist [x]. setwallview (det) panel. børn. der tilsættes (imagelist [x]);} x +;} paneldeltager. der tilsættes (panel)}}} //vælger alle billeder, bliver kaldt, da ctrl + er presset offentlige tomrum selectallimages() (for hvert (som jeg i imagelist). selectimage();} //unselects alle iamges offentlige tomrum unselectallimages() (for hvert (som jeg i imagelist). unselectimage();} //bliver kaldt, når en værdi ændres private tomrum resizeimages() {updatepanels() this.con;telt. børn. clear(); for hvert (stackpanel sp i paneldeltager). indhold. børn. der tilsættes (sp)) //- metoden bliver kaldt af de offentlige slidervaluechanged omstændigheder ugyldig changeimagesize (dobbelt newsize) (changesize = newsize; resizeimages();}, trin 9: wallview img klasse eventhandlers i dette skridt, vi skriver den nødvendige tilfælde står for de hændelser, der er registreret i den pågældende tidligere: //eventhandler, når de slider bliver ændret private tomrum slidervaluechanged (objekt afsender, system. vinduer. routedpropertychangedeventargs < dobbelt > e) (changeimagesize (. slider. værdi);} //eventhandler, der bliver kaldt, da den windowsize ændringer private tomrum resizescrollviewer (objekt afsender, system. vinduer.izechangedeventargs e) (resizeimages();} //eventhandler, at unselects alle billeder, når du ikke klik et billede. wallviewmouseleftbuttonup (objekt afsender, mousebuttoneventargs e) (hvis (!imageselected) unselectallimages(); andre imageselected = falske} //eventhandler til presning nøgler private tomrum keydownevent (objekt afsender, system.windows.input.keyeventargs e) (hvis (e.key = = nøgle. ctrl) ctrlpressed = sandt; andre, hvis (e.key = = nøgle. a) hvis (ctrlpressed) selectallimages();} //eventhandler for frigivelse af nøgler private ugyldige keyupevent (objekt afsender, system.windows.input.keyeventargs e) (hvis (e.key = = nøgle. ctrl) ctrlpressed = falske}, nu er vi færdige med den, wallview img, klasse.lad os fortsætte med at skabe en webservice, som vi får brug for den, mainpage, klasse, gå 10: skabe en webservice, webservice, at vi skal skrive det dybest set giver os de billeder fra en mappe.for at skabe en webservice right-click "wallviewapp. web" i opløsningen opdagelsesrejsende i højre side af visuelle studie og udvælge "tilføjes" > "nyt" fra menuen:,, fra pop - up - vælg "silverlight mulighed for wcf service visuelle c #" ind i "wcf. svc" for et navn. så tryk på "tilføjes":,, som du kan se, vi fik en anden klasse, som hedder wcf med sin egen kode dokument, "wcf. svc. cs".,, trin 11: wcf gruppekoden to metoder, tilføjes følgende to metoder i wcf klasse under den linje, hvor der står "//tilføje mere operationer her og mark med [operationcontract]": //metode for at få sagen navne i en folder [operationcontract] offentlige snor [] getfilenames (string dir) (prøve (st.ring tmp = httpcontext. nuværende. anmodning. mappath (db); tilbage fortegnelse. getfiles (@ tmp "* jpg)} fangst (undtagelse) {tilbage.;) //- metode, der vender tilbage til datoen for oprettelse af en fil eller folder [operationcontract] offentlige snor getfiledates (string - fil, int -) (tilbage. tostring() +" - "+ fil. getlastwritetime (fil). tostring();}, fastsætte de manglende namespaces, som vi gjorde tidligere, ved at klikke på de berørte navne, da på blåt rektangel og" import "eller ved at tilføje disse to linjer manuelt på toppen af dokumentet. ved hjælp af systemet. net; anvendelse af systemet. io;,, trin 12: service - del 1, for at være i stand til at udnytte de webservice vi er nødt til at tilføje en tjeneste, henvisning til det vigtigste projekt.før vi kan klare dette, er vi nødt til at bygge projektet.derfor klik på "bygge" fra menuen på toppen af visuelle studie - og efter, at "bygge wallviewapp":,, trin 13: service - del 2, efter at bygge lykkes, right-click "wallviewapp" på den rigtige side i opløsningen opdagelsesrejsende og vælge "tilføje service reference" fra menuen.,, trin 14: service - del 3 i den kommende pop - up - klik på knappen "opdagede" ind i "wcfref" i namespace område, så klik på "okay":, uden at bygge projektet, før de prøver at tilføje en tjeneste - - ville have fået denne fejlmelding:,, trin 15: mainpage klasse erklærer variabler, åbne "mainpage. xaml. cs" fil og tilføje følgende linjer kode over konstruktøren ", offentlige mainpage()": private wcfref.wcfclient client; private snor imagedir = "/image /" offentlige wallview_img wvi; private int amountimages;, trin 16: mainpage klasse program konstruktør, konstruktøren af, mainpage, ser sådan her ud.vi nulstille erklæringer fra de foregående trin, registrere webservice er eventhandlers og tilføje, wallview_img, der hedder ", wvi" til, nettet ", layoutroot" af, mainpage: offentlige mainpage() {initializecomponent(); amountimages = 0 klient = nye wallviewapp. wcfref. wcfclient(); client.getfilenamescompleted + = nye eventhandler < wallviewapp. wcfref. getfilenamescompletedeventargs > (client_getfilenamescompleted); klient. getfilenamesasync (imagedir); client.getfiledatescompleted + = nye eventhandler < wallviewapp. wcfref. getfiledatescompletedeventargs > (client_getfiledatescompleted); wvi = nye wallview_img(); dette. layoutroot. børn. der tilsættes (wvi)}, skridt 17: kode for den eventhandlersden webservice, tilføjes følgende to eventhandlers og metode under konstruktøren af mainpage. ", client_getfilenamescompleted()" bliver en række betingelser, der bliver tilbage af det webservice.systemet er omregnet til særskilte tråde, hvorfra filnavn ekstraheres. ved, localhost, adresse, den havn, det billede, fortegnelse, og filnavn, bygger vi en uri, kaldet "src".så, uri, anvendes til at skabe en ny, bitmapimage "bmi", der er nødvendig for at skabe et nyt image "tmp".billedet "tmp" så bliver føjet til, wallview_img "wmi.", efter den metode, der returnerer oprettelsesdatoen for en fil er kaldt sammen med et andet nummer.uanset denne metode afkast bliver behandles af kontaktperson "client_getfiledatescompleted()".da en snor i det format, der er > 2-18.02.2009 12:32:23 er vendt tilbage fra de webservice, vi skal dele af disken nummer i begyndelsen, og datoen i midten.,, når denne procedure er afsluttet, for den endelige dato ligner > 18.02.2009 og er tilknyttet, textblock "imgdate" den tilsvarende billede.,, //tilfælde fører til, at filenames fra mappen private tomrum client_getfilenamescompleted (objekt afsender, wallviewapp.wcfref.getfilenamescompletedeventargs e) (hvis (e.result!= null) (for hvert (snor i e.result) (int pos = s.lastindexof (")."); snor filnavn = s.substring (pos + 1); int havn = application.current.host.source.port; uri src = nye uri (http: //////////////localhost: "+ havn + imagedir + filnavn); bitmapimage bmi = ny bitmapimage (src); image tmp = nyt image (bmi, filnavn). wvi. addimage (tmp); amountimages +; getfiledate (s, amountimages - 1) andet (messagebox. (se" vendte tilbage for i sager afsluttet ")) //- metode, der kalder webservice asynch med en filepath snor og en række, så vi kan røve den returnerede dato- til et bestemt billede igen private tomrum getfiledate (snor, int) {. klient. getfiledatesasync (s).} //tilfælde fører til, at filedates private tomrum client_getfiledatescompleted (objekt afsender, wallviewapp.wcfref.getfiledatescompletedeventargs e) (hvis (e.result!= null) (string dt = e. resultat; int antal = konvertere. toint32 (dt. fjerne (dt. lastindexof ("-")); snor dato = dt. fjerne (dt. lastindexof (""); hvis (< 10 - dato) = dato. fjerne (0, 2); andre, hvis (< 100) dato = dato. fjerne (0, 3); anden dato = dato. fjerne (0, 4). wvi. imagelist [antal]. imgdate.text = dato} andre (messagebox. (se "vendte tilbage for i går afsluttede");), som i den anden kilde filer attributterne namespace "bitmapimage" findes ikke.for at reparere denne klik blåt rektangel og import til det, da du faldt i teksten, bitmapimage, eller tilføje følgende linje til toppen af dokumentet manuelt ved hjælp af systemet. vinduer. medier. billeddannelse,,, gå 18: gennemføre projektet, gå videre og gennemføre projektet for at se, om det fungerer.du kan gøre det enten ved presning "15" på dit tastatur, ved at trykke på knappen med en typisk "spille" ikon under menu øverst på ikonet bar eller ved udvælgelsen af angivelsen "start debugging -" i "ser" submenu fra menuen på toppen af visuelle studie:,, din browser åbner, og de vil få denne fejlmelding:,, hvad er problemet?vi fortalte webservice se mappen "http: //////////////////////localhost: havn image" * jpg - filer og naturligvis hverken den mappe, og heller ikke nogen billeder i den mappe, findes endnu.,, skridt 19: forberede image mappe, sejle til projektet fortegnelse med dine vinduer opdagelsesrejsende.for mig er det følgende kurs:,, åbne mappen "wallviewapp. web" og skabe en ny folder kaldet "image" i.,, luk mappen "image" og pasta en * jpg billeder i.,, gå 20: gennemføre projektet igen, når du har lagt en et par billeder inde i billedet mappe enten presse genopfriske i din webbrowser (hvis det stadig er åben) eller blot gennemføre projektet igen ved at trykke "f5" nøglen i visuel studie.som følge heraf bør du se vores endelige wallview:,, så du kan påvirke størrelsen af de viste billeder med slider i navigation bar.,, at sige, at vi er færdige for i denne forelæsning, og jeg håber, at du nød det og har også lært noget. den omtrentlige samlede tid det tog mig at udvikle denne fra begyndelsen var ca. 20 timer.den wallview for plader, som du kan se i den video under tog omkring 15 timer og 10 timer til at kombinere de to wallview typer.du kan spørge sig selv, hvad de er i stand til at vælge en eller flere billeder.lige nu er den funktion er ubrugelig, men jeg kan forestille mig, at tilføje muligheden for at starte et slideshow eller skabe en liste fra udvalgte billeder, f.eks.og hvis du undrer sig over, hvorfor vi tilføjede knapper "plader", "nye plade," "<" og ">" i den sejlads, bar men aldrig brugt dem... min hensigt er at udvikle en forelæsning, der automatisk genererer fotoalbums baseret på filenames af billeder.naturligvis, at ministeriet vil udvide projektet fra lektion du netop afsluttet her.jeg ville gerne gøre det, hvis det er populære hos publikum.for at få et indtryk af, hvad wallview for billeder, som vi har lige skabt ville se ud i kombination med en wallview for fotoalbum, tage et kig på følgende video:,, for eventuelle bemærkninger, forslag eller bekymringer, læg en seddel i kommentarfeltet.tak for det!,