Erfaringer fra silverlight 4 out-of-browser + “toast” notifications i viu²
I viu²-prosjektet har jeg lenge hatt ønske om å ta i bruk ‘Silverlight Out-of-Browser’ slik at løsningen kan kjøres som en lokalt program. Det viser seg midlertidig at viu²-prosjektet ikke har kunnet benytte denne funksjonen fordi min løsning er avhengig av å hoste en html-frame over silverlight app’en for å vise YouTube-videoer. For å benytte html-frames på toppen av silverlight må man sette følgende parameter i silverlight objekt-taggen i html-siden: <param name=”Windowless” value=”True” /> Når man benytter silverlight ‘Out-of-Browser’ kan man ikke benytte denne teknikken og jeg har derfor tidligere løst dette ved å laget en WPF applikasjon for å ”hoste” silverlight løsningen i (sjekk denne blogposten: ‘Host Silverlight i WPF app).
Når Silverlight 4 beta’en ble lanser på PDC i november 2009 var ‘Out-of-browser’ en av de løsningen som hadde fått utvidet funksjonalitet og nå finnes blant annet en webbrowser-kontroll som kan host andre websider inne i Silverlight. Jeg har nå oppgradert viu²-prosjekte til Silverlight 4 og lagt inn støtte for ‘Out-of-browser’ som du kan se på bildet nedenfor:
En annen nyttig funksjon i Silverlight 4 er muligheten for å vise “toast” notifications på samme måte som f.eks. det Outlook gjør når man mottar en ny mail. I viu² vises “toast” notifications vinduer med navn på sang og artist ide det skiftes track (se bildet nedenfor). I silverlight 4 er “toast” notifications vinduene foreløpig bare tilgjengelig i “out-of-browser”-mode.
Jeg skal nå gå gjennom hvordan jeg har tatt i bruk disse nye silverlight 4 funksjonene i viu²-prosjektet.
Out-of-browser
Det første jeg undersøkte i forbindelse med Silverlight 4 var å ta i bruk den nye webbrowser-kontrollen for å vise YouTube-innhold og lignende, i stede for dagens løsning med å hoste en html-frame over silverlight app’en. Jeg oppdaget da at den nye webbrowser-kontrollen bare er tilgjengelig i “out-of-browser”-mode og at man i browser-mode må benytte html-brush i stede. Med utgangspunkt i dette har jeg i stede valgt å beholde dagens løsning slik den fungerer på www.viu2.com og heller vise denne websiden i webbrowser-kontrollen når man befinner seg i “out-of-browser”-mode.
Tidligere ble RootVisual i App.xaml satt til usercontrol’en MainPage.xaml, men nå har jeg opprettet en ny usercontrol kalt Main.xaml som settes i RootVisual.
Main.xaml-filen inneholder bare en kontroll og der er den nye webbrowser-kontrollen som skal benyttes i ‘out-of-browser’-mode.
Når Main-kontrollen blir loaded sjekkes det om løsningen kjøres lokalt som ‘out-of-browser’ eller inne i en browser. Dersom man kjører ‘out-of-browser’ navigerer vi webkontrollen til å vises siden www.viu2.com. Hvis løsningen derimot kjører inne i en browser setter vi RootVisual til MainPage.xaml og viser dermed viu2-løsningen på “gamle måten” uten bruk av de nye Silverlight 4 funksjonene.
Denne løsningen gjør det mulig å kjøre viu² i “out-of-browser”-mode uten å gjøre endringer på den eksisterende logikken.
“Toast” notifications
‘Toast notifications’ eller ‘NotificationWindow’, som det heter i Silverlight 4, gjør det mulig å vise så popupvinduer nede i høyre skjermdel tilsvarende det Outlook gjør når man mottar en ny mail. Denne funksjonen er bare tilgjengelig når man kjøre i ‘out-of-browser’-mode og kan se ut som på bildet nedenfor.
Metoden nedenfor er en del av ‘Main.xaml’-filen og sørger for at popupvinduene vises. Metoden tar inn en tekst med navnet på sang og artist adskilt med tegnet §, som den splitter opp og viser i popupvinduet, men først sjekkes det at applikasjonen kjører i ‘out-of-browser’-mode.
Klassen ‘NotificationWindow’ er ny i silverligt 4 og er den metoden som viser popup-vinduet, og vi lager derfor en instans av denne klassen, og definerer høyde, bredde, innhold/content til popup-vinduet. Deretter kaller vi metoden ‘Show(5000)’ sammen med antallet millisekunder popupen skal vises, som i vårt tilfellet er 5 sek.
Når det gjelder innholdet i popup-vindue, dvs. content, så har vi definert de i en egen usercontrol kalt ‘NotificationControl’. Xaml’en til denne usercontrollen vises lenger nede i denne artikkelen.
Nedenfor vises xaml’en til usercontrol’en ‘NotificationControl’ som settes som ‘conent’ i popup-vinduet.
Normalt sett har vi nå skrevet all nødvendig kode for å vise et ‘toast vindu’, men siden jeg har valgt å lage ‘out-of-browser’-løsingen på en litt spesiell måte må vi gjøre noen flere triks. Problemet er at når vi kjører i ‘out-of-browser’-mode viser denne løsningen bare en html-control som rendrer www.viu2.com nettsiden. Årsaken til denne fremgangsmåten finner du lengre oppe i denne artikkelen. Jeg må derfor lagen en kommunikasjonskanal mellom ‘out-of-browser’-klienten lokalt og www.vi2.com, slik at nettsiden kan melde i fra til ‘out-of-browser’-klienten om at popup-vindu skal vises. Dette løser jeg ved å benytte html-bridge/javascript.
Vi begynnet med å opprette en javascript-metode i html-siden som hoster www.viu2.com. Denne metoden tar inn en string kalt ‘text’ som vil være navnet på artisten og sangen som skal vises i popup-vinduet. Javascriptet kaller videre på ‘window.external.Notify’ med stringen ‘text’ som innparameter. Dette er en metode som www.viu2.com kan kalle på og som ‘out-of-browser’-klienten kan lytte på.
Vi går så inn i den “gamle” koden til www.viu2.com og definerer en metode som kan kalle på javascriptet som vi nettopp oppretten. Nedenfor vises eksempel på hvordan man kaller på javascriptet. Innparameteret vil i dette tilfellet være navn på sang+artist, adskilt med tegnet §.
HtmlPage.Window.Invoke(javascriptmetodenavn, innparameter);
Siste skritt er å gå tilbake til ‘Main.zaml’ og definere en lytter til javascriptet slik at man kan vises popup-vinduet i ‘out-of-browser’-mode. Det skjer i metoden ‘UserControl_Loaded’ slik du ser på bildet nedenfor.
Vi har dermed en løsning som viser ‘toast’-vinduer i ‘out-of-browser’-mode med informasjon som kommer fra en “ekstern” nettside på internett.
Hvis du går til www.viu2.com og høyreklikker kan man velge å installere viu² lokalt og dermed kan du teste ut disse ny funksjonene.
Pop Chart Top 100
En annen liten nyhet i viu² er at klienten nå henter inn Yahoo sin ‘Pop Chart Top 100‘-liste med bilder og rangering av sangene. Dermed kan man nå enkelt få tilgang til listepop-musikk. Planen er etter hvert å tilby andre hit-lister også, samt lage liste over hva brukerne av viu² hører mest på. Andre funksjoner som er på vei inn i viu² er visning av lignende artister og sanger til det du som bruker hører på.
viu² hostet i Windows Azure
Jeg har lenge hatt planer om å konvertere silverlight mediaplayeren min, viu², over til Windows Azure, men mangel på ledig tid har stoppet meg inntill nå. Fra før har jeg hostet denne løsning hos GoDaddy.com, hvor jeg også har hatt tilgang til en MS Sql Server for lagring av data. Jeg har benyttet en webservice som kommunikasjonspunkt mellom silverlight-klienten og databasen. Når jeg nå konverterte løsningen over til Windows Azure har jeg valgt å gå over til å benytte RIA Services som kommunikasjonspunkt og Azure Storage for lagring av data.
Det endelige resultatet kan du se her: http://viu2.cloudapp.net
Arbeidet med å opprette selve Azure-solutionen i Visual Studio og å klargjøre denne for RIA Services har jeg beskrevet i en tidligere blogpost, og derfor kommer jeg ikke til å gå innpå dette nå. I stede skal jeg vise hvordan jeg har gått frem for å ta i bruk Azure Storage for lagring av data i viu²-løsningen.
- Første steg, etter at man har en Azure-solution som er klargjort for RIA Services, er å legge til referanse til følgende to dll’er i RIA/ASP.NET Web Role-prosjektet:
StorageClient.dll (denne filen kan lastes ned fra følgende link)
System.Data.Services.Client
- Neste steg blir å opprette en del klasse i RIA-prosjektet knyttet til de dataene man skal lagre i Azure Storage:
- Den første klassen vi skal opprette er ‘TelevisionVO’ som definerer hvilke data vi ønsker å lagre i Azure Storage. Denne klassen skal benyttes for å lagre tv-streaming kanaler. Viktige momenter i denne klassen er at den arver fra ‘TableStorageEntity’, som innebærer at man må implementere parametrene ‘PartitionKey’ og ‘RowKey’. I tillegg krever RIA Services at ett eller flere parametre er merket med [Key].
- TelevisionDB er den klassen hvor vi lagger til metoder for å hente ut legge til og hente ut data fra Azure tabellene våre. I dette tilfellet har jeg opprettet en metode for å hente en liste med objekt av typen TelevisionVO, samt en metode som tar imot et TelevisionVO-objekt og lagrer det i Azure tabellen.
- AzureDataServiceContext-klassen knytter hele løsningen opp mot Azure Table Storage og forteller Azure at denne løsningen benytter 2 tabeller, representert med 2 domene klasse typer (RadioVO & TelevisionVO). Denne klassen arver fra ‘TableStorageDataServiceContext’-klasse, noe som innebærer at klassen automatisk er knyttet opp mot Azure-kontoinformasjoen som vi senere sak sette i config-filene i Azure-prosjektet.
- RiaDomainServices-klassen er en del av RIA Services og er Silverlight is kommunikasjonspunkt. Dette innebærer at vi må lage metoder her som Silverlight kan kommunisere med f.eks. når data skal hentes fra Azure Table Storage. På bildet nedenfor ser du hvordan denne klassen benytter metoder i ‘TelevisionDB’ for å fylle en liste med TelevisionVO-objekter for å returnere til Silverlight.
- Neste steg er å logge seg opp mot Windows Azure portalen og opprette et nytt prosjekt av typen ‘Storage Account’.
- Definer et navn og eventuelt en beskrivelse av løsningen.
- Definer en unik url til prosjektet (SilverFeed er allerede tatt av meg). De andre parametrene kan stå uendret.
- Nå er en ‘Azure Storage Account’ opprettet og man har fått en ‘Primary Access Key’ som skal kopiers og benyttes inne i Visual Studio Azure-prosjektet.
- Gå tilbake til Visual Studio og Azure-prosjektet og ta opp filen ‘ServiceConfiguration.cscfg’
- Endre taggen ‘<ConfigurationSettings>’ lik den du ser på bildet nedenfor og men bytt ut verdiene i ‘AccountName’ og ‘AccountSharedKey’ taggene til de verdiene du fikk når du opprette din ‘Azure Storage Account’ i Azure portalen.
- Gå nå til den andre filen i Azure-prosjektet, ‘ServiceDefinition.csdef’, og endre ‘<ConfigurationSettings>’ taggen lik den du ser på bildet nedenfor:
Nå er prosjektet klargjort for hosting i Windows Azure og lagring i Azure Table Storage er opprettet. Siste steg er å velge ‘Publish’ på Azure-prosjektet i Visual Studio, for deretter å opprette et ‘Hosted Services’ i Azure portalen og laste opp de Visual Studio genererte filene til Windows Azure (lest mer om dette i denne blogpost’en).
Her er en link til min viu² hostet i Windows Azure: http://viu2.cloudapp.net
SilverFeed + Ria Services hostet i Windows Azure
I blogposten om SilverFeed-applikasjonen min skrev jeg om at løsniner som benytter RIA Services må kjøre med ‘full trust’, noe som mange hostingprovidere ikke støtter. Windows Azure derimot gir støtte for dette og derfor har jeg valgt å konvertere/kopiere prosjektetet overt til en Windows Azure-solution.
Det endelige resultatet kan du se her: http://silverfeed.cloudapp.net
- Første steg er å opprette en ny solution av typen ‘Cloud Service’.
- Legg til en ‘ASP.NET Web Role’ og sett ett egnet navn. I dette tilfellet har jeg valgt navnet ‘RIA’.
- Kryss av for ‘Enable .NET RIA Services’
- Deretter legger du til et ‘Silverlight’-prosjekt (SilverFeed) i solution’en.
- Kopier over/legg til alle filer fra den opprinnelige SilverFeed-solution i prosjektene RIA og SilverFeed. Den totale SilverFeedAzure-solutionen skal se ut som på bildet nedenfor:
- Neste steg er å legge til en ‘http handler’ etter den metoden som IIS7 krever. Dette gjøres i ‘ ’system.webserver’-seksjonen i web.config’ RIA-prosjektet. Http handleren ser slik ut:
<add name=”DataService” verb=”GET,POST” path=”DataService.axd” type=”System.Web.Ria.DataServiceFactory, System.Web.Ria, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″ />
- Neste steg er å enable RIA Services i SilverFeedAzure-prosjektet. Dette gjøres i filen ‘ServiceDefinition.csdef’-filen ved å sette ‘EnableNativeCodeExecution’ til ‘true’.
- Nå er alle Azure-tilpasninger gjort og neste steg er å publisere filene for deploy til Windows Azure. Se hvordan på bilde nedenfor:
- Resultatet er at man får opprette de 2 filene du ser nedenfor:
- Neste steg er å logge seg på Windows Azure og opprette er prosjekt av typen ‘Hosted Services’.
- Definer et navn og eventuelt en beskrivelse av løsningen.
- Definer en unik url til prosjektet (SilverFeed er allerede tatt av meg). De andre parametrene kan stå uendret.
- En Windows Azure-maskin er nå klargjort for deg. Velg knappen ‘Deploy’ for å laste opp løsningen din.
- På bildet nedenfor laster man opp de 2 filene man fikk generert etter at vi valgt ‘publiser’ i SilverFeedAzure-prosjektet. I tillegg setter man en tekst som omtaler f.eks. hva denne deployen inneholdt eller når den skjedde.
- Når filene er lastet opp får sendes man tilbake til bildet nedenfor og velger knappen ‘RUN’. Etter noen minutter er løsningen oppe å kjører og statusen settes like ‘Started’ som på bildet nedenfor:
- Under headingen ‘Web Site URL’ finner du link til den deployede løsningen, i dette tilfellet http://silverfeed.cloudapp.net.
Bildet nedenfor viser SilverFeed live, hostet i Windows Azure:
Dette eksemplet viser de nødvendige stegene som må gjøres for å ta en Silveright + RIA Services applikasjon over til Windows Azure. Den viser imidlertid ikke bruken av andre nyttige funksjoner i Windows Azure som f.eks. Azure Storage og SQL Azure. Jeg har i det siste også jobbet med å konvertere viu² over til Windows Azure og i den applikasjonen benytter jeg blandt annet Azure Table Storage, så jeg skal prøve å få skrevet en blogpost om den erfaringen snart.
Klikk på bildet nedenfor for å laste ned kildekoden til dette eksemplet:
myHome
For noen måneder siden skrev en bekjent fra NNUG-miljøet her i Stavanger, Glenn F.Henriksen, om sine planer om å utvikle en home assistant (les ‘Creating my home assistant‘) for å bedre organiserer hjemmet og familiehverdagen. Etter å ha lest Glenn’s blogpost fikk jeg lyst til å prøve noe lignende og jeg er nå i gang med WPF-applikasjonen dere ser på bilde nedenfor.
Løsning min er ikke ferdigstilt enda, men i sin nåværende form tilbyr den værmelding, kalender, oppgaveliste, nyhetsoversikt via rss og verdensklokke (med værmelding) over brukerens valgte byer.
For å slippe å sette opp en egen database vurderer jeg å benytte ulike tjenester fra Google gjennom deres ‘Google Data API’. Dette api’et gjør det mulig å kommunisere med tjenester som blant annet Google Calendar og Google Docs, og nettop disse tjenestene har jeg valgt å benytte meg av. Nedenfor ser dere ett skjermbilde fra Google Calendar i nettleseren som viser de samme 3 avtalene som også vises på myHome-dashbordet på bildet ovenfor.
Nedenfor ser dere deler av koden for å hente ut kalender-items og hvordan jeg pakker dem som objekt av klassen ‘Calendar’ og legger dem til i en list:
Når det gjelder oppgaver så er planen å benytte tjeneste ‘Google Task’ som finnes inne i GMail, men foreløpig finnes det ikke noen API-grensesnitt for denne tjenesten, og derfor har jeg i stede valgt å benytte meg av Google Docs for å lagre oppgaver. Under oppstart av myHome blir det oppretter (dersom det ikke finnes fra før) ett ‘Spreadsheet’ dokument kalt ‘myHome’ i Google Docs og deretter leser og skriver min løsning oppgaver til dette dokumentet.
Nedenfor ser dere deler av koden for å hente ut spreadsheet’et ved hjelp av dokumentnavn i Google Docs. Videre må man loope alle items i spreadsheet’et for å hente ut de enkelte oppgavene.
Som sagt så er ikke denne løsningen komplett enda og derfor kommer jeg tilbake med mer informasjon og kildekode etter hvert som jeg får på plass mer funksjonalitet.
SilverFeed: RSS-leser ved hjelp av RIA Services
Noen av utfordringen man møter på når man utvikler med Silverlight og Flash er de begrensninger som ligger i sikkerhetsmodellen. Den gjør blant annet at det ikke er mulig å koble seg opp mot eksterne datakilder med mindre disse tjenestene finnes på samme server som Silveright-løsningen, eller at det finnes en crossdomain.xml fil på serveren til datakilden (les mer her).
For å gjøre det enklere å benytte eksterne datakilder i Silverlight har Microsoft gitt oss produktet RIA Services. Dette er en løsning som gjør det enklere å bygge Silverlight-applikasjoner med en 3-lags arkitektur med Silverlight som presentasjonslag, RIA Services som applikasjonslaget (uten sikkerhetsbegrensningene til Silverlight) som kobler seg opp mot databaser og/eller webservicer.
Når man oppretter tradisjonelle Silverlight-applikasjoner får man alltid automatisk generert ett ASP.NET-prosjekt for hosting av Silverlight-løsninger, og det er i det ASP-prosjektet man implementerer RIA Services. Kort fortalt går RIA Services ut på å opprette en ’Domain Services Class’ i ASP-prosjektet, hvor man publiserer de metoder som Silverlight trenger. Eksempler på slike metoder kan for eksempel være en som henter rss-feed’er og pakker dem som objekter i en liste og returnerer listen til Silverlight. RIA Services-løsningen sørger for metodene og eventuelle klassedefinisjonen automatisk blir kopiert som ”proxyklasser” inn i Silverlight-prosjektet. RIA Services har mange funksjoner utover det jeg har nevnt og dersom du ønsker mer informasjon om RIA Services kan jeg anbefale å begynne med Brad Abrams artikkel ‘What is .NET RIA Services’.
I dette prosjektet har jeg opprettet et Silverlight + RIA Services prosjekt som henter nettopp RSS og RDF fra ulike nettsider og publiserer dem i en drag&drop-panel i Silverlight. Nedenfor vises et bilde av Silverlight-løsningen og lenger nede i denne blogposten finnes kildekoden til prosjektet. Nedenfor går jeg gjennom veil frem til denne løsningen.
- Det første steget er å krysse av ‘Enable .NET RIA Services’ under opprettelsen av Silverlight-prosjektet. Som man ser nedenfor har jeg valgt å navngi ASP.NET hosting-prosjekt som ‘RIA’
- Legg til en ‘Domain Services Class’ i RIA-prosjektet.
- Dersom du skal returnerer en liste av objekter til Silverlight bør returtypen være ‘IEnumerable<…>’
- I dette tilfellet ønsker jeg å returnere en liste av Feed-objekter til Silverlight og derfor har jeg definert Feed-klasse på bildet nedenfor. I klassen er det viktig at ett eller flere parametre er merket med [Key]
- Nedenfor vises ett eksempelt på hvordan RIA Services metodene kan benyttes inne i Silverlight. RIA metoden returnerer som sagt en liste av feed-objektet og den velger jeg å binde til en ‘PageCollectionView’, dvs en pagercontrol til datatabellen, og denne ‘PageCollectionView’-control’en bindes til datacontext til usercontrol’en.
- Nedenfor vises xaml’en til rss-control’en. Både pagercontrollen og datatabellen er bindet til datacontext til usercontrol’en og dermed til ‘PageCollectionView’-control’en som ble fyllt med data fra RIA-prosjektet på forige bilde.
- Nedenfor ser du et eksempel på hvordan en rss-control vises i Silverlight. 6 slike control’ere vises til enhver tid i en drag&drop-control fra open source-prosjektet Blacklight.
PS: For å kjøre RIA Services i IIS må applikasjonen ha rettighetene ‘full trust’. Min hosting-leverandør ‘godaddy.com’ tilbyr ikke det og derfor får jeg desverre ikke lagt ut en kjørbar demo av dette prosjektet nå. I Windows Azure kjøres alle applikasjoner med ‘full trust’ og derfor planlegge jeg å skrive en blogpost om hvordan man kan konvertere dette prosjektet og hoste det i Windows Azure.
Klikk på bildet nedenfor for å laste ned kildekoden til dette eksemplet:
Windows User ID i Silverlight
Når man utvikler forretningsapplikasjoner har man ofte behov for å få tilgang til windows user id’en til den påloggede brukeren, og i ASP.NET kan man gjør dette med følgende kommando: Page.User.Identity.Name. I Silverlight har man derimot ikke tilgang til denne informasjonen, noe som kan skyldes at Silverlight skal være crossplatform og at dette kan skape vansker i en slik sammenheng, og/eller det kan skyldes den restriktive sikkerhetspolicy som Microsoft har satt i Silverlight.
En måte å komme rundt denne begrensningen på er å kombinere asp.net og InitParameters-funksjonen i Silverlight. I tidligere versjoner av Silverlight hadde man en egen aps-tagg for silverlight (<asp:silverlight>) og dermed kunne man fra asp.net sette initParameteret i runtime. Nå er denne taggen fjernet fra asp.net og man må i stede benytte en vanlig <object>-tagg. Sammen med den endringen forsvant også muligheten for å kommunisere med Silverlight-applikasjonens initParametere direkte fra asp.net. Løsningen på dette er å benytte en <asp:Literal>-tagg inne i Silverlight-objektdefinisjonen, og skrive hele initParameteret-taggen i runtime. Se bildet nedenfor for detaljer:
I ‘Page_Load’ metoden til asp-siten henter jeg windowsID’en fra den påloggede brukeren og skriver denne verdien til <asp:Literal>-taggen som på bildet nedenfor:
I App-filen i Silverlight plukker jeg ut initParameteret og setter den inn MainPage gjennom at jeg har oppdaterte konstruktøren til MainPage til å ta imot dette parameteret (se bildet lenger nede). Nedenfor ser dere StartUp-metoden til App-filen:
Bildet under viser hvordan userid-parameteret ender opp i MainPage-kontrolleren og blir presentert som tekst for brukeren.
Selv om jeg i dette eksemplet tok utgangspunkt i å sende windows user id’en inn til silverlight under runtime, så kan metoden benyttes for å sende alle typer data inn til Silverlight. Man kan f.eks. benytte denne metoden for å lese konfigurasjons-instillinger fra web.config i asp.net-applikasjonen og sende dem inn til Silverlight som initparametre.
Klikk på bildet nedenfor for å laste ned kildekoden til dette eksemplet:
Custom Silverlight Slider
Noe av det jeg setter mest pris på med Silverlight & WPF er at alle standardkontrollere er bygget opp av basismoduler som grid’er, rectangler, textblock’er, osv. i xaml. Dette gjør det mulig å ”drille” ned i alle silverlight-kontrollere og ta totalkontroll over stylingen. I et prosjekt jeg jobber på for tiden var det ønskelig å gjøre stylingmessige tilpasninger av en standard slider-kontroll, og her er en liten introduksjon til hvordan jeg utførte denne tilpasningen.
Resultatet ser dere på bildet nedenfor. Ved å klikke på bildet kan du se et live eksempel på løsningen.
Jeg har forsøkt å forenkle dette prosjektet maksimalt, og derfor er basis-xaml’en du ser nedenfor på bare noen få linjer. Denne xaml’en setter inn en heading + en silverlight slider med standard layout.
Nedenfor ser dere resultatet av standard xaml’en før styling:
Styling av for eksempel en slider-kontroller kan utføres direkte i xaml’en i Visual Studio, men jeg foretrekker å benytte Expression Blend fordi den hjelper meg med å finne riktig xaml’en for den enkelt kontrolleren. Inne i Blend vises en oversikt over alle kontrollere som finnes i prosjektet. Jeg finner slider-kontrolleren og høyreklikke på den og velger ’Edit template -> Edit a copy’ (som på bildet nedenfor).
Når man velger å opprette en kopi av en silverlight-kontroller blir xaml’en for denne kontrollen satt inn i ’UserControl.Resources’ i usercontrol’ens xaml, slik at den kan tilpasses av deg som utvikler.
Slider-kontrollen har et sett med styling for både horisontal og vertikal visning, men i dette tilfellet skal vi bare fokusere på den horisontale stylingen. Grid’en ’HorizontalTemplate’ består av et antall komponenter der de viktigste er:
- TrackRectangle – Selve linjen/backgrunnen til slider’en
- HorizontalTrackRectangleChangeDecreaseRepeatButton – Venstre side av ‘HorizontalThumb’, som i dette tilfellet skal være farget rosa, og som viser ’progressen’ til slideren.
- HorizontalTrackRectangleChangeIncreaseRepeatButton –Høyre side av ‘HorizontalThumb, som I dette tilfellet skal være farget grått, og som viser gjenværende ”sum” i slider’en.
- HorizontalThumb – Selve knappen man drar frem og tilbake på slider’en
På de to bildene nedenfor ser der endringen som er gjort i forhold til original styling. Endringene innbefatter blant annet høyde på slider-komponenter, fargevalg og endring av stylingtemplate.
Før styling-endring:
Etter styling-endring:
HorizontalTrackRectangleChangeDecreaseRepeatButton & HorizontalTrackRectangleChangeIncreaseRepeatButton har fått opprettet hver sin ‘ControlTemplate’ hvor blandt annet fargen er definert.
Før endring:
Etter endring, nå med to ‘ControlTemplate’-metoder:
Bildet nedenfor viser at progress’en nå vises riktig med fargene rosa og grått. Det som gjenstår å endre er selve knappen man benytter for å slide, kalt ‘HorizontalThumb’.
‘HorizontalThumb’ endres ved å høyreklikke på den i kontrolloversikten og deretter velge ’Edit template -> Edit current’
Opprinnelig vises ‘HorizontalThumb’ som en knapp men jeg ønsker i stede å vise en rosa sirkel med skyggeeffekt. Jeg velger derfor å fjerne alt som står mellom taggen <ControlTemplate TargetType=”Thumb”> og
</ControlTemplate>, og erstatter dem med to ellipser som på bilde 2 nedenfor.
Før endring:
Etter endring:
Det endelige resultatet er dere på bildet nedenfor:
