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:
Key Performance Indicators i Silverlight
Som jeg har skrevet om tidligere på denne bloggen så gir Silverlight helt nye muligheter for utvikling og styling av usercontrols enn f.eks. det windows forms gjør. Når jeg så behovet for en kontroll for visning av KPI (Key Performance Indicator) i et prosjekt nylig var det derfor naturlig å prøve å utvikle en slik kontroll selv. Jeg har tatt utgangspunkt i en listbox-kontroll og definerte en ItemTemplate med ulike kontrollere som textblock og ellipse for visning av status og informasjon på de ulike KPI’ene. Kontrollene inne i listbox’en er bindet mot ulike parametre i en KPI-klasse.
Det endelige resultatet er dere på bildet nedenfor:
Her er xaml’en for hvordan listbox’en er bygget opp:
Her vises det hvordan listbox’en bindes mot en liste av KPI-klasser:
Silverlight Screensaver
I forbindelse med det silverlight-baserte mediacenter prosjektet mitt, viu², har jeg utviklet en ‘screensaver’ som startes når musen har vært inaktiv i ett fastsatt antall minutter. Screensaver “flyter” på toppen av applikasjonen og viser en “vulkan som spyr ut” grafiske objekter. Løsningen fungerer ved at ett timestamp settes hver gang musen beveges inne i silverlight applikasjonen, og dette timstamp’et sjekkes av en kontinuerlig kjørende tråd. Når timestamp’et er eldre en et valgt antall sekunder/minutter startes screensaver-animasjonen, som kjøres inntil musen blir beveget neste gang.
Ved å klikke på bildet nedenfor kan du se et live eksempel på løsningen. I demo’en starter screensaver-animasjonen ca 10 sekunder etter siste musen ble beveget.
Her er et skjermbilde av tråd-metoden som starter screensaver’en:
Nedenfor ser man ett eksempel på hvordan screensaveren vises i viu²-prosjektet.
Den grafiske animasjonen som benyttes i denne løsningen bygger på prosjektet ‘Silverlight Particle Generator‘ til nerdplusart.
viu²
viu² er et Silverlight 3 basert mediasenter i nettleseren for avspilling av musikk, tv, radio og podcaster.
Løsningen benytter api’ene til Last.fm og YouTube for å gi Spotify-lignende funksjonalitet for musikkavspilling og artist&track informasjon.
Løsningen er i tidlig beta stadiet og blir fortløpende oppdatert og utvidet med ny funksjonalitet. Etter hvert kommer jeg til å presentere hele eller deler av kildekoden her på bloggen.
Løsningen er tilgjengelig på følgende url: www.viu2.com
PS: viu2 er per i dag hosted hos godaddy.com, og det har vist seg å være en noe ustabil løsning. Spesielt har webservicene vært uttilgjengelige litt for ofte, og derfor jobber jeg nå med å flytte løsningen over til Windows Azure.
viu² mini
I forbindelse med viu² prosjektet har jeg utviklet en mini utgave for “embedding” inn i andre nettsider. Planen var opprinnelig å plassere denne løsningen inn i venstre kolonnen på denne bloggen, men dessverre ser det ut til at WordPress ikke støtte iframes og dermed blir dette umulig å få til.
viu² mini støtter per i dag bare søk og avspilling av musikk, men jeg planlegger å utvide funksjonaliteten videre. Etter hvert kommer jeg til å presentere hele eller deler av kildekoden her på bloggen.
Løsningen er tilgjengelig på følgende url: www.viu2.com/viu2mini
