Share
Zoals de titel aangeeft, gaan we een door iTunes geïnspireerde Wallview maken. Deze tutorial is opgesplitst in twee delen - een voor het ontwerp in Blend en de andere voor de code achter in Visual Studio.
Bekijk deze video-demo van het uiteindelijke resultaat waar we naartoe zullen werken (of bekijk de webgebaseerde demo hierboven):
In dit deel van de tutorial gaan we twee UserControls ontwerpen in Expression Blend. Deze zelfstudie ziet er vrij lang uit van het aantal stappen, maar dit komt omdat het zeer grondig is; er is een uitleg en een screenshot voor bijna elke klik die je moet doen. De reden dat ik het zo gedetailleerd heb geschreven, is dat mijn partners van de universiteit Blend veel te ingewikkeld en moeilijk te gebruiken vonden.
Open Visual Studio en klik op "Bestand"> "Nieuw"> "Project" in de bovenste menubalk.
Selecteer Silverlight Application Visual C # in het menu en typ "WallviewApp" voor een projectnaam onderaan en ook de locatie om het project op te slaan.
Hierna ziet u een popup. Zorg ervoor dat je het vakje onderaan aanvinkt en selecteer Silverlight 4 uit de combobox.
Start Expression Blend en open het project dat we zojuist in Visual Studio hebben gemaakt.
Blader naar het projectbestand in de projectdirectory en open het.
Klik met de rechtermuisknop op het project WallviewApp in de projectstructuur en kies "Nieuwe map toevoegen". Doe dit twee keer, noem de mappen "usercontrols" en "image".
Klik met de rechtermuisknop op de vers aangemaakte map "usercontrols" en selecteer "Nieuw item toevoegen ...".
Controleer in de pop-up of UserControl is geselecteerd en voer "image.xaml" in als een naam.
Kies de StackPanel-container op de werkbalk, die standaard aan de linkerkant moet staan ...
... en teken een rechthoek in het midden van de LayoutRoot die er vanaf het begin was.
Zorg ervoor dat het StackPanel aan de linkerkant is geselecteerd in het venster "Objecten en tijdlijn". Aan de rechterkant ziet u de parameters van het momenteel geselecteerde element. Verander de breedte en hoogte in "Auto (0)" door op de gekruiste pijlen naast het tekstveld te klikken. Horizontale uitlijning tot "Center" en VerticalAlignment tot "Top". Reset de marge door op het witte vierkantje naast de tekstvelden te klikken en Reset in het menu te kiezen. Stel daarna de topmarge in op "5". Nu zou het lay-outpaneel er zo moeten uitzien en aangezien het StackPanel een formaat van 0x0 pixels heeft, kun je het niet langer zien:
Ga je gang en selecteer de Grid-container op de werkbalk aan de linkerkant (waar we eerder het StackPanel hebben geselecteerd) en teken nog een rechthoek in het midden van je werkruimte.
Bekijk het paneel "Objecten en tijdlijn" en zorg ervoor dat het raster zich in het StackPanel bevindt. Als het niet gewoon klik en sleep het naar het StackPanel.
Pas de lay-outinstellingen aan terwijl het raster nog steeds is geselecteerd. Stel Breedte en Hoogte in op "200" pixels, Horizontaal en Verticaal Afstemmen op "Uitrekken" als ze dat nog niet zijn.
Nu gaan we een rand maken. U kunt het selecteren zoals het raster en StackPanel op de werkbalk aan de linkerkant. Teken een rechthoek met de rand en verplaats deze naar het raster als dit nog niet het geval is.
Open het gebied voor penselen aan de rechterkant en verander de BorderBrush in de volgende kleur: "# 0076A2F9". Stel vervolgens de BorderThickness in het deelvenster Uiterlijk in op "5" pixels in alle vier richtingen en de CornerRadius op "5" pixels. Breedte en hoogte moeten worden ingesteld op "Auto" door op de gekruiste pijlen naast het tekstvak te klikken. De HorizontalAlignment moet worden ingesteld op "Center" en de VerticalAlignment op "Bottom":
Nu gaan we een schaduweffect aan de rand toevoegen. Klik op de knop 'Nieuw' in het venster Uiterlijk naast Effect. In de komende pop-up selecteert u "DropShadowEffect" en klikt u op "OK".
Pas de Schaduwinstellingen aan die vlak onder de knop "Nieuw" kwamen door BlurRadius in te stellen op "10" en SchaduwDiepte op "1":
Nu gaan we een afbeelding importeren in Blend. U doet dit door met de rechtermuisknop op de map genaamd "afbeelding" te klikken die we eerder hebben gemaakt en "Bestaand item toevoegen" te selecteren of door de map te selecteren en een afbeelding rechtstreeks vanaf uw bureaublad of verkenner naar het bestand te slepen.
Na het importeren zou je projectboom er als volgt uit moeten zien:
Als u de afbeelding in het besturingselement wilt gebruiken, sleept u deze eenvoudig vanuit de projectbrowser, waar u deze hebt geïmporteerd, rechtstreeks naar de werkruimte. Zoals je kunt zien is het veel te groot en in de verkeerde container:
Om dat te repareren slepen we de afbeelding naar de rand:
Verander de hoogte en breedte van de afbeelding naar "Auto", horizontaal en verticaal uitlijnen naar "midden", marges naar "0" en uitrekken naar "uniform" in het venster Common Properties:
Selecteer het TextBlock-gereedschap op de werkbalk aan de linkerkant en maak een TextBlock ergens in het werkgebied.
Druk op de "ESC" -toets op uw toetsenbord om het bewerken van de tekst in het TextBlock te annuleren.
Klik en sleep het TextBlock in het venster "Objecten en tijdlijn" naar het StackPanel dat we eerder hebben gemaakt.
Wijzig daarna de voorgrondkleur in "# FF1F1F1F" en de lay-outinstellingen aan de rechterkant in de volgende waarden: Breedte: "Auto", Hoogte: "Auto", HorizontalAlignment: "Center", VerticalAlignment: "Top", Marge -Top: "8". Zet de tekst op niets door de tekst "TextBlock" te markeren en te verwijderen of door op het witte vierkant ernaast te klikken en op "Reset" te klikken. Wijzig ook het lettertype van de tekst in "Verdana":
Maak nog een TextBlock door stappen 16 en 17 te herhalen, of door degene die we al hebben gemaakt in het venster "Objecten en tijdlijn" te selecteren en op Ctrl + C te drukken en vervolgens op Ctrl + V om het te dupliceren. Het enige dat we anders moeten doen dan stap 17 is dat we niet willen dat er een marge wordt ingesteld. Als u de duplicaatmethode hebt gebruikt, stelt u gewoon de bovenste marge in op "0" of klikt u op het kleine witte vierkant ernaast en stelt u de marge opnieuw in:
Om te kunnen werken met de elementen die we tot nu toe hebben gemaakt, moeten we ze namen geven. Dus ga je gang en hernoem het TextBlock helemaal onderaan naar "imgDate" door ofwel langzaam tweemaal te klikken of door met de rechtermuisknop te klikken en "hernoemen" te selecteren. Verander de naam van de andere TextBlock naar "imgName", de afbeelding naar "img", de rand naar "imgBorder" en de grid naar "imgSize". Nu zijn we klaar met het ontwerp van deze controle en uw hiërarchie zou er als volgt uit moeten zien:
En het ontwerp zou er als volgt uit moeten zien:
Natuurlijk kun je de twee TextBlocks in je project niet zien, omdat we hun tekst een paar stappen eerder op niets zetten.
Ik laat persoonlijk de namen van Textblocks achter zolang ik ze nodig heb om het ontwerp te laten maken voordat ik ze verwijder. Op deze manier kunt u bepalen of alles op de juiste plaats is.
Als je de code wilt bekijken die we zojuist hebben gegenereerd, klik je op het pictogram "< >"in het midden bovenaan de rechter schuifbalk van het werkgebied. Om terug te keren naar de ontwerpweergave, klik op het pictogram bovenaan.
Onze code ziet er zo uit:
Zorg ervoor dat u teruggaat naar de ontwerpweergave.
Maak een andere UserControl in de map "usercontrols" door met de rechtermuisknop op de map te klikken en "Nieuw item toevoegen" te kiezen in het menu.
Selecteer "UserControl" in de pop-up en voer voor de naam "wallview-img.xaml" in:
Kies de ScrollViewer-container in de werkbalk aan de linkerkant ...
... en teken er een rechthoek mee naar de werkruimte.
Terwijl de ScrollViewer is geselecteerd, inspecteert u het gebied met penselen aan de rechterkant en wijzigt u de BorderBrush in "No Brush".
Stel de BorderThickness in op "0" voor alle vier richtingen, de Horizontal en VerticalAlignment op "Stretch", de Top Marge op "29" pixels en de andere Marges op "0". Controleer ook of Breedte en Hoogte op "Auto" staan door op de gekruiste pijlen te klikken. Breid het lay-outgebied verder uit door op de kleine pijl te klikken en zet alle vier de vullingsrichtingen op "0":
Selecteer het StackPanel via de werkbalk aan de linkerkant ...
... en maak een StackPanel in het midden van de ScrollViewer.
Selecteer het StackPanel als dit nog niet is gebeurd in het venster "Objecten en tijdlijn" en klik vervolgens op de knop "Effen kleurenpenseel" in het gebied Penselen (het is het tweede van links, direct naast "Geen penseel") en stel de achtergrondkleur in op "# FFB8B8B8". Verander verder de Horizontal en VerticalAlignment naar "Stretch", controleer of Width en Height zijn ingesteld op "Auto" en of de marges allemaal "0" zijn:
Kies de rastercontainer op de werkbalk en maak een raster.
Als u het in het StackPanel hebt gemaakt, sleept u het gewoon naar het LayoutRoot-raster:
Wijzig de hoogte van het raster in "30" pixels en de breedte in "Auto". Horizontale uitlijning tot "uitrekken", verticale uitlijning naar "boven" en de marge naar (-1, -1, -1, 0) voor (links, boven, rechts, onder):
Selecteer de Rechthoek-tool aan de linkerkant die zich boven de containers bevindt die we al verschillende keren hebben gebruikt ...
... en teken een doos in het werkgebied.
Verplaats de rechthoek naar het raster dat we in de vorige stap hebben gemaakt:
Verander de vulkleur van de rechthoek in "# FF4E4E4E":
En de lijnkleur op "# FF1F1F1F":
Stel Hoogte en Breedte in op "Auto", Horizontaal en Verticaal Afstemmen op "Uitrekken" en reset de marge als er een is:
Nu maken we een StackPanel en verplaatsen het naar de Grid:
Wijzig de parameters van de StackPanel in het volgende: breedte en hoogte in "Auto", richting op "horizontaal", horizontale uitlijning op "links", verticale uitlijning op "midden" en de marge links op "10":
Selecteer het knopgereedschap op de werkbalk ...
... en maak een knop ergens in het werkgebied.
Sleep het vervolgens naar het StackPanel dat we zojuist hebben gemaakt:
Stel de breedte en hoogte van de knop in op "Auto", HorizontalAlignment op "Stretch", VerticalAlignment op "Center", Marges als er een "0" is, de inhoud op "Alle albums" (witte spaties op doel dus de standaardknop ziet er uit iets beter) en het lettertype naar "Verdana":
Selecteer de knop en druk op Ctrl + C, Ctrl + V om de knop in hetzelfde StackPanel te kopiëren en te plakken, en vervolgens de marge-links in "5" en de inhoud in "Huidig album" te veranderen:
Selecteer het StackPanel met de twee knoppen in het paneel "Objecten en tijdlijn" en druk op CTRL + C, CTRL + V om het ook te dupliceren. Nu zou je hiërarchie er als volgt uit moeten zien:
Selecteer het gedupliceerde StackPanel als u dat nog niet hebt gedaan, verander de HorizontalAlignment in "Right" en stel alle margins in op "0" behalve de rechter die u instelt op "10" pixels.
Selecteer een van de knoppen in het gedupliceerde StackPanel en verander de inhoud in " < " if you selected the left one and to " > "voor de juiste. Nu hebben we twee knoppen met een pijlsymbool dat later zal worden gebruikt voor navigatie.
Selecteer het schuifregelaar-gereedschap op de werkbalk en maak een schuifregelaar in uw werkruimte.
Sleep het vervolgens naar de bovenkant van het onderste StackPanel:
Selecteer de schuifregelaar en pas deze aan de volgende instellingen aan:
En onder Common Properties:
Zoals in de afbeelding UserControl die we eerder hebben gemaakt, gaan we de elementen hernoemen die we later nodig hebben. Van onder naar boven: knop: "btnNext", knop: "btnPrev", schuifregelaar: "schuifregelaar", sla StackPanel over, knop: "btnCurrentAlbum", knop: "btnAllAlbums", sla de volgende elementen over naar het StackPanel dat zich binnenin bevindt van de ScrollViewer. Hernoem dat StackPanel naar "inhoud". Nu zou de hiërarchie er zo uit moeten zien:
Dit is hoe de "wallview-img" UserControl nu zou moeten verschijnen:
Dit is hoe de xaml-code voor onze UserControl "wallview.img.xaml" verschijnt:
Blend is een geweldige tool om prachtige ontwerpen en animaties te maken. Je kunt zelfs de hele code achterlaten in Blend, maar ik gebruik Visual Studio liever omdat deze krachtiger is, een debugger heeft en een betere IntelliSense voor voorstellen en automatische aanvullingen.
In het tweede deel van deze tutorial gaan we de hele code achterlaten voor onze twee UserControls in C # en onze eigen webservice die elk beeld uit een bepaalde map in ons wallview plaatst.
Aangezien dit mijn eerste zelfstudie is hoop ik dat je het leuk vond om er doorheen te werken en iets nuttigs hebt geleerd. Voor opmerkingen, suggesties of opmerkingen, laat een berichtje achter in het commentaargedeelte.
Bedankt voor het lezen!
30 dagen proef van Blend
Een inleiding tot Microsoft Silverlight 4 - Blend
Accentsconagua