Create en Wallview for bilder med Silverlight: Code
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Velkommen til den andre delen av å lage en iTunes-inspirert Wallview. I denne delen skal vi skrive hele koden i C # for de to UserControls at vi opprettet med Expression Blend i forrige tutorial.
Endelig resultat Forhåndsvisning
Ta en titt på videoen demo av endelige resultatet vi skal jobbe mot (eller bare sjekke ut web-basert demo ovenfor) :
Trinn 1: Åpne Prosjekt
Åpne Visual Studio og klikk på "File" > "Open" > "Prosjekt /løsning" i menylinjen.
Så bla til prosjektet vi skapte i den første delen av denne opplæringen. Vi kalte det "WallviewApp".
Trinn 2: Åpne C # Dokumenter
På høyre side av Visual Studio Solution Explorer som standard. Her kan du se alle filene fra prosjektet. Gå videre og åpne de to * .cs filer "image.xaml.cs" og "wallview-img.xaml.cs" fra de to UserControls vi opprettet i forrige tutorial i Blend samt "MainPage.xaml.cs" som fikk gitt automatisk
Når du har åpnet disse tre filene du kan se at alle tre klassene er ganske tom
Trinn 3:.. image Class Erklærer Variabler
La oss starte med koding bildet klassen. Sørg for at du holder på å redigere "image.xaml.cs" fil og legge til følgende erklæringer rett ovenfor konstruktøren "offentlig image ()":
offentlig bool valgt; private double defaultSize; privat wallview_img wallview; privat SolidColorBrush colorDefault, colorSelected;
Trinn 4: image Class Skriv Constructor
Nå har vi tenkt å programmere konstruktøren som har to parametere: en BitmapImage og en String. Videre vises til den tidligere variabler er initialisert, parametrene fra konstruktøren er tilordnet kilden til "img" og teksten i "imgName" Textblock. Vi registrerer også en Event for MouseLeftButtonDown tilfelle av "img":
offentlige bildet (BitmapImage src, String navn) {//Nødvendig å initial variabler InitializeComponent (); valgt = false; defaultSize = 200; colorDefault = new SolidColorBrush (Color.FromArgb (0x00, 0x76, 0xA2, 0xF9)); colorSelected = new SolidColorBrush (Color.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 + = new MouseButtonEventHandler (image_MouseLeftButtonDown);}
Para BitmapImage er understreket med en rød farge fordi Visual Studio ikke finner navnerom. For å fikse det bare å klikke på ordet BitmapImage og en liten blå firkant skal vises under bokstaven B:
Når du beveger musen over det lille rektangelet en rullegardinmeny vises. Klikk på oppføringen "Bruke System.Windows.Media.Imaging;":
Nå Visual Studio vet at namespace, og den røde understrekingen vil forsvinne
Trinn 5: image Class. Kode Noen Metoder
Rett etter konstruktøren vi kommer til å skrive et par metoder som vi vil trenge senere. Metodene er ganske selv beskrivende fra sine metodenavn. image_MouseLeftButtonDown er hendelsesbehandling av MouseLeftButtonDown tilfelle av "img" som vi registrerte i konstruktøren. Den styrer egentlig hva som skjer når du klikker på bildet, avhengig av dens status (om det allerede er valgt eller ikke):
public void setWallview (wallview_img wv) {wallview = wv;} public void changeSize (dobbel newsize) {dette .imgName.Width = defaultSize * newsize; this.imgSize.Width = defaultSize * newsize; this.imgSize.Height = defaultSize * newsize;} public void unselectImage () {valgt = false; this.imgBorder.BorderBrush = colorDefault;} public void selectImage () {valgt = true; this.imgBorder.BorderBrush = colorSelected;} private void image_MouseLeftButtonDown (objekt avsenderen, System.Windows.Input.MouseButtonEventArgs e) {wallview.imageSelected = true; if (wallview.ctrlPressed == true) {if (valgt == true) unselectImage (); annet selectImage (); } Else {wallview.unselectAllImages (); selectImage (); } E.Handled = true;}
Nå er vi ferdig med bildet klassen.
Ikke bekymre deg om den røde understreket deler i koden din. Disse variablene og metodene ikke eksisterer ennå, og det er derfor Visual Studio ikke kjenner dem, men vi kommer til å endre det snart
Trinn 6:. Wallview-img Class Erklærer Variabler
< p> Siden vi er ferdig med bildet klassen åpne "wallview-img.xaml.cs" dokument. Ved første skrive erklæringer variabler rett ovenfor konstruktør "offentlig wallview_img ()":
offentlig List < bilde > imageList; privat List < StackPanel > panellist; offentlig bool ctrlPressed, imageSelected; privat dobbel defaultSize, changeSize;
Akkurat som før med BitmapImage Visual Studio vet ikke navne av Liste. For å fikse dette, som før, klikker du en av listene, og deretter på den blå rektangelet og velg "ved hjelp System.Collections.Generic;" fra menyen:
Trinn 7: wallview-img Klassekode den Constructor
Legg til følgende kode som initialiserer tidligere erklærte variabler, registrerer noen hendelser og deaktiverer knappene i navigerings bar:
offentlig wallview_img () {//Nødvendig å initial variabler InitializeComponent (); ctrlPressed = false; imageSelected = false; imageList = new List < bilde > (); panellist = new List < StackPanel > (); defaultSize = 200; changeSize = 1; //registrering alle hendelsene MouseLeftButtonUp + = new MouseButtonEventHandler (wallviewMouseLeftButtonUp); SizeChanged + = new SizeChangedEventHandler (resizeScrollViewer); KeyDown + = new KeyEventHandler (keyDownEvent); KeyUp + = new KeyEventHandler (keyUpEvent); this.slider.ValueChanged + = new RoutedPropertyChangedEventHandler < dobbel > (sliderValueChanged); //knapper vi ikke trenger enda this.btnAllAlbums.IsEnabled = false; this.btnCurrentAlbum.IsEnabled = false; this.btnNext.IsEnabled = false; this.btnPrev.IsEnabled = false;}
Trinn 8: wallview-img Class Skriv de Metoder
Legg til følgende metodene nedenfor konstruktøren. Kommentaren før hver metode forklarer hva metoden gjør:
//legger til et bilde i imagelist og kaller resizeimages () som i utgangspunktet legger det til den siste stackpanelpublic void addImage (image img) {img.imgName.Width = 200; img.setWallview (denne); imageList.Add (img); resizeImages ();} //sletter hele trekkes innhold, hvert panel, albumlisten og panellistpublic void clearLists () {imageList.Clear (); foreach (StackPanel x i panellist) {x.Children.Clear (); } This.content.Children.Clear (); panelList.Clear ();} //beregner hvor mange stackpanels = radene er neededpublic void updatePanels () {if (imageList.Count > 0) {foreach (StackPanel sp i panellist) sp.Children.Clear (); panelList.Clear (); double gridWidth = 0; if (this.content.ActualWidth == 0) gridWidth = 800; annet gridWidth = this.content.ActualWidth; int gridWidthInt = Convert.ToInt32 (gridWidth); int imageAmount = imageList.Count; int imageMargin = 10; int imageWidth = Convert.ToInt32 (defaultSize * changeSize); int bildestørrelse = imageWidth + 2 * imageMargin; dobbel ratio = gridWidth /(dobbel) Image; int ratioInt = Convert.ToInt32 (ratio); if (ratioInt - Forholdet > 0) ratioInt - = 1; int newImageMargin = ((gridWidthInt - ratioInt * imageWidth) /ratioInt) /2; double panelAmountDouble = (dobbel) imageAmount /ratioInt; int panelAmountInt = (int) panelAmountDouble; if (panelAmountDouble - panelAmountInt > 0) panelAmountInt ++; if (panelAmountInt < 1) panelAmountInt = 1; int x = 0; for (int i = 0; i < panelAmountInt; i ++) {StackPanel panel = new StackPanel (); panel.Orientation = Orientation.Horizontal; panel.Margin = new Tykkelse (0, 5, 0, 0); for (int j = 0; j < ratioInt; j ++) {if (x < imageAmount) {imageList [x] .Margin = new Tykkelse (newImageMargin, 0, newImageMargin, 10); imageList [x] .changeSize (changeSize); imageList [x] .setWallview (denne); panel.Children.Add (imageList [x]); } X ++; } PanelList.Add (panel); }}} //Velger alle bildene, blir kalt når ctrl + a er pressedpublic void selectAllImages () {foreach (image jeg i imageList) i.selectImage ();} //unselects alle iamgespublic void unselectAllImages () {foreach (image jeg i imageList) i.unselectImage ();} //blir kalt når de slider verdi changesprivate void resizeImages () {updatePanels (); this.content.Children.Clear (); foreach (StackPanel sp i panellist) this.content.Children.Add (sp);} //metoden blir kalt av slidervaluechanged eventpublic void changeImageSize (dobbel newsize) {changeSize = newsize; resizeImages ();}
Trinn 9: wallview-img class Eventhandlers
I dette trinnet skriver vi de nødvendige hendelsesbehandlinger for hendelsene vi registrerte i konstruktøren tidligere:
//Event for når glidebryteren blir changedprivate annullere sliderValueChanged (objekt avsenderen, System.Windows.RoutedPropertyChangedEventArgs < dobbel > e) {changeImageSize (this.slider.Value);} //Event som blir kalt når windowsize changesprivate void resizeScrollViewer (objekt avsenderen, System .Windows.SizeChangedEventArgs e) {resizeImages ();}! //Event at unselects alle bilder når du ikke klikker på et imagevoid wallviewMouseLeftButtonUp (objekt avsenderen, MouseButtonEventArgs e) {if (imageSelected) unselectAllImages (); annet imageSelected = false;} //Event for pressing keysprivate void keyDownEvent (objekt avsenderen, System.Windows.Input.KeyEventArgs e) {if (e.Key == Key.Ctrl) ctrlPressed = true; else if (e.Key == Key.A) if (ctrlPressed) selectAllImages ();} //Event for å slippe keysprivate void keyUpEvent (objekt avsenderen, System.Windows.Input.KeyEventArgs e) {if (e.Key == Key.Ctrl) ctrlPressed = false;}
Nå er vi ferdig med wallview-img-klassen. La oss fortsette med å skape en webservice som vi trenger for Main klassen
Trinn 10:. Lag en Webservice
webservice at vi kommer til å skrive i utgangspunktet gir oss bildene fra en bestemt mappe. For å opprette en webservice høyreklikk på "WallviewApp.Web" i Solution Explorer på høyre side av Visual Studio og velg "Legg til" > "Nytt element" fra menyen:
Fra popup velg "Silverlight-aktivert WCF service Visual C #" og skriv inn "WCF.svc" for et navn, og klikk "Legg til":
Som du ser har vi fått en annen klasse kalt WCF med sin egen kode dokument, "WCF.svc.cs"
Trinn 11:. WCF Klassekode To metoder
Legg følgende to metoder i WCF klassen rett under linjen som sier "//Legg til flere operasjoner her og merk dem med [OperationContract]":
//metode for å få alle filnavnene i en mappe [OperationContract] offentlig string [] getFileNames (String dir) {try {String tmp = HttpContext.Current.Request.MapPath (dir); returnere Directory.GetFiles (tmp, "* .jpg"); } Catch (Exception) {return null; }} //metode som returnerer datoen for opprettelsen av en fil eller mappe [OperationContract] public String getFileDates (String fil, int i) {return i.ToString () + "-" + File.GetLastWriteTime (fil) .ToString ( );}
Fix de manglende navnerom som vi gjorde tidligere ved å klikke i de berørte navn, deretter på den blå rektangel og på "import ..." eller ved å legge disse to linjene manuelt på toppen av dokumentet:
bruker system.web, bruker System.IO;
Trinn 12: Service Reference Del 1
For å kunne bruke WebService vi må legge en tjeneste Referanse til hovedprosjektet . Før vi kan lykkes gjøre dette må vi bygge prosjektet en gang. Derfor klikk på "Build" fra menyen på toppen av Visual Studio og etter det på "Bygg WallviewApp":
Trinn 13: Service Reference Del 2
Etter build etterfølger, høyreklikker du på "WallviewApp" på høyre side i Solution Explorer og velg "Legg til tjeneste Reference" fra menyen:
Trinn 14: Service Reference Del 3
I den kommende popup klikk på knappen "Discover" og skriv "WCFRef" i Namespace-feltet, og klikk "OK":
Uten å bygge prosjektet før du prøver å legge til en servicereferanse du ville ha fått denne feilen message:
Trinn 15: Mainpage Class Erklærer Variabler
Åpne "MainPage.xaml.cs" fil og legge til følgende linjer med kode ovenfor konstruktøren "offentlig Mainpage ()" :
private WCFRef.WCFClient klient, private string imagedir = "/bilde /"; offentlig wallview_img wvi; private int amountImages;
Trinn 16: Mainpage Class Programmer Constructor
Konstruktøren av Main ser slik ut. Vi initial erklæringene fra forrige trinn, registrere WebService er eventhandlers og tilsett wallview_img heter "wvi" til Grid "LayoutRoot" av Mainpage:
offentlig Mainpage () {InitializeComponent (); amountImages = 0; klient = new WallviewApp.WCFRef.WCFClient (); client.getFileNamesCompleted + = new Event < WallviewApp.WCFRef.getFileNamesCompletedEventArgs > (client_getFileNamesCompleted); client.getFileNamesAsync (imagedir); client.getFileDatesCompleted + = new Event < WallviewApp.WCFRef.getFileDatesCompletedEventArgs > (client_getFileDatesCompleted); wvi = new wallview_img (); this.LayoutRoot.Children.Add (wvi);}
Trinn 17: Code de Eventhandlers for Webservice
Legg følgende to eventhandlers og metoden nedenfor konstruktøren av Mainpage Den "client_getFileNamesCompleted ()" får en rekke strenger som blir returnert av WebService. Matrisen er omgjort til separate strenger som filnavnet er utvunnet. Bruke localhost-adresse, port, bildekatalog og filnavn, bygger vi en Uri kalt "src". At Uri brukes til å opprette en ny BitmapImage "bmi" som er nødvendig for å skape et nytt bilde "tmp". Bildet "tmp" deretter blir lagt til wallview_img "WMI". Etterpå metoden som returnerer opprettelsen dato for en fil kalles sammen med en teller antall. Uansett hva det metoden returnerer blir behandlet av handler "client_getFileDatesCompleted ()". Siden en streng i formatet > 2-18.02.2009 12:32:23 blir returnert fra WebService, må vi dele av telleren nummeret i begynnelsen og dato i midten Når dette. prosedyren er fullført den endelige datoen ser ut > 18.02.2009 og er tildelt til Textblock "imgDate" av tilsvarende bilde. Som i andre kildefilene namespace "BitmapImage" kan ikke bli funnet. For å reparere denne klikke på den blå rektangel og importere den etter at du har klikket inn teksten BitmapImage, eller legge til følgende linje i toppen av dokumentet manuelt: Gå videre og gjennomføre prosjektet for å se om alt fungerer. Du kan gjøre dette enten ved å trykke "F5" på tastaturet, ved å klikke på knappen med en typisk "Play" -ikonet under menyen øverst på ikonlinjen, eller ved å velge entry "Start Debugging" inne i "Debug" undermeny fra menyen på toppen av Visual Studio: Nettleseren din åpner seg og du vil få denne feilmeldingen: Hva er problemet? Vi fortalte WebService å sjekke mappen "http: //localhost: port /bilde /" for * .jpg-filer og selvsagt verken den mappen eller noen bilder i denne mappen eksisterer ennå. Naviger til prosjektet katalog med Windows Utforsker. For meg er det følgende bane: Åpne mappen "WallviewApp.Web" og opprette en ny mappe som heter "image" på innsiden av det Nå åpner mappen "image" og lime. noen * .jpg-bilder til det Når du har plassert et par bilder inne i bildemappen enten trykke refresh i din nettleser (hvis det er fortsatt åpen) eller rett og slett kjøre prosjektet på nytt ved å trykke på "F5" tasten i Visual Studio. Som et resultat bør du se vår endelige Wallview: Du kan påvirke størrelsen på de viste bildene med glidebryteren i navigasjonsfeltet . er ferdig for nå med denne opplæringen, og jeg håper du likte det og har lært noe, også. Den omtrentlige totale tiden det tok meg å utvikle dette fra grunnen var ca 20 timer. Den wallview for album som du kan se i videoen nedenfor tok meg ca 15 timer og en annen 10 timer for å kombinere begge wallview typer. Du kan spørre deg selv hva poenget med å være i stand til å velge ett eller flere bilder er. Akkurat nå at funksjonaliteten er ubrukelig, men jeg kunne tenke meg å legge muligheten for å starte en lysbildefremvisning eller lage en spilleliste fra de valgte bildene for eksempel. Og hvis du lurer på hvorfor vi lagt knappene "Alle album", "Current Album", "<" og ">" på navigasjonslinjen, men aldri brukt dem ... Min intensjon er å utvikle en annen tutorial som automatisk genererer fotoalbum basert på filnavnene på bildene. Selvsagt at opplæringen vil utvide prosjektet fra opplæringen du nettopp fullført her. Jeg vil definitivt like å gjøre det hvis det er populært med publikum. For å få et inntrykk av hva wallview for bilder som vi nettopp opprettet ville se ut i kombinasjon med en wallview for fotoalbum ta en titt på følgende video: For noen kommentarer, forslag eller kommentarer, vennligst legg igjen en oppmerksom på i kommentarfeltet. Takk for lesing!
//hendelsesbehandling for å få filnavnene fra av folderprivate void client_getFileNamesCompleted (objekt avsenderen, WallviewApp.WCFRef.getFileNamesCompletedEventArgs e) {if (e.Result! = null) {foreach (string s i e.Result) {int pos = s.LastIndexOf ("\\\\"); string filnavn = s.Substring (pos + 1); int port = Application.Current.Host.Source.Port; Uri src = new Uri ("http: //localhost:" + port + imagedir + filnavn); BitmapImage bmi = new BitmapImage (src); image tmp = nytt bilde (bmi, filnavn); this.wvi.addImage (TMP); amountImages ++; getFileDate (S, amountImages - 1); }} Else {MessageBox.Show ("ga null i filer fullført"); }} //metode som kaller WebService asynch med en filepath streng og et nummer slik at vi kan assing den returnerte dato strengen til et visst bilde againprivate void getFileDate (String s, int i) {this.client.getFileDatesAsync (s, i);} //hendelsesbehandling for å få filedates private void client_getFileDatesCompleted (objekt avsenderen, WallviewApp.WCFRef.getFileDatesCompletedEventArgs e) {if (e.Result = null) {String dt = e.Result; int antall = Convert.ToInt32 (dt.Remove (dt.LastIndexOf ("-"))); String date = dt.Remove (dt.LastIndexOf ("")); if (antall < 10) date = date.Remove (0, 2); else if (antall < 100) date = date.Remove (0, 3); annet date = date.Remove (0, 4); this.wvi.imageList [nummer] .imgDate.Text = dato; } Else {MessageBox.Show ("ga null i datoer fullført"); }}
bruker System.Windows.Media.Imaging;
Trinn 18: Kjør Prosjekt
Trinn 19: Forbered bildemappen
Trinn 20:. Kjør prosjektet igjen
Konklusjon