Create en Wallview for bilder med Silverlight: Design
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Som tittelen sier, vi kommer til å lage en Wallview inspirert av iTunes. Denne opplæringen er delt opp i to deler - en for design i Blend og den andre for koden bak i Visual Studio.
Endelig resultat Forhåndsvisning
Ta en titt på denne videoen demo av endelige resultatet vi skal jobbe mot (eller bare sjekke ut web-basert demo ovenfor) :
Innledning
I denne delen av opplæringen vi skal designe to UserControls i Expression Blend. Denne opplæringen ser ganske langt fra den del av trinn, men dette er fordi det er meget nøyaktig; det er en forklaring og skjermbilde for nesten hvert klikk du har å gjøre. Grunnen til at jeg har skrevet det i så mye detalj er at mine kamerater fra universitetet funnet Blend altfor komplisert og vanskelig å bruke
Trinn 1:. Opprett et nytt prosjekt i Visual Studio
< p> Åpne Visual Studio og klikk på "File" > "Ny" > "Prosjekt" i toppmenyen.
Trinn 2: Sette opp
Velg Silverlight Application Visual C # fra menyen og skriv "WallviewApp" for et prosjektnavn nederst samt hvor du vil lagre prosjektet.
Etter at du vil se en popup. Kontroller at du sjekke den boksen nederst og velg Silverlight 4 fra ComboBox
Trinn 3:. Åpne prosjektet i Blend
Start Expression Blend og åpne prosjektet som vi bare . opprettet i Visual Studio
Bla til prosjektet filen i prosjektet katalogen og åpne den
Trinn 4:. Lag to nye mapper
Høyreklikk på prosjektet WallviewApp inne i prosjekttreet og velg "Legg til ny mappe". Gjør dette to ganger, kaller mappene "usercontrols" og "image"
Trinn 5:. Opprette en ny UserControl
Høyreklikk på nyopprettet mappe "usercontrols" og velg "Legg til nytt element ..."
I popup sørge for at UserControl er valgt, og skriv "image.xaml" som et navn
Trinn 6:.. Lag en StackPanel
Velg StackPanel Container fra verktøylinjen som skal være på venstre side som standard ...
... og tegne et rektangel i midten av LayoutRoot som var der fra begynnelsen .
Trinn 7: Juster StackPanel
Sørg for at StackPanel er valgt på venstre side i "Objekter og Timeline" panel. På høyre side ser du parametrene for det valgte elementet. Endre Bredde og Heigh til "Auto (0)" ved å klikke på de kryssede pilene ved siden av tekstfeltet. HorizontalAlignment til "Center" og VerticalAlignment til "Top". Nullstille Margin ved å klikke på den hvite firkanten ikonet ved siden av textfields og velg Reset fra menyen. Etter det satt Toppmarg til "5". Nå Layout-panelet skal se slik ut, og siden den StackPanel har fått en størrelse på 0x0 piksler kan du ikke lenger se det:
Trinn 8: Lag et rutenett
Gå videre og velg Grid container fra verktøylinjen på venstre side (der vi valgte StackPanel før), og trekke et rektangel i midten av arbeidsområdet
Trinn 9:. Juster Grid
Ta en titt på "Objekter og Timeline" panel og sørge for at Grid er inne i StackPanel. Hvis det ikke er bare å klikke og dra det inn i StackPanel.
justere oppsettet innstillingene mens Grid er fortsatt valgt. Still Bredde og Høyde til "200" piksler, Horisontale og VerticalAlignment å "strekke" hvis de ikke allerede er
Trinn 10:. Lag en Border
Nå skal vi å skape en Border. Du kan velge det som Grid og StackPanel fra verktøylinjen på venstre side. Tegn et rektangel med Border og flytte den inn i Grid hvis det ikke allerede er
Trinn 11:. Juster Border Set Farge og Corners
Åpne området for Børster på høyre side og endre BorderBrush til følgende Farge: "# 0076A2F9". Deretter setter BorderThickness i Utseende-panelet til "5" piksler i alle fire retninger og CornerRadius til "5" piksler. Bredde og høyde skal være satt til "Auto" ved å klikke på de kryssede pilene ved siden av tekstboksen. Den HorizontalAlignment må settes til "Center" og VerticalAlignment til "Bottom":
Trinn 12: Juster Border Legg en Shadow
Nå skal vi legge en ShadowEffect til Border. Klikk på knappen "Ny" inne i Utseende området rett ved siden Effect. I den kommende popup velg "DropShadowEffect" og klikk "OK"
Juster Shadow Innstillinger som kom opp rett under "Ny" knappen ved å sette BlurRadius til "10" og ShadowDepth til "1".
Trinn 13: importere et bilde
Nå har vi tenkt til å importere et bilde inn Blend. Du gjør dette ved å enten høyreklikke på mappen som heter "image" som vi opprettet tidligere, og velge "Legg til eksisterende element" eller ved å velge mappen og dra et bilde til høyre inn på den fra den stasjonære eller explorer.
Etter import prosjekttreet ditt skal se slik ut:
Trinn 14: Bruk bilde
For å bruke bildet i kontroll du bare dra den fra prosjektet nettleser, hvor du importerte den, rett inn på arbeidsområdet. Som du kan se det er altfor stor og i feil container:
For å fikse at vi bare dra bildet inn i kant:
Trinn 15: Juster bilde
Endre høyden og bredden på bildet til "Auto", Horisontale og VerticalAlignment til "Center", Marginene til "0" og Stretch å "Uniform" i Common Properties panelet:
Trinn 16: Lag en TextBlock
Velg TextBlock verktøyet fra verktøylinjen på venstre side og lage en TextBlock sted i arbeidsområdet
Trykk på "ESC" tasten på tastaturet for å avbryte. redigere teksten i TextBlock
Trinn 17:.. Juster TextBlock
Klikk og dra TextBlock i "Objekter og Timeline" panel inn i StackPanel vi opprettet tidligere
Etter det, endre forgrunnsfargen til "# FF1F1F1F" og oppsettet innstillingene på høyre side til følgende verdier: Bredde: "Auto", Høyde: "Auto", HorizontalAlignment: "Center", VerticalAlignment: " Top ", Margin-top:" 8 ". Sett Tekst til ingenting ved å markere teksten "TextBlock" og slette den, eller ved å klikke på den hvite firkanten ved siden av det og klikke på "Tilbake". Også endre skrifttype for teksten til "Verdana":
Trinn 18: Lag en annen TextBlock
Opprett en annen TextBlock enten ved å gjenta trinn 16 og 17, eller ved å velge den vi opprettet allerede i "Objekter og Timeline" panel og trykke Ctrl + C og deretter Ctrl + V for å kopiere det. Det eneste vi trenger å gjøre er forskjellig fra Trinn 17 er at vi ikke ønsker noen Margin skal settes. Hvis du gjorde det dupliserte metoden du bare sette Toppmarg til "0" eller klikk den lille hvite firkanten ved siden av den og tilbakestille Margin:
Trinn 19: Gi nytt navn til Elements
< p> For å kunne arbeide med elementene vi skapte så langt må vi gi dem navn. Så gå videre og gi nytt navn til TextBlock helt nederst til "imgDate" ved å enten sakte klikke to ganger, eller ved å høyreklikke og velge "endre navn". Endre navnet på den andre TextBlock til «imgName", bilde å "img", grensen til "imgBorder" og Grid til «imgSize". Nå er vi ferdig med utformingen av denne kontrollen og hierarkiet skal se slik ut:
Og design skal se slik ut:
Selvfølgelig du ikke kan se de to TextBlocks i din prosjektet siden vi satt sin tekst til ingenting noen trinn tidligere.
Jeg personlig la navnene på Textblocks så lenge jeg trenger dem for å få design gjort før jeg fjerne dem. På denne måten kan du kontrollere om alt er på rett sted.
Trinn 20: Ta en titt på XAML
Hvis du ønsker å ta en titt på koden vi bare generert klikk på ikonet "< >" i midten øverst på høyre scrollbar på arbeidsstedet. . For å komme tilbake til utformingen visning klikker du på ikonet øverst
Vår koden ser slik ut:
< UserControl xmlns = "http://schemas.microsoft.com/winfx/2006/xaml /presentasjon "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml~~number=plural "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008~~number=plural "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: Ignorerbar =" d "x: Class =" WallviewApp.image "d: DesignWidth =" 640 "d: DesignHeight =" 480 "> < Grid x: Name = "LayoutRoot" > < StackPanel HorizontalAlignment = "Center" VerticalAlignment = "Top" Margin = "0,5,0,0" > < Grid x: Name = "imgSize" width = "200" height = "200" > < Border x: Name = "imgBorder" BorderBrush = "# 0076A2F9" BorderThickness = "5" VerticalAlignment = "Bottom" HorizontalAlignment = "Center" CornerRadius = "5" > < Border.Effect > < DropShadowEffect BlurRadius = "10" ShadowDepth = "1" /> < /Border.Effect> < Bilde x: Name = "img" Source = "/WallviewApp; komponent /bilde /avatar_launch_poster.jpg" HorizontalAlignment = "Center" VerticalAlignment = "Center" /> < /Border > < /Grid > < TextBlock x: Name = "imgName" TextWrapping = "Wrap" HorizontalAlignment = "Center" VerticalAlignment = "Top" Margin = "0,8,0,0" fontfamily = "Verdana" Forgrunn = "# FF1F1F1F" /> < TextBlock x: Name = "imgDate" TextWrapping = "Wrap" HorizontalAlignment = "Center" VerticalAlignment = "Top" fontfamily = "Verdana" Forgrunn = "# FF1F1F1F" /> < /StackPanel > < /Grid > < /UserControl >
Trinn 21:. Lag en annen UserControl
Pass på at du bytter tilbake til utformingsvisning
Opprett en annen UserControl i " usercontrols "-mappen ved å høyreklikke på mappen og velge" Legg til nytt element UserControl "og for navnet enter" wallview-img.xaml "" fra menyen
Fra popup velge. ":
< hr>
Trinn 22:. Lag en ScrollViewer
Velg ScrollViewer container fra verktøylinjen på venstre ...
... og tegne et rektangel med den inn i arbeidsområdet
Trinn 23:. Juster ScrollViewer
Mens ScrollViewer er valgt inspisere Børster området på høyre side og endre BorderBrush til "No Brush"
Set den BorderThickness til "0" for alle fire retninger, Horisontal og VerticalAlignment å "Stretch", Toppmarg til "29" piksler og de andre Marginene til "0". Også kontrollere om bredde og høyde er på "Auto" ved å klikke på de kryssede piler. Utvider Layout området ved å klikke på den lille pilen og satt alle fire Stopp retninger på "0":
Trinn 24: Lag en StackPanel
Velg StackPanel fra verktøylinjen på venstre ...
... og skape et StackPanel i midten av ScrollViewer
Trinn 25:. Juster StackPanel
Velg StackPanel hvis det ikke allerede fra "Objekter og Timeline" panel, klikk deretter på "Solid Color Brush" -knappen i Børster området (det er den andre fra venstre, rett ved siden av "No Brush") og sette bakgrunns farge til "# FFB8B8B8". Videre endre Horisontal og VerticalAlignment å "strekke", sjekk om bredde og høyde er satt til "Auto", og hvis de Marginene er alle "0":
Trinn 26: Lag et rutenett
Velg Grid Container fra verktøylinjen og lage et rutenett
Hvis du opprettet den inni StackPanel bare dra og slippe den inn i LayoutRoot-Grid.
Trinn 27 : Juster Grid
Endre Grid Høyde til "30" piksler og bredden til "Auto". HorizontalAlignment å "strekke", VerticalAlignment til "Top" og Margin til (-1, -1, -1, 0) for (venstre, topp, høyre, nederst):
Trinn 28: Lag et rektangel
Velg rektangelverktøyet fra venstre side som er over containerne vi brukt flere ganger allerede ...
... og tegne en boks i arbeidsområdet.
Flytt rektangel inn i Grid vi opprettet i trinnet før:
Trinn 29: Juster rektangel
Endre rektangulært fyllfarge til "# FF4E4E4E":
Og Strek farge til "# FF1F1F1F":
Angi høyde og bredde til "Auto", Horisontal og VerticalAlignment å "strekke" og tilbakestille Margin hvis det er noen:
< hr>
Trinn 30: Lag en StackPanel
Nå skaper vi en StackPanel og flytte den inn i Grid:
Trinn 31: Juster StackPanel
Endre StackPanel parametere til følgende: Bredde og Høyde til "Auto", Orientering til "Horizontal", HorizontalAlignment til "Venstre", VerticalAlignment til "Center" og margin-left til "10":
< h2> Trinn 32:. Lag en knapp
Velg Button-Tool fra verktøylinjen ...
... og lage en knapp et sted i arbeidsområdet
Deretter drar den inn i StackPanel vi nettopp opprettet:
Trinn 33: Juster Button
Sett Button bredde og høyde til "Auto", HorizontalAlignment å "strekke", VerticalAlignment til "Center", Marginene om det er noen til "0", innholdet til "Alle album" (hvite områder med vilje slik standardknappen ser litt bedre) og Font til "Verdana":
Steg 34: Dupliser Button
Velg knappen og trykk Ctrl + C, Ctrl + V for å kopiere og lime inn knappen i samme StackPanel, deretter Endre margin-left til "5" og innhold til "Nåværende Album":
Trinn 35: Dupliser StackPanel
Velg StackPanel med de to knappene i den fra "Objekter og Timeline" panel og trykk CTRL + C, Ctrl + V for å kopiere det også. Nå hierarkiet skal se slik ut:
Trinn 36: Juster Duplisert StackPanel
Velg duplisert StackPanel hvis du ikke allerede har, endre HorizontalAlignment til "Right" og sette alle Marginene til "0" med unntak av den rette som du satt til "10" piksler
Trinn 37:. Juster Knapper
Velg en av knappene i duplisert StackPanel og endre innholdet til «<" hvis du valgte den venstre og til ">" for den rette. Nå har vi to knapper med en pil symbol som senere skal brukes til navigasjon
Trinn 38:. Lag en Slider
Velg Slider-Tool fra verktøylinjen og skape en Slider på din arbeidsplass
Så dra og slippe den til toppen av lavere StackPanel.
Trinn 39: Juster Slider
Velg Slider og justere det til følgende innstillinger:
Bredde: "100", etter
Høyde: "Auto", etter
HorizontalAlignment: "sentrum", etter
VerticalAlignment: "Center", etter
Margin-Høyre: "20", etter
de andre Margins: "0",
Og under felles Egenskaper:
LargeChange: "0.2";
Maksimum: "1.5";
Minimum: "0,5":
SmallChange : "0.1";
Verdi: "1"
Trinn 40: Gi nytt navn til Elements
Som i bildet UserControl som vi. opprettet tidligere vi kommer til å endre navn på de elementene som vi trenger senere. Fra bunn til topp: Knapp: "btnNext", Button: "btnPrev", Slider: "slider", hopper StackPanel, Button: "btnCurrentAlbum", Button: "btnAllAlbums", hoppe over de neste elementene opp til StackPanel som er inne av ScrollViewer. Gi nytt navn som StackPanel til "innhold". Nå hierarkiet skal se slik ut:
Trinn 41: Slutt Look
Dette er hvordan "wallview-img" UserControl skal nå vises:
Trinn 42: Ta en titt på de etiske
Dette er hvordan XAML-kode for vår UserControl "wallview.img.xaml" vises:
< UserControl xmlns = "http: //skjemaer. microsoft.com/winfx/2006/xaml/presentation~~number=plural "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml~~number=plural "xmlns: d =" http://schemas.microsoft.com/expression/blande /2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: Ignorerbar =" d "x: Class =" WallviewApp.wallview_img "d: DesignWidth =" 640 "d: DesignHeight = "480" > < Grid x: Name = "LayoutRoot" > < ScrollViewer Margin = "0,29,0,0" Padding = "0" BorderBrush = "{x: Null}" BorderThickness = "0" > < StackPanel x: Name = "content" Bakgrunn = "# FFB8B8B8" /> < /ScrollViewer > < Grid height = "30" VerticalAlignment = "Top" Margin = "- 1, -1, -1,0" > < rektangel Fyll = "# FF4E4E4E" Stroke = "# FF1F1F1F" /> < StackPanel HorizontalAlignment = "Left" VerticalAlignment = "Center" Margin = "10,0,0,0" Orientation = "Horisontal" > < Button x: name = "btnAllAlbums" content = "Alle album" VerticalAlignment = "Center" fontfamily = "Verdana" /> < Button x: Name = "btnCurrentAlbum" Content = "Gjeldende Album" VerticalAlignment = "Center" fontfamily = "Verdana" Margin = "5,0,0,0" /> < /StackPanel > < StackPanel HorizontalAlignment = "Right" VerticalAlignment = "Center" Margin = "0,0,10,0" Orientation = "Horisontal" > < Slider x: Name = "slider" width = "100" Margin = "0,0,20,0" LargeChange = "0.2" Maksimal = "1.5" Minimum = "0.5" Value = "1" VerticalAlignment = "Center "HorizontalAlignment =" Center "/> < Button x: Name = "btnPrev" Content = "& lt;" VerticalAlignment = "Center" fontfamily = "Verdana" /> < Button x: Name = "btnNext" Content = "& gt;" VerticalAlignment = "Center" fontfamily = "Verdana" Margin = "5,0,0,0" /> < /StackPanel > < /Grid > < /Grid > < /UserControl >
Konklusjon
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 mer kraftfull, har en debugger og en bedre IntelliSense for forslag og autofullføring.
I den andre delen av denne opplæringen vi er kommer til å skrive hele koden bak for våre to UserControls i C #, samt vår egen webtjeneste som bringer hvert bilde fra en bestemt mappe i vår wallview.
Siden dette er min første tutorial noensinne Jeg håper du likte å arbeide gjennom det og lært noe nyttig. For noen kommentarer, forslag eller kommentarer, legg igjen en kommentar i kommentarfeltet.
Takk for lesing!
Flere ressurser
30 dagers prøveversjon av Blend
En introduksjon til Microsoft Silverlight 4 - Blend