Sigurd Snørteland



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.
SilverlightSlider_5

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.

SilverlightSlider_1_code

Nedenfor ser dere resultatet av standard xaml’en før styling:

SilverlightSlider_1

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).

SilverlightSlider_2

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:
SilverlightSlider_2_code

Etter styling-endring:
SilverlightSlider_3_code

HorizontalTrackRectangleChangeDecreaseRepeatButton & HorizontalTrackRectangleChangeIncreaseRepeatButton har fått opprettet hver sin ‘ControlTemplate’ hvor blandt annet fargen er definert.

Før endring:
SilverlightSlider_4_code

Etter endring, nå med to ‘ControlTemplate’-metoder:
SilverlightSlider_5_code

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’.

SilverlightSlider_3

‘HorizontalThumb’ endres ved å høyreklikke på den i kontrolloversikten og deretter velge ’Edit template -> Edit current’

SilverlightSlider_4

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:
SilverlightSlider_6_code

Etter endring:
SilverlightSlider_7_code

Det endelige resultatet er dere på bildet nedenfor:
SilverlightSlider_5

download_SilverlightSlider

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: