Stijl- en themahulpmiddel toepassen op besturingselementen: Windows Phone Apps Development-handleiding - Deel 20

In de laatste zelfstudie leerden we hoe stijl- en themabronnen op onze bedieningselementen kunnen worden toegepast. Nu gaan we in dit deel van onze zelfstudieserie door met het werken met stijlen en bronnen en leren we hoe we kleurresources van onze keuze kunnen toepassen.

Laten we gaan werken met hetzelfde project dat we in de laatste zelfstudie hebben gemaakt met één knop. Selecteer die knop en ga naar het eigenschappenvenster. Wanneer u op de kleine pijltoets naast de eigenschap Voorgrond klikt, ziet u dat er nog een klein venster wordt geopend met verschillende kleurtegels en tabbladen. Er zijn vier kleine tabbladen in dat kleine venster, namelijk Null Brush, Solid Color Brush, Gradient Brush en Image Brush. Standaard is deze ingesteld op een effen borstel met kleur wit (RGB: 0,0,0 en alpha-transparantiekanaal ingesteld op 255). U kunt de gewenste kleur kiezen door de schuifregelaar langs de verticale balk te verplaatsen en vervolgens de ronde cursor om de exacte kleur te selecteren. U kunt ook iDropper kiezen waarmee u de kleur van elk beschikbaar hulpmiddel kunt gebruiken. Er zijn veel manieren om de kleur van deze kleurenpenseel aan te passen.

Hetzelfde geldt voor Verlooppenseel. Het voert een vergelijkbare taak uit als een effen kleurenpenseel, maar heeft maar weinig extra opties. Het geeft je een aantal stops. U kunt deze haltes op een creatieve manier gebruiken om verschillende tinten tussen de gekozen kleur te krijgen. U kunt ook de textuur van de kleur wijzigen met opties zoals horizontaal verloop en verticaal verloop. Met Image Brush kunt u een afbeelding kiezen als onze bron. U kunt een afbeelding toevoegen net zoals we een afbeelding hebben toegevoegd in de afbeeldingscontrole. Gebruik voor dit moment een verloopkleurenpenseel met een stop zoals ik heb gedaan (zie afbeelding). Als u nu het XAML-venster ziet, ziet u dat een bepaalde code is toegevoegd aan het XAML-venster voor knop. Nu veronderstellen, als we dezelfde gradiëntkleur willen toevoegen die we voor onze knop hebben toegevoegd aan alle andere bedieningselementen op onze pagina, hoe doen we het? Ga daarvoor naar de voorgrondeigenschap waar we de funky kleurverlooppenseel instellen en klik er met de rechtermuisknop op en selecteer "Waarde extraheren naar resource". Het opent een klein pop-upvenster "Create Resource". U kunt de resource een naam geven zoals u wilt of u kunt vertrekken zoals het is. Vervolgens kunt u kiezen waar u het wilt opslaan, afhankelijk van waar u deze bron wilt gebruiken. Als u het op één pagina wilt gebruiken, selecteert u MainPage.xaml anders kiest u App.xaml en klikt u op OK.

Sleep nu een andere knop op het oppervlak van de ontwerper en ga naar de voorgrondeigenschap. Nu vindt u onze aangepaste resource onder de naam lokale bronnen. Zodra u erop klikt, ziet u de tweede knop dezelfde kleur dragen als de eerste. Wat als er meerdere eigenschappen zijn die we willen toepassen op onze controle? We kunnen dit doen met stijlen. Een stijl is een verzameling bezitsinstellers. Laten we nu een nieuwe stijl maken. Verwijder eerst alle wijzigingen die we in het laatste voorbeeld hebben gedaan en ontvang een nieuwe knop voor een nieuwe start. Plak de volgende code onder de declaraties van xmlsns.

In deze code hebben we twee eigenschappen voor de setter gemaakt om de rand- en voorgrondkleur te wijzigen. Ga hierna naar de code van de knop en voeg dit stukje code toe:

Style = "{StaticResource myStyle}".

U zult opmerken dat onze knoprandkleur en voorgrondkleur rood worden.

Nu als u wilt om deze stijl toe te passen op uw volledige toepassing, knipt u de code tussen de. Open het bestand App.xaml en plak het in tussen toepassingsresourcetags. Als u nu teruggaat en de knop aanvinkt, ziet u dat die knop nog steeds een rode kleur weergeeft.

Dus dit gaat allemaal over stijlen en bronnen in Windows Phone 7.5. In het volgende hoofdstuk zullen we leren over het navigeren tussen de xaml-pagina`s.