Share
In deze tutorial laat ik je zien hoe je een cool ogende klok-app maakt voor Windows Phone 7. Expression Blend zal worden gebruikt voor het ontwerpen van deze app omdat het een zeer krachtige tool is om snel boeiende animaties te maken.
Volg de zelfstudie en download en installeer de Windows Phone 7 SDK. Na het voltooien van de installatie kom je terecht bij Visual Studio Express voor Windows Phone 7, Expression Blend voor Windows Phone 7 en Windows Phone Emulator.
De eerste stap is het downloaden en installeren van de Windows Phone 7.5 SDK.
Voordat we beginnen, is hier het laatste beeld van wat we gaan bouwen.
De app zelf is een heel eenvoudige klok-app die de tijd en datum laat zien. We zullen animatie gebruiken om de elementen binnen te brengen wanneer de applicatie start. Het grootste deel van het werk zal de schermelementen samenstellen en op de juiste manier uitlijnen en de opstartanimatie creëren. We voegen ook een klein beetje code toe om de datum en tijd periodiek bij te werken.
Eerst moet u een project maken in Expression Blend. Hiervoor moet u Bestand> Nieuw project in Expression Blend selecteren en de Windows Phone Application Project-sjabloon selecteren.
Geef een naam voor uw project. ik zal gebruiken MinimalClock voor mijn project.
Selecteer nadat het project is gemaakt Project> Run-project om je project te runnen. U zult merken dat het project compileert en vervolgens Blend de Windows Phone 7-emulator start. Vroeg of laat zult u zien dat uw app in de emulator draait. Druk op de startknop op de emulator om je app te sluiten. Als u dit doet, stopt de foutopsporingssessie en komt u op het startscherm van uw emulator. Als je klaar bent met rondkijken in de emulator, ga je terug naar Expression Blend.
Nu zullen we de gebruikersinterface voor de MinimalClock-app samenstellen. Nadat het project is gemaakt, ziet u dit in uw Expression Blend:
Ten eerste moeten we alle besturingselementen verwijderen die door de projectsjabloon voor ons zijn gemaakt. In de Objecten en tijdlijn, klik met de rechtermuisknop op de TitlePanel en kies Verwijder om de besturing te verwijderen.
We moeten ook het lay-outtype wijzigen in Canvas in plaats van Grid, zodat we vrij door onze besturingselementen kunnen navigeren. Om dit te doen, klik met de rechtermuisknop op de ContentPanel en selecteer Canvas in Wijzig het lay-outtype menu.
Als je klaar bent, je Objecten en tijdlijn zou er zo uit moeten zien.
En je sollicitatiepagina moet zo leeg zijn:
alt = "Lege applicatiepagina"Nu hebben we de lege toepassingspagina en kunnen we er besturingselementen aan toevoegen.
Selecteer in het werkbalkmenu de Tekst tool en TextBlock. Teken een rechthoek op uw toepassingspagina in elke gewenste grootte. We zullen de maat later repareren.
Dit is het TextBlock dat we zullen gebruiken om het uurgedeelte van de tijd weer te geven, dus we zullen het moeten hernoemen naar TimeHour. We zullen dit ook iets groter moeten maken.
Zoek aan de rechterkant het venster Eigenschappen. Zorg ervoor dat het TextBlock dat u zojuist hebt gemaakt is geselecteerd en wijzig de naam in TimeHour en druk op invoeren.
Vervolgens moet u de inhoud van de wijzigen TimeHour controle, dus navigeer naar de eigenschap Text en verander de waarde in 12. Raak vervolgens invoeren. Een snellere manier om een eigenschap op het tabblad Eigenschappen te vinden, is door het zoekgebied te gebruiken en de naam van de eigenschap te typen. Zorg ervoor dat u het zoekvak leegmaakt nadat u uw property hebt aangepast, omdat alle andere eigenschappen verborgen blijven door uw zoekopdracht.
Vervolgens zullen we een stijl creëren voor onze TimeHour-besturing. Stijlen zijn een verzameling visuele eigenschappen die op een bepaald besturingstype kunnen worden toegepast. We zullen veel werk besparen met stijlen. Dit kan gedaan worden door rechts te klikken op het besturingselement zelf in de Objecten en tijdlijn palet en navigeer naar de Bewerk stijl menu en selecteer Maak leeg
Vervolgens moeten we de naam van de stijl geven: TimeTextStyle, en zorg er dan voor om te selecteren Dit document waar de stijl zal worden gedefinieerd.
Nadat we de stijl hebben gemaakt, bevinden we ons in de stijleditor. Je zult het herkennen door naar de editor Window te kijken
Wijzig het volgende in het eigenschappenvenster. Zoek naar doopvont in de Onroerend goed zoeken veld, maar vergeet niet om het later te wissen om de andere eigenschappen zichtbaar te maken.
U moet ook de Hoogte en Breedte naar Auto in onze stijl, door te klikken op het kleine gekruiste pijlsymbool direct naast het veld grootte.
Nu zijn we klaar met het bewerken van onze stijl, dus we kunnen de stijlbewerkingsmodus verlaten door op het TimeHours-label bovenaan op ons ontwerpoppervlak te klikken.
Nu hebben we een ander TextBlock nodig om de minuten voor de huidige tijd weer te geven en een ander voor het weergeven van de punten ertussen. Selecteer hiervoor de TimeHours op de Objecten en tijdlijn en druk op Ctrl-C om te kopiëren en druk twee keer op Ctrl-V om twee kopieën te maken. Je zult dit in je eindigen Objecten en tijdlijn paneel.
U moet de volgende wijzigingen aanbrengen:
Nu hebben we alle tekstblokken die we nodig hebben voor het weergeven van de tijd. Het enige wat we nodig hebben is om ze op een lijn te brengen en ze iets verder van elkaar af te plaatsen.
Eerst moet u alle drie de besturingselementen selecteren in de Objecten en tijdlijn palet en klik erop met de rechtermuisknop, selecteer richten en Verticale centra.
U moet een beetje ruimte tussen de tijdselementen plaatsen. Om de elementen precies te verplaatsen, kunt u de pijltjestoetsen gebruiken. Als u de pijltjestoetsen gebruikt, zal de besturing één pixel in de gegeven richtingen verplaatsen en als u de pijl met de Shift-toets gebruikt, wordt het besturingselement met 10 pixels verschoven.
Selecteer het tekstblok TimeHours in het palet Ojects en de tijdlijn en verplaats dit 5 pixels naar links. Selecteer het tekstblok TimeMinutes en druk vijf keer op de rechterpijl om het recht 5 pixels te verplaatsen. Als je eenmaal klaar bent zul je eindigen met dit soort dingen.
Ten slotte zullen we de elementen moeten combineren tot één enkele controle, zodat het later gemakkelijker zal zijn om te manipuleren.
Om dit te doen, moet je alles selecteren TimeHours, TimeDots en TimeMinutes op de Objecten en tijdlijn palet. Klik met de rechtermuisknop op de geselecteerde items en kies Groeperen in en Canvas.
Dubbelklik op de nieuw gecreëerde [Canvas] element en hernoem het naar TimeText. Nu zou je objectstructuur er zo uit moeten zien.
Ten slotte voegen we twee balken toe. Eén verticaal en één horizontaal om de gebruikersinterface een beetje interessanter te maken. We zullen ook de naam van de app toevoegen.
Zorg eerst dat ContentPanel is geselecteerd op de Objecten en tijdlijn palet, selecteer vervolgens de Rechthoek op de werkbalk of gebruik de shortcode M. Teken een horizontale rechthoek net boven het TimeText-besturingselement. Vervolgens moet u de eigenschappen van deze rechthoek wijzigen. Zorg ervoor dat uw rechthoek is geselecteerd en op de eigenschappen palet verander het volgende:
Nu gaan we de vuleigenschap van de wijzigen HorizontalSpearator naar een van de ingebouwde stijlen die worden genoemd PhoneAccentBrush. Hiermee wordt de accentkleur van het huidige geselecteerde thema opnieuw gebruikt. Met deze wijziging zal de applicatie de primaire kleur van het huidige thema opnieuw gebruiken.
Selecteer om de vulling te wijzigen HorizontalSeparator en zoek het laatste tabblad in de kleureneditor genaamd Penseelbronnen. Selecteer vervolgens de PhoneAccentBrush van de lijst.
We moeten ook de Beroerte eigendom van HorizontalSeparator naar Geen penseel. U kunt dit doen door te selecteren Beroerte eigendom net onder van de Borstel eigenschap en selecteer vervolgens het eerste tabblad in de kleureneditor.
We hebben een tweede balk nodig, de horizontale balk. Selecteer hiervoor opnieuw de Rechthoek gereedschap of hit M om het te selecteren. Teken een rechthoek net onder de TimeText controle en stel de volgende eigenschappen in.
Deze scheidingstekens gaan over de grenzen van het scherm, maar dit is de bedoeling. U moet de scheidingstekens zo rond het Tijd-onderdeel plaatsen als volgt:
Nu moeten we de titel van de applicatie toevoegen. Selecteer de TextBlock tool van de Hulpmiddelen palet of druk op T. Teken een TextBlock net boven de HorizontalSeparator en verander de volgende eigenschappen.
Dit is hoe het er nu uit zou moeten zien:
Als u de seconden wilt maken, moet u een nieuw TextBlock toevoegen aan de toepassingspagina. Selecteer het gereedschap TextBlock in het palet Tools of druk op de toets T.
Teken een TextBlock net onder de tijd en stel de volgende eigenschappen in:
Vervolgens zullen we een stijl voor dit element definiëren en later zullen we deze stijl opnieuw gebruiken voor het opmaken van de daglabels.
Om een nieuwe stijl te maken, selecteert u de SecondsLabel op het ontwerpoppervlak, klik er met de rechtermuisknop op en in de Bewerk stijl menu, kies Maak leeg.
Geven SmallTextStyle als de naam van de stijl en klik op de knop OK om de stijl te maken.
Vervolgens komt u terecht in de stijleditor. Wijzig de volgende eigenschap:
Stel ook de boven- en ondermarge in op 2 pixels.
Je kunt de stijlbewerkingsmodus verlaten door op het SecondsLabel in het gebied linksboven op je ontwerpoppervlak te klikken.
Teken een seconde TextBlock beneden SecondsLabel en verander de eigenschappen als volgt:
Met alle wijzigingen ziet de pagina met de telefoontoepassing er als volgt uit:
Nu zijn we klaar om het onderdeel te maken dat de huidige datum zal weergeven. Selecteer hiervoor opnieuw de TextBlock gereedschap of druk op de T sleutel om snel toegang te krijgen.
Teken een TextBlock precies boven het horizontalSeparator-besturingselement en wijzig de eigenschappen ervan als volgt:
Hier ziet u hoe de toepassingspagina er uitziet na het toevoegen van de DateText.
Ten slotte zullen we de controle creëren die verantwoordelijk is voor het weergeven van de dagen. We hebben zeven TextBlock nodig om elke dag van de week weer te geven. U moet de m één voor één toevoegen. Selecteer de TextBlock gereedschap uit het palet Gereedschap of druk op de T sleutel en plaats alle TextBlocks aan de rechterkant van de VerticalSeparator.
maandag
dinsdag
woensdag
donderdag
vrijdag
zaterdag
zondag
Voor elk tekstblok van de dag wijzigt u de stijl door met de rechtermuisknop te klikken op de besturingselementen één voor één, selecteert u de Bewerk stijl menu en kies vervolgens de Bron toepassen. Selecteer stijl SmallTextStyle die we eerder hebben gedefinieerd.
alt = "Selecteren van SmallTextStyle" title = "Selecteren van SmallTextStyle" /> Hierna moeten we de tekstblokken rangschikken zoals weergegeven in de onderstaande schermafbeelding.
Als de dagen niet correct zijn uitgelijnd, selecteert u ze allemaal in de Objecten en tijdlijn palet, klik met de rechtermuisknop en selecteer Linker randen van richten menu.
Vervolgens moeten we de dagen combineren in een nieuwe container, zodat we ze later gemakkelijker kunnen manipuleren. Selecteer met alle geselecteerde dagen met de rechtermuisknop en selecteer StackPanel van de Groeperen in menu.
Dubbelklik op de aangemaakte nieuwe [StackPanel] element en verander de naam in Doordeweekse dagen.
We hebben nog een laatste stap om de UI-ontwerpfase af te ronden en om het geplande uiterlijk van onze applicatie te krijgen. We moeten onze hele gebruikersinterface enigszins draaien.
Selecteer hiervoor de ContentPanel in de Objecten en tijdlijn palet en ga dan naar de eigenschappen en veranderen en in de Transformeren eigenschappengroep, wijzig het Draaihoek naar -30 graden.
Nadat we naar het geroteerde scherm hebben gekeken, merken we dat de schermelementen enigszins afwijken. Ze moeten opnieuw worden gepositioneerd om er mooier uit te zien als ze worden gedraaid.
We moeten de positie van de DateText en de ApplicationTitle. U moet de volgende eigenschappen wijzigen:
Je kunt ook het besturingselement selecteren dat je wilt verplaatsen en de pijltjestoetsen gebruiken om pixel voor pixel een beetje over de bedieningselementen te bewegen en de Shift-toets gebruiken met de pijltoetsen om ze 10 pixels tegelijk te verplaatsen.
Nu alle bedieningselementen aanwezig zijn, is de gebruikersinterface gereed en kunnen de animaties worden toegevoegd.
### Apparaattab
In de eerste schermafbeelding ziet u dat de scheidingslijnen rood zijn, maar in mijn schermafbeelding zijn ze blauw. Dit gebeurt omdat het apparaat verschillende accentkleuren heeft ingesteld. U kunt het apparaatthema wijzigen door op te klikken Apparaat tab net naast de project tab. Hier kunt u de richting van het apparaat wijzigen, verschillende accentkleuren toepassen en zien hoe de toepassing eruit ziet als het donkere of lichte thema is geselecteerd. Ik moedig je aan om een beetje met de instellingen te spelen.
Vervolgens maken we de initiële animatie die wordt afgespeeld wanneer de toepassing wordt gestart. De animatie verplaatst de besturingselementen TimeText, WeekDays, TimeSeconds en DateText naar hun oorspronkelijke locatie.
Animaties in Expression Blend zijn gebaseerd op het maken van keyframes en wijzigen vervolgens bepaalde eigenschappen in dat keyframe. Dit zal het animatiesubsysteem laten weten dat de eigenschap moet worden geanimeerd en dat de waarde moet worden opgegeven in het hoofdframe. Als u bijvoorbeeld een sleutelframe maakt voor de TimeText op 1 seconde en vervolgens de locatie van en de dekking van het besturingselement wijzigt, worden deze eigenschappen geanimeerd.
Eerst moet je een nieuw storyboard maken in de Objecten en tijdlijn palet door op te drukken + knop.
Geef de naam op InitialAnimation voor je nieuwe storyboard en klik OK om het te maken.
Nu het storyboard is gemaakt, ziet u zoiets in het palet Objecten en tijdlijn. Aan de linkerkant ziet u dat ons storyboard genaamd InitialAnimation is geselecteerd en het kleine rode lampje geeft aan dat de opname aan staat. Dit betekent dat als we eigenschappen van een besturingselement wijzigen, deze deel uitmaken van het storyboard in plaats van de gebruikersinterface te wijzigen.
Aan de linkerkant van het palet kunt u het tijdlijngedeelte zien. Hier kunt u in de tijd vooruit of achteruit bladeren en kunt u keyframes toevoegen. Vervolgens animeren we de TimeText en de eigenschap Opacity. We animeren de eigenschap Opacity van 0 procent tot 100 procent in 1 seconde. Selecteer hiervoor TimeText in het palet Objecten en Tijdlijn en zorg dat de afspeelkop op 0 seconden staat en klik op Record keyframe knop.
Het resultaat is dat een nieuw keyframe wordt toegevoegd voor Timetext op 0 seconden. U zult ook opmerken dat een kleine rode stip is toegevoegd aan TimeText, dit betekent dat de InitialAnimation deze controle verandert.
Nu moet je naar de eigenschappen palet en verander de ondoorzichtigheid van TimeText zijn 0 procent.
Vervolgens moet u de afspeelkop naar 1 seconde verplaatsen en klikken op het hoofdframe opnemen.
Ga dan opnieuw naar de eigenschappen palet en verander de ondoorzichtigheid van TimeText naar 100 procent.
De animatie is nu klaar en je kunt hem observeren door op de knop Afspelen te klikken:
U kunt de hoofdframes verplaatsen als u de animatie wilt aanpassen.
Selecteer de 0 seconde keyframe van TimeText. Verander tijdelijk de ondoorzichtigheid eigendom tot 95 procent, zodat u kunt zien wat u aan het doen bent. Dan een paar keer op de Shift en pijl-links toetscombinatie. Hiermee ga je weg TimeText van het scherm. Dit zal de uitgangspositie van onze beweging zijn. Vergeet niet om de ondoorzichtigheid eigendom aan 0 procent.
Selecteer de 1 seconden keyframe van TimeText dan moet je het volgende doen. Raak eenmaal de rechter pijl toets op uw toetsenbord - verplaats de knop 1 pixel naar rechts - en druk dan één keer op de linkerpijltoets - verplaats de knop 1 pixel naar links. Met deze wijziging registreren we in essentie de huidige positie van onze TimeText-besturing en geven we het storyboard de opdracht deze naar deze locatie te verplaatsen, ongeacht de beginpositie.
Probeer de animatie af te spelen. Als alles goed is gekomen, zou je het moeten zien TimeText naar het scherm gaan en geleidelijk op hetzelfde moment verschijnen.
Nog een ding wat we kunnen doen om de animatie wat op te fleuren, is het configureren van de versmalling voor de animatie. Dit maakt de animatie natuurlijker. Selecteer hiervoor de 1s sleutelframe van onze animatie. Wijzig vervolgens de Verlichtingsfunctie eigendom aan Terug InOut op de Eigendom palet.
Speel de animatie nogmaals af om te laten zien hoe de animatie zich nu gedraagt. Als je wilt, verander dan de easing om te zien hoe elke easing-functie zich gedraagt.
Vervolgens zullen we animeren TimeSeconds, het besturingselement dat wordt gebruikt om het secondengedeelte van de huidige tijd weer te geven. Selecteer hiervoor TimeSeconds en voeg keyframes toe aan de tijdlijn op 0 seconden en op 1 seconde. Doe dan het volgende:
Selecteer het tweede hoofdframe van TimeSeconds
Ten slotte moeten we de besturingselementen animeren die verantwoordelijk zijn voor het weergeven van de huidige datum en dagen in de app. Deze animatie zal eenvoudig zijn, ze zullen de dekking van deze besturingselementen animeren van 0 procent tot 100 procent.
. Verander de dekking naar 100 procent.
Selecteer het DateText-besturingselement in de Objecten en tijdlijn palet en voeg een keyframe toe aan 0 seconden.
. Nog een laatste ding moet gedaan worden: stop de animatiemodus en verander de dekking naar 0 voor alle bedieningselementen die we animeren in de InitialAnimation storyboard. Sluit het storyboard in de Objecten en tijdlijn palet door op te klikken X knop naast de naam van het storyboard.
Selecteer vervolgens elk van de geanimeerde besturingselementen en stel de dekkingseigenschappen in op 0 procent.
Nu de animatie is voltooid, is alles nodig om een stukje code toe te voegen om het scherm bij te werken, zodat de inhoud van ons scherm elke seconde wordt bijgewerkt en onze initiële animatie begint wanneer het toepassingsscherm is geladen.
Nu is de applicatie bijna klaar. Het enige wat we moeten doen, is een beetje code toevoegen om het scherm elke halve seconde te verversen en onze initiële animatie te spelen.
Om het scherm periodiek bij te werken, a DispatchTimer moet worden gemaakt wanneer de pagina klaar is met laden. Hiervoor moet een gebeurtenishandler voor de pagina-geladen gebeurtenis worden gemaakt.
Selecteer eerst de applicatiepagina uit de Objecten en tijdlijn palet.
Dan op de eigenschappen palet selecteer de Evenementen tab.
Selecteer de. In de lijst met gebeurtenissen loaded evenement en Dubbelklik om de gebeurtenishandler te maken. Een nieuw venster met de code erachter voor onze toepassingspagina.
Eerst moet de verzendtimer in het klassenbestand worden gedefinieerd (MainPage.xaml.cs). Een "gebruik" -instructie moet worden toegevoegd net na de laatste gebruik van stement bovenaan in het klassenbestand.
Accentsconagua
using System.Windows.Threading; Voeg vervolgens de volgende regel toe net na de klassendefinitie:
private DispatcherTimer _timer; Voeg in de geladen gebeurtenis de volgende coderegels toe:
RefreshUI (this, null); Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin (); _timer = new DispatcherTimer (); _timer.Interval = TimeSpan.FromSeconds (0.4); _timer.Tick + = VernieuwenUI; _timer.Start (); Wat dit stukje code zal doen is eerst een methode aanroepen die de gebruikersinterface zal bijwerken naar de huidige tijd en dag voordat de initiële animatie is ingesteld om in 0,4 seconden te worden uitgevoerd en onze timer zal verbinden om elke halve seconde te worden uitgevoerd en de RefreshUI te bellen methode.
Vervolgens moet een nieuwe methode worden toegevoegd om de timer te stoppen wanneer we de applicatie verlaten. De methode OnNavigatedFrom ziet er als volgt uit:
protected override void OnNavigatedFrom (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedFrom (e); if (_time
