Share
Som tittelen sier, skal vi lage et Wallview inspirert av iTunes. Denne opplæringen er delt opp i to deler - en for designen i Blend og den andre for koden bak i Visual Studio.
Ta en titt på denne videodemoen av det endelige resultatet vi skal jobbe for (eller bare sjekk ut den webbaserte demoen ovenfor):
I denne delen av opplæringen skal vi designe to UserControls i Expression Blend. Denne opplæringen ser ganske lang ut fra mengden trinn, men dette er fordi det er veldig grundig; Det er en forklaring og skjermbilde for nesten hvert klikk du må gjøre. Grunnen til at jeg har skrevet det så mye i detalj er at mine kolleger fra universitetet fant Blend altfor komplisert og vanskelig å bruke.
Åpne Visual Studio og klikk på "File"> "New"> "Project" i øverste menylinje.
Velg Silverlight Application Visual C # fra menyen og skriv inn "WallviewApp" for et prosjektnavn nederst, samt stedet for å lagre prosjektet..
Etter det vil du se en popup. Pass på at du merker av i boksen nederst og velg Silverlight 4 fra kombinasjonsboksen.
Start Expression Blend og åpne prosjektet som vi nettopp opprettet i Visual Studio.
Bla gjennom prosjektfilen i prosjektkatalogen og åpne den.
Høyreklikk på prosjektet WallviewApp inne i prosjektetreet og velg "Legg til ny mappe". Gjør dette to ganger, ring mappene "usercontrols" og "image".
Høyreklikk på den nyopprettede mappen "usercontrols" og velg "Legg til nytt element ...".
I popupen må du kontrollere at UserControl er valgt og skriv inn "image.xaml" som et navn.
Velg StackPanel Container fra verktøylinjen som skal være på venstre side som standard ...
... og tegne et rektangel midt på LayoutRoot som var der fra begynnelsen.
Kontroller at StackPanel er valgt på venstre side i panelet "Objekter og tidslinje". På høyre side ser du parametrene for det valgte elementet. Endre bredde og høyde til "Auto (0)" ved å klikke på de kryssede pilene ved siden av tekstfeltet. HorizontalAlignment til "Center" og VerticalAlignment til "Top". Tilbakestill marginen ved å klikke på det hvite firkantikonet ved siden av tekstfeltene og velg Tilbakestill fra menyen. Deretter setter Top-Margin til "5". Nå skal Layout-panelet se slik ut, og siden StackPanel har en størrelse på 0x0 piksler, kan du ikke lenger se det:
Fortsett og velg Gitterbeholderen fra verktøylinjen på venstre side (der vi valgte StackPanel før) og tegne et annet rektangel inn i midten av arbeidsområdet.
Ta en titt på panelet "Objekter og tidslinje" og kontroller at rutenettet er inne i StackPanel. Hvis det ikke bare klikker og drar det inn i StackPanel.
Juster innstillingsinnstillingene mens rutenettet fortsatt er valgt. Angi bredde og høyde til "200" piksler, horisontal og vertikaljustering for å "strekke" hvis de ikke allerede er.
Nå skal vi lage en grense. Du kan velge den som Gitter og StackPanel fra verktøylinjen på venstre side. Tegn et rektangel med grensen og flytt det inn i gridet hvis det ikke allerede er.
Åpne området for Pensler på høyre side og endre BorderBrush til følgende farge: "# 0076A2F9". Sett deretter BorderThickness i Utseende-panelet til "5" piksler i alle fire retninger og CornerRadius til "5" piksler. Bredde og høyde skal settes til "Auto" ved å klikke på de kryssede pilene ved siden av tekstboksen. HorizontalAlignment må settes til "Center" og VerticalAlignment til "Bottom":
Nå skal vi legge til en ShadowEffect til grensen. Klikk på knappen "Ny" i Utseende-området rett ved siden av Effekt. I kommende popup velg "DropShadowEffect" og klikk "OK".
Juster skyggeinnstillingene som kom opp rett under "Ny" -knappen ved å sette BlurRadius til "10" og ShadowDepth til "1":
Nå skal vi importere et bilde til Blend. Du gjør dette ved å enten høyreklikke mappen kalt "bilde" som vi opprettet tidligere og velge "Legg til eksisterende element" eller ved å velge mappen og dra et bilde rett inn på det fra skrivebordet eller utforskeren.
Etter importen skal prosjektet ditt se slik ut:
For å bruke bildet i kontrollen, drar du bare det fra prosjektleseren, hvor du importerte den, rett inn på arbeidsområdet. Som du kan se er det altfor stort og i feil beholder:
For å fikse at vi bare drar bildet inn i grensen:
Endre høyde og bredde av bildet til "Auto", Horisontal og VertikalAlignering til "Senter", Marginer til "0" og Strek til "Uniform" i fellesfeltet:
Velg TextBlock-verktøyet fra verktøylinjen på venstre side, og opprett en TextBlock et sted i arbeidsområdet.
Trykk på "ESC" -tasten på tastaturet for å avbryte redigering av teksten inne i TextBlock.
Klikk og dra tekstblocket i "Objects and Timeline" -panelet i StackPanel vi opprettet tidligere.
Deretter endrer du Forgrunnsfarge til "# FF1F1F1F" og Layout-innstillingene på høyre side til følgende verdier: Bredde: "Auto", Høyde: "Auto", HorisontalAlignering: "Senter", VertikalAjustering: "Topp", Margin -Topp: "8". Sett teksten til ingenting ved å markere teksten "TextBlock" og slette den eller ved å klikke den hvite plassen ved siden av den og klikke "Tilbakestill". Endre også skriften til teksten til "Verdana":
Opprett en annen TextBlock enten ved å gjenta trinn 16 og 17, eller ved å velge den vi opprettet allerede i "Objects and Timeline" -panelet og trykk Ctrl + C og deretter Ctrl + V for å duplisere den. Det eneste vi må gjøre forskjellig fra Trinn 17 er at vi ikke vil ha noen Margin å bli satt. Hvis du gjorde duplikatmetoden, satte du bare toppmargenen til "0" eller klikk på den lille hvite plassen ved siden av den og tilbakestill marginen:
For å kunne jobbe med elementene vi opprettet så langt, må vi gi dem navn. Så gå videre og gi nytt navn til TextBlock helt nederst for å "imgDate" ved å enten sakte klikke to ganger eller ved å høyreklikke og velge "endre navn". Endre navnet på den andre TextBlock til "imgName", bildet til "img", grensen til "imgBorder" og gridet til "imgSize". Nå er vi ferdige med utformingen av denne kontrollen, og ditt hierarki bør se slik ut:
Og designet skal se slik ut:
Selvfølgelig kan du ikke se de to TextBlocks i prosjektet ditt siden vi satte teksten til ingenting noen skritt tidligere.
Personlig la jeg navnene på Textblocks så lenge jeg trenger dem for å få designet gjort før jeg fjerner dem. På denne måten kan du kontrollere om alt er på riktig sted.
Hvis du vil se koden vi nettopp genererte, klikker du på ikonet "< >"i midten øverst på høyre rullefelt i arbeidsområdet. For å komme tilbake til designvisningen, klikk på ikonet øverst.
Vår kode ser slik ut:
Pass på at du bytter tilbake til designvisningen.
Opprett en annen UserControl i mappen "usercontrols" ved å høyreklikke mappen og velge "Legg til nytt element" fra menyen.
Fra popup-vinduet velg "UserControl" og for navnet skriv inn "wallview-img.xaml":
Velg ScrollViewer-beholderen fra verktøylinjen til venstre ...
... og trekk et rektangel med det inn i arbeidsområdet.
Mens ScrollViewer er valgt, kontroller du Penselområdet på høyre side og endre BorderBrush til "No Brush".
Sett BorderThickness til "0" for alle fire retninger, Horisontal og VertikalAlignment til "Stretch", Top-Margin til "29" piksler og de andre Marginene til "0". Kontroller også om Bredde og Høyde er på "Auto" ved å klikke på krysspiler. Videre utvide Layout-området ved å klikke på den lille pilen og sette alle fire Padding-retninger til "0":
Velg StackPanel fra verktøylinjen til venstre ...
... og opprett en StackPanel midt i ScrollViewer.
Velg StackPanel hvis den ikke allerede er fra "Objects and Timeline" -panelet, og klikk deretter på "Solid Color Brush" -knappen i børstepunktet (den er den andre fra venstre, rett ved siden av "No Brush"). og sett bakgrunnsfargen til "# FFB8B8B8". Endre endre horisontal og vertikaljustering til "Stretch", kontroller om Bredde og Høyde er satt til "Auto", og hvis Marginene er alle "0":
Velg gridbeholderen fra verktøylinjen og opprett et grid.
Hvis du opprettet den inne i StackPanel, bare dra og slipp den inn i LayoutRoot-Grid:
Endre gridens høyde til "30" piksler og bredden til "Auto". HorizontalAlignment til "Stretch", VerticalAlignment til "Top" og Marginen til (-1, -1, -1, 0) for (venstre, topp, høyre, nederst):
Velg rektangulærverktøyet fra venstre side som ligger over beholderne vi brukte flere ganger allerede ...
... og trekk en boks inn i arbeidsområdet.
Flytt rektangelet til rutenettet vi opprettet i trinnet før:
Endre rektangulens fyllfarge til "# FF4E4E4E":
Og strekkfargen til "# FF1F1F1F":
Sett høyde og bredde til "Auto", Horisontal og Vertikaljustering til "Strekk" og tilbakestill marginen hvis det er noen:
Nå lager vi en StackPanel og flytter den inn i rutenettet:
Endre StackPanel-parametrene til følgende: Bredde og høyde til "Auto", Orientering til "Horisontal", Horisontaljustering til "Venstre", Vertikaljustering til "Senter" og Margin-venstre til "10":
Velg knappverktøyet fra verktøylinjen ...
... og lag en knapp et sted i arbeidsområdet.
Dra deretter den inn i StackPanel vi nettopp har opprettet:
Sett knappens bredde og høyde til "Auto", HorizontalAlignment til "Stretch", VerticalAlignment til "Center", Margins hvis det er noe å "0", Innholdet til "Alle album" (hvite mellomrom med vilje slik at standardknappen ser ut litt bedre) og skriften til "Verdana":
Velg Knappen og trykk Ctrl + C, Ctrl + V for å kopiere og lime inn knappen i samme StackPanel, deretter Endre margen til venstre til "5" og innholdet til "Current Album":
Velg StackPanel med de to knappene i det fra panelet "Objekter og tidslinje" og trykk CTRL + C, CTRL + V for å duplisere det også. Nå bør hierarkiet se slik ut:
Velg duplisert StackPanel hvis du ikke allerede har endret, endre HorizontalAlignment til "Right" og sett alle margene til "0" bortsett fra den riktige som du har satt til "10" piksler.
Velg en av knappene i duplisert StackPanel og endre innholdet til " < " if you selected the left one and to " > "for den rette. Nå har vi to knapper med et pilsymbol som senere brukes til navigering.
Velg glidebryteren fra verktøylinjen og opprett en glidebryter på arbeidsområdet.
Dra deretter og slipp den til toppen av nedre StackPanel:
Velg glidebryteren og juster den til følgende innstillinger:
Og under Vanlige egenskaper:
Som i bildet UserControl som vi opprettet tidligere, skal vi omdøpe elementene vi trenger senere. Fra bunn til toppen: Knapp: "btnNext", Knapp: "btnPrev", Slider: "glidebryter", hopp over StackPanel, Button: "btnCurrentAlbum", Button: "btnAllAlbums", hopp over de neste elementene opp til StackPanel som er inne av ScrollViewer. Gi nytt navn til StackPanel til "innhold". Nå skal hierarkiet se slik ut:
Slik viser "wallview-img" UserControl nå:
Slik ser xaml-koden for vår UserControl "wallview.img.xaml" opp:
Blend er et flott verktøy for å bygge vakre design og animasjoner. Du kan til og med skrive hele koden bak i Blend, men jeg foretrekker å bruke Visual Studio siden det er kraftigere, har en debugger og en bedre IntelliSense for forslag og autofullføring.
I den andre delen av denne opplæringen skal vi skrive hele koden bak for våre to UserControls i C #, så vel som vår egen webservice som bringer hvert bilde fra en bestemt mappe til vår wallview.
Siden dette er min første opplæring, håper jeg at du likte å jobbe gjennom det og lært noe nyttig. For eventuelle kommentarer, forslag eller bekymringer, vennligst la et notat i kommentarseksjonen.
Takk for at du leste!
30 dagers prøve med Blend
En introduksjon til Microsoft Silverlight 4 - Blend
Accentsconagua